Conditional Block on Default Product Page

[WilliamsMX]

Hi,

I am new to Shopify so apologies if this is obvious.

I have added a size chart to my products. I created the page and added a block to the default products in the Dawn Template. All is working well.

I only want to show the block with the pop up link for a specific Vendor. For others, I don't want to display the block.

Could somebody please point me in the right direction?

Many thanks in advance..

[PaulNewton]

There is currently no high level system for conditional settings/blocks/section show/hide behavior with in shopifys visual theme editor(designer).

Only what the themes developers built in or you customize with code.

Use alternate templates https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-t...

Otherwise as a band-aid use a custom-liquid block or section to add conditional style for CSS that hides the link.

You will have to figure out the CSS selector that targets the link/button/element.

{% if product.vendor == "vendorname" %}
 <style>
  /* custom CSS here */
</style>
{% endif %}

Spelling and case sensitivity matters for the vendor name

If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Hunting.

[charliebrown · Accepted solution]

No worries, this isn’t too complicated. Here’s how you can show the size chart block only for products from a specific vendor:

Go to Shopify Admin: Click on “Online Store” and then “Themes.”

Edit Code: Find your Dawn theme, click “Actions,” and then “Edit code.”

Find Product Template: Look for product.liquid or main-product.liquid under the “Templates” or “Sections” folder.

Add Conditional Code: Locate the section where you added the size chart block. You’ll need to wrap it in an if statement to check for the specific vendor.

For example:

{% if product.vendor == "YourVendorName" %}
<!-- Your size chart block code here -->
{% endif %}

Save Your Changes: Click “Save” to apply the update.

Replace "YourVendorName" with the actual name of the vendor you want to target. This code will ensure the size chart block only appears for products from that vendor.

[WilliamsMX]

Thanks for that.. I created the section and a link with the text "Size
Chart". When I look in sections/main-product.liquid, size chart is not
listed so I am no able to put the condition you suggest.

Also, the only place I can find Size chart is in templates/product.json.
That includes the following text:

"popup_JTzT4Q": {
"type": "popup",
"settings": {
"text": "Size Chart",
"page": "zeus-size-chart"
}

[WilliamsMX]

In the end... I added the Size Popup section to my product theme. I could not find the Size element in the liquid code. However, when I browsed to the page, I found that the popup was wrapped in a class called "modal-opener".

I then edited sections/main-product.liquid and searched for the wrapping class "modal-opener" and I added the vendor condition:

{% if product.vendor == "vendor" %}
<modal-opener class="product-popup-modal__opener no-js-hidden quick-add-hidden" data-modal="#PopupModal-{{ block.id }}"{{ block.shopify_attributes }}>
<button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">
{{ block.settings.text | default: block.settings.page.title }}
</button>
</modal-opener>
{%- endif -%}

I just need to be careful - this will stop all popups for the vendor.. I now want to figure out how to just do it for a specific link text..