Hi there, I’m working with a client using the Prestige theme. I am creating extensive product pages for them using dynamic content/metafields so one product page template can be used for all their products.
However, there will be some sections that won’t apply to certain products.
Is there an easy way to ensure that if a product doesn’t contain information for certain sections/metafields then that section won’t appear in the front end when the product is viewed?
Yes there is. Can you give us an example of when a section needs to be hidden so we can help you further?
So if I have 1000 products. And the product page has 15 sections. Some products may utilise all 15 sections, some will utilise 11 sections, some 8 and so on and so on. So the products that don’t contain metadata for that section would need the section to be hidden on the front end, rather than showing with placeholder content or a blank area. Does that make sense?
Careful with such dogmas, alternate templates exist for a reason and avoiding them indicates an information architecture problem.
Trying to shoehorn everything into a single template will lead to unnecessary gymnastics and organizational headaches as the number of “special” sections per type of product grows.
https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template
You either need to modify every single template to conditionally check for it’s requirements before rendering the rest of it’s contents.
Or modify each template so it’s uniquely labeled and then use CSS and liquid in a custom-liquid section, or block in the target sections to hide the sections with CSS.
Performance, The CSS approach is NOT recommended if there are lots of sections as then all your doing is hiding them with display:none; which is NOT the same as not rendering the sections in the first place so you will be making customers load a bunch of content they will never even see.
Yes, it does. So, what exactly do you need from us? Do you need us to provide you with guidance on how to do that, or do you need us to explain the idea, such as with pseudo code, for example? It would be really helpful if we could get an idea of how the product page looks what sections do you have, etc.
This is good advice, thanks Paul, and essentially what I’ve suggested to the client. For some reason they’re keen on the one template idea, but the amount of backend code required to achieve this seems disproportionate to the ease of just creating several templates.
This is the solution I have come up with but as PaulNewton pointed out below, it’s a code heavy solution for a store with thousands of products. What are your thoughts?
Identify the Metafields
Edit the Product Template
Add Conditional Logic
{% assign product = product %}
{% if product.metafields.namespace.key1 != blank %}
{{ product.metafields.namespace.key1 }}
{% if product.metafields.namespace.key2 != blank %}
{{ product.metafields.namespace.key2 }}
It looks good to me!
Unless they are using some ERP or custom data input system i.e. they have very specific cognizant technical reason that makes sense, then this is often just learning laziness combined with not paying attention to the long term headaches or maybe their computer sucks so changing pages in the editor is painful /shrug.
They came to you for your expertise, exert yourself to protect them from themselves prescribing their own solution; xyproblem.
Tell them: yes it can be done here is the increase cost $$$ to modify every single template and importantly an estimate of the ongoing maintenance of such a customization.
Though don’t word it like me 
just make it clear they are paying more for something they don’t even need but your fine with taking there money to get that bag for their poor choices.
Use the liquid tag to consolidate the logic into render flags at the top of the file, then use the flags for allowing rendering of the rest of the section or it’s parts.
{% liquid
if condition
assign render_section_type_X = true
endif
if condition_2
assign render_section_type_Y = true
endif
%}
{%- if condition -%}
{% comment %} section rendered content {% endcomment %}
{%- endif -%}
also maybe use case statements
Depending on the situation plop it all in a snippet and use the {% include %} tag instead of a {% render %} so the logic is in one single place, this may impact performance would be a massive sanity move.
Use whitespace control judiciously {% if %} vs {%- if -%} to minimize blank whitespace output in the source html
Combined content like that psuedo code only applies when statically rendering sections.
For dynamic sections the logic has to be inside each separate sections code.
Good Hunting.
Sounds like I might just need to hire you if they insist on this route
I came across this post as I am also interested in dynamically hiding product sections.
I’m a bit confused by your suggestion to use product templates instead of conditionally hiding sections where no data exists. If that’s the case, doesn’t a client need to go through every single product, determine if data exists or not, then assign the right template for that data?
Also what happens if product data is later deleted?
The reason I want to do this, is I want to display a section with “product manuals” (a metafield). Not all products have manuals. We have 500+ products.
Is the best way really to go through each product manually to figure out which ones have “empty” product manual fields - or would the dynamic hidings of irrelevant sections be a good solution in my case?