How to implement conditional sections in 2.0 themes?

Technical Q&A

Topic summary

Core Issue:
Developers are struggling to implement conditional sections in Shopify 2.0 themes, which was straightforward in 1.0 using Liquid logic to render different sections based on conditions (e.g., product type or customer tags).

Technical Challenge:
Since 2.0 templates are JSON files rather than Liquid files, the previous approach of wrapping {% section %} tags in conditional statements no longer works directly.

Proposed Solutions:

  • Move conditional logic inside the section itself, so sections always load but may not display content
  • Use Ajax/Section Rendering API to dynamically load sections based on conditions
  • Create duplicate section files with identical settings, each including a snippet that handles the rendering logic, then add both sections to the template

Current Status:
The original poster implemented the last approach: moving section code into snippets, creating two sections with different conditional logic for including those snippets, and adding both sections to the template. This workaround functions but isn’t ideal due to duplicated section settings and both sections being present in the template.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hiya,

So in the current 1.0 setup you’re able to do conditional sections.

As an example, if you wanted to bring in a different section depending on product type you can do:

{%- if product.type contains 'Watch' -%}
                {% section 'product-watch' %}
            {%- else -%}
                {% section 'product' %}
            {%- endif -%}

Or, if you want to display aspects of the site differently for specific customers you can do:

{%- if customer.tags contains 'Wholesale' -%}
                {% section 'header' %}
            {%- else -%}
                {% section 'header-wholesale' %}
            {%- endif -%}

My question is, how can you achieve this logic with the 2.0 structure since templates are now just JSON files. With the first example, you could achieve it by having a seperate template, but what about the second? In the second scenario, both sections ultimately have the same definition and output their HTML via a snippet - however it allows clients to control e..g the menu displayed for certain customers and so forth.

We’ve used this logic in quite a few bespoke themes, and I’m just wondering what’s the best way to adapt this to 2.0.

Thanks in Advance,

Ceri.

3 Likes
2

My initial thought would be to move the conditional logic into the section file

3

That would mean doubling up all of the section settings however. Currently I’m able to have one set of section settings for the header for e.g. retail customers, and another identical section file for wholesale. They then pass their data into a snippet which handles the rendering.

My only option at the moment is to include both sets of headers in the template, but only render the one which isn’t ideal.

4

Any other thoughts?

5

What was your solution to this? Having the same issue re adding conditional sections below the fold on product pages.

6

I haven’t implemented anything yet, but the only solution I can currently think of is always including the Section, but having the logic of wherever it displays or not inside the section code. So the section will always be included, but may not neccessarily display.

My alternative approach for smaller sections within the header/footer will be to have them as static sections in the Template, but to actually load them via Ajax as seen here: https://shopify.dev/api/section-rendering . Will be a good technique for smaller secitons needed in multiple areas, e.g. a Store Switcher (drop down of international stores to choose from).

7

Did you find a solution for this?

8

In the end I moved the majority of the section code into a snippet, created two sections each with the logic of including said snippet and then added both sections to the template. Works basically the same.