Solved

How to implement conditional sections in 2.0 themes?

Ceri-Waters
Shopify Partner
98 6 30

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.

Accepted Solution (1)

Ceri-Waters
Shopify Partner
98 6 30

This is an accepted solution.

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.

 

View solution in original post

Replies 7 (7)

NegativeSpace
Shopify Partner
18 3 6

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

Ceri-Waters
Shopify Partner
98 6 30

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.

 

Ceri-Waters
Shopify Partner
98 6 30

Any other thoughts?

 

sjattwood
Visitor
1 0 0

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

Ceri-Waters
Shopify Partner
98 6 30

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).

PurpleMamba
Shopify Partner
119 2 16

Did you find a solution for this?

Ceri-Waters
Shopify Partner
98 6 30

This is an accepted solution.

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.