Custom Block Appearing on EVERY Product Page

Azryael
Tourist
6 0 3

So after watching Liam's video on customizing theme sections and creating blocks, I realized I can create the additional text box I've been looking for to add aditional information and link videos beyond the typical product description box.

I've added the code to the bottom of the product-template.liquid  so that way it appears in the content list along with "Related Products" and "Product Collection"... so far so good.

I want this to appear right below the image and the smaller thumbnails.

Here's what I've managed to accomplish:

You can see I can edit the information on the left, just like any other editable portion such as the promotion bar, the footer, etc.

The problem I have is that once I add it to ONE product page, it shows up on ALL of them! I don't want it there unless it's required.

So, I've not created a separate snippet or section; I created my custom block within the schema of the product template itself.

{% schema %}
{
  "name": "Product pages",
  "settings": [
    {
      "type": "select",
      "id": "thumbnails_placement",
      "label": "Thumbnails placement",
      "options": [
        {
          "value": "side",
          "label": "Side"
        },
        {
          "value": "below",
          "label": "Below"
        },
        {
          "value": "hide",
          "label": "Hide"
        }
      ],
      "default": "side"
    },
    {
      "type": "checkbox",
      "id": "product_quantity_enable",
      "label": "Show quantity selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendors",
      "label": "Show vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "product_featured_zoom_enable",
      "label": "Enable image zoom",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "product_featured_lightbox_enable",
      "label": "Enable image lightbox",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "product_box_padding",
      "label": "Show product details background",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show social sharing buttons",
      "default": true
    }
  ],
  "blocks": [
	{
	"type": "product_info",
    "name": "Product Info",
    "settings": [
		{
		  "type": "text",
		  "id": "title",
		  "label": "Heading",
		  "default": "<h2>Additional Product Information</h2>"
		},
		{
		  "type": "html",
		  "id": "text-box",
		  "label": "Add custom text below",
		  "default": "<p>Add your text here</p>"
		}
	  ]
  },
    {
      "type": "related_products",
      "name": "Related Products",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Related Products"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "View more"
        }
      ]
    },
    {
      "type": "product_collection",
      "name": "Product Collection",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Simple collection"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "View more"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "id": "collection",
          "type": "collection",
          "label": "Collection"
        }
      ]
    }
  ]
}
{% endschema %}

And then, below the image container code, I've inserted this:

{% for block in section.blocks %}
          	<div class="grid-item" {{ block.shopify_attributes }}>
              {% case block.type %}
              	{% when 'product_info' %}
              		{{ block.settings.title }}
              	{% when 'product_info' %}
              		{{ block.settings.text-box }}
              {% endcase %}
          </div>
          {% endfor %}

Watching Liam's demonstration shows the creating of a section that gets added to the section tab, where you have the footer and the header, etc. The problem with that is that the block will appear below all of the product page content, which is NOT what I want.

Looking through each product page, the text also shows up on ALL pages. So it seems like there's something I'm missing in the code that only make it appear on the particular product page it's been enabled on.

Hopefully I can get some help on this.

0 Likes
Azryael
Tourist
6 0 3

So it seems this block that I'm looking to add cannot be made to be unique to a particular page. In other words, what I'm trying to do can't be done.

I guess it will take the creation or purchase of an app that can be embedded within the liquid template to give me the additional html/richtext box I'm looking for.

Azryael
Tourist
6 0 3

Alright, just an update for those looking to do the same thing since no one else has shed any insight, or even suggested this...

Follow this guide: https://help.shopify.com/themes/customization/store/create-alternate-templates

It involves creating a duplicate product template, then assigning it to a specific product.

From there you can create a new "section" to be included in the custom template using the {% section 'your-custom-section-title' %} line.

You can then copy and paste the default product-template.liquid into your custom section, and then add code and style with CSS at will!

No need for apps.

tokant
Excursionist
19 0 1

This section will display the same info/data on all products using that product page template. Am I correct?

0 Likes
13milliseconds
Tourist
5 0 5

Thanks for updating your post! It's very frustrating that the only way to have custom content show on a product page is to duplicate the templates over and over. Hopefully Shopify will fix this soon.

rreco
New Member
2 0 2
Yes shopify seriously.
Is there a way to pull in content from a page? So each product page would have a corresponding page. The page content could be rendered on a product page?
0 Likes
RevitalashUK
Tourist
9 0 3

Yes this is a great idea! This is exactly what i'm attempting to implement. However, when i go to change the main template suffix file of my website, it somehow is adjusting the layout and entire theme / styling of my product pages, even though it's not touching my master styles.scss template at all.

 

How in the hell can changing a product template.suffix full of { % schema % } inputs, change my entire sites theme display? From things such as font-family's and colours? and background colours!?

 

You can view my ticket at https://community.shopify.com/c/Shopify-Design/Custom-Content-on-Product-Pages/m-p/680744/highlight/...


Nobody has managed to provide me with an answer.. I have a feeling shopify is full of marketers, but not helpful developers. 

0 Likes
Frank_Mancuso
Tourist
17 0 3

Hello,

I am having issues across web and mobile with a random line of code appearing at the bottom of the page. 

Screenshot attached.

#page h1{ text-align:center } /* change the page titles to be be centered */

https://tonyscollectibles.com/

How do i get rid of this code without messing up the website? Thanks!  

IMG_4909.jpeg

0 Likes