Shopify Collection View Conditional Sections

While working on updating the Shopify Collection View Template, I ran into an issue where I needed to conditionally display a section. The goal was to check if the section was chosen to be displayed from the Customizer and whether it had content in its blocks. This type of logic is essential when building dynamic, customizable themes in Shopify, and Liquid gives us a powerful way to handle it.

In this post, I’ll walk you through the problem I faced, what didn’t work initially, and the solution I ended up with, including the proper way to structure multiple conditions in Liquid. This is particularly useful when dealing with dynamically populated content like Collection Metafields.

Code Example & Explanation

Initial Approach & Problem

Here’s the initial approach I tried. The idea was to display or hide a section based on two conditions:

1. Whether the section is enabled in the Customizer.
2. Whether the section’s block has content.

I wrote the following Liquid code:

<div 
  class="
    image-with-text-container
    section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}
    {%- if section.settings.collection_check == "collection_yes" and block.settings.text != blank -%} 
      collection-special-show
    {%- else -%} 
      collection-special-hide 
    {%- endif %}
">

But this didn’t work as expected. One issue was how Liquid handles conditions like != blank and != nil. Liquid doesn’t always behave like other templating engines when it comes to combining multiple conditions with and.

Debugging & Next Steps

To troubleshoot, I added additional checks for both blank and nil to see if that would resolve the issue:

{%- if section.settings.collection_check == "collection_yes" and block.settings.text != blank and block.settings.text != nil -%}
  collection-special-show
{%- else -%}
  collection-special-hide
{%- endif %}

Even with this adjustment, I wasn’t getting the expected results. The key issue was that the block I was checking was being populated dynamically from a Collection Metafield, which Liquid wasn’t handling well in this combined conditional.

Final Solution: Nested Conditions

After some research, I realized that I needed to simplify the logic and directly check for the Metafield values. Instead of using and inside the {%- if %} tag, I refactored the code to use nested if statements. This solved the issue.

Here’s the final, working solution:

{%- if section.settings.collection_check == "collection_yes" -%}
  {%- if collection.metafields.custom.collection_block_description_title != blank and collection.metafields.custom.collection_block_description_title != nil -%}
    collection-special-show
  {%- else -%}
    collection-special-hide
  {%- endif -%}
{%- else -%}
  collection-special-hide
{%- endif -%}

Breakdown of the Solution

1. Custom Section Check:
   • The first if statement checks whether the section is enabled in the Customizer (collection_check is set to "collection_yes").
2. Metafield Content Check:
   • The nested if statement checks if the Collection Metafield (collection_block_description_title) has content by ensuring it’s not blank or nil.
3. Class Assignment:
   • Based on the results of these conditions, either the class collection-special-show or collection-special-hide is applied to the section.

This approach ensures that Liquid doesn’t get tripped up by combining multiple conditions with and and evaluates them in a logical, step-by-step manner.

Best Practices

Here are some best practices I followed while solving this problem:

• Avoid Combining Complex Conditions:
  When you need to evaluate multiple conditions in Liquid, nesting if statements can make your code more reliable and easier to debug than combining everything into a single line with and.
• Handle Nil and Blank Carefully:
  Always account for Liquid’s handling of nil and blank when checking dynamic content like metafields. It’s essential to check both != blank and != nil for cases where a field might be empty or undefined.
• Keep Your Code Clean:
  Liquid can get cluttered quickly, especially when handling multiple conditions. Using nested conditions instead of complex logic inside one if statement can make the code easier to read and maintain.