Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Currently on Pixel Unions Empire theme:
Here's the situation:
I have a "vendor" metaobject connected as a meta field in some of my products.
I would like to dynamically render an "about the vendor" section and "view more from the vendor" section.
I would like to add a conditional logic container that I can put an "image-with-text" section, and a "featured-collection" carousel inside of.
{% if product.metafields.custom.vendor %}
{% render sections %}
{% endif %}
I tried creating a new section, but I don't know how to drop in other sections, also tried duplicated the desired sections and adding the logic directly to those, but I don't think I quite understand the theme enough to get this to work either. Thoughts?
I can make this work by re-create the "image-with-text" section with a custom liquid block and CSS, but the "featured-products" section is proving difficult/too much work. I don't want to reinvent the wheel here.
I'd like to suggest a solution which would require no theme code modification => makes theme updates easier.
The best approach would be to create an alternate template for products which have this metafield to include required sections and assign it only to those products.
Cons: assigning templates manually may be overlooked if you have a lot of these products. Would be nice to automate it, but Flow does not have builtin action for assigning a template (a developer can create a custom action to do it, or use another app)
Alternatively, you can modify your default template to include those sections for all products, but add custom liquid sections to hide those empty sections if metafield is not set.
Cons: kinda hackish
Here is the idea: we create a custom liquid section which will output a CSS rule to hide the next section based on condition and insert it before each of the metafield-dependent sections like so:
Here is the code for the custom liquid section:
<style>
#shopify-section-{{ section.id }} {
display: none;
}
{% unless product.metafields.custom.vendor %}
/* hide next section if metafield is not set */
#shopify-section-{{ section.id }} + * {
display: none;
}
{% endunless %}
</style>
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025