• Better User Experience: Personalise the shopping journey for your customers.
• Higher Conversion Rates: Target promotions to specific groups.
• Simpler Management: Handle multiple content variations centrally.
• Flexible Design: Make changes without affecting the entire theme.

Quick Comparison

Conditional sections use Liquid and JSON to define when and where content appears. For instance, you can show a banner only on product pages or highlight promotions for VIP customers. By combining simple rules, you can create a tailored, high-performing storefront.

Setting Up Conditional Logic

Theme JSON Basics

The theme.json file outlines the structure and settings for your Shopify 2.0 theme. You’ll find this file in the /config directory.

It includes key elements like:

• Definitions for sections
• Global settings
• Preset configurations
• Rules for conditional logic

Writing Section Rules

To set up visibility rules for a section, define them clearly in your section’s schema. Here’s an example:

{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "select",
      "id": "visibility_rule",
      "label": "Show section on",
      "options": [
        { "value": "all", "label": "All pages" },
        { "value": "collection", "label": "Collection pages only" },
        { "value": "product", "label": "Product pages only" }
      ],
      "default": "all"
    }
  ]
}

Basic Conditional Statements

To control section visibility, combine Liquid syntax with JSON settings. Conditions can be used to customise content for specific scenarios:

Here’s an example of applying a condition:

{% if section.settings.visibility_rule == 'collection' and template == 'collection' %}
  <!-- Section content here -->
{% endif %}

Tips for Performance

To ensure smooth performance:

• Keep conditions straightforward and focused.
• Avoid deeply nested conditions whenever possible.
• Use caching for conditions that are checked frequently.
• Test your setup across different page types to confirm everything works as expected.

Next, we’ll explore how Liquid can implement these conditions for customising pages.

Using Liquid for Conditional Sections

Liquid Conditional Tags

Liquid conditional tags help control which sections are visible in Shopify 2.0 themes. Here’s the basic syntax:

{% if condition %}
  <!-- content -->
{% elsif other_condition %}
  <!-- alternative content -->
{% else %}
  <!-- default content -->
{% endif %}

You can use these operators to define conditions:

• == (equals)
• != (not equals)
• > and < (greater/less than)
• contains (checks for a substring or array element)
• and, or (logical operators)

These operators allow you to tailor content for specific pages.

Page-Specific Conditions

Conditional tags are particularly useful for creating page-specific content. For example:

{% if template.name == 'product' and product.tags contains 'featured' %}
  {% section 'featured-product-banner' %}
{% endif %}

Here are some common page types and their Liquid checks:

Multiple Condition Logic

For more complex scenarios, you can combine multiple conditions or use nested logic:

{% if customer %}
  {% if customer.tags contains 'wholesale' %}
    {% if product.available %}
      {% section 'wholesale-pricing' %}
    {% endif %}
  {% endif %}
{% endif %}

Another example with assigned variables:

{% assign is_holiday_sale = section.settings.sale_active %}
{% assign is_eligible_product = product.tags contains 'sale-eligible' %}
{% assign has_stock = product.available %}

{% if is_holiday_sale and is_eligible_product and has_stock %}
  {% section 'sale-banner' %}
{% endif %}

Tips for Writing Efficient Logic:

• Avoid deeply nested conditions; keep nesting to three levels or fewer.
• Use clear, descriptive variable names for better readability.
• Be mindful of performance when writing complex logic.
• Test your conditions in various scenarios to ensure accuracy.

Caching Complex Conditions

For better performance, cache results of complex conditions using the {% liquid %} tag. Here’s an example:

{% liquid
  assign cache_key = 'section_visibility_' | append: section.id
  assign should_show = false

  if customer and customer.tags contains 'vip'
    assign should_show = true
  endif
%}

This approach can help streamline conditional checks and improve your theme’s performance.

sbb-itb-19747f8

Example Use Cases

Custom Headers by Page

Using different headers for each page can improve navigation and usability:

{% if template.name == 'product' %}
  {% section 'product-header' %}
  {% section 'breadcrumbs' %}
{% elsif template.name == 'collection' %}
  {% section 'collection-header' %}
  {% section 'category-filters' %}
{% else %}
  {% section 'default-header' %}
{% endif %}

This setup allows for:

• Navigation tailored to specific products
• Filters that make browsing collections easier
• A streamlined default header for other pages

Now, let’s look at how to use dynamic tools for collection promotions.

Collection-Based Promotions

Here’s how you can display targeted promotions for specific collections:

{% assign current_collection = collection.handle %}
{% assign sale_collections = "summer-sale,clearance,end-of-season" | split: ',' %}

{% if sale_collections contains current_collection %}
  {% section 'promotional-banner' %}
  {% section 'countdown-timer' %}
{% endif %}

This approach helps you:

• Display promotional content only for relevant collections
• Automatically add or remove sale banners
• Maintain consistent messaging across your store

You can apply similar logic to product pages for more personalised content.

Product Page Variations

Customising product pages based on product type ensures a better shopping experience:

{% assign product_type = product.type | downcase %}

{% case product_type %}
  {% when 'clothing' %}
    {% section 'size-chart' %}
    {% section 'fabric-details' %}
  {% when 'electronics' %}
    {% section 'tech-specs' %}
    {% section 'warranty-info' %}
  {% else %}
    {% section 'standard-product-details' %}
{% endcase %}

Here’s a breakdown of how this can be structured:

This structured method ensures each product type delivers the information customers need.

Tips and Guidelines

Testing Methods

It’s important to test conditional sections thoroughly to ensure they work as expected. Always use a staging environment before implementing changes.

Here are some key testing methods:

• Preview Mode Testing: Use Shopify’s theme preview feature to check how conditions behave across various templates.
• Device Testing: Test section visibility on different devices, including mobile (both portrait and landscape), tablet, and desktop.
• Cache Testing: Make sure the sections behave consistently across different cache states.

The next step is to address common challenges and their fixes.

Common Problems and Solutions

Here are some typical issues you might encounter:

Liquid Syntax Errors

Incorrect syntax can cause sections to fail. For example:

{% comment %}Incorrect{% endcomment %}
{% if collections['sale'] == true %}
  {% section 'sale-banner' %}
{% endif %}

{% comment %}Correct{% endcomment %}
{% if collections['sale'].products.size > 0 %}
  {% section 'sale-banner' %}
{% endif %}

Section Load Delays

Loading delays can occur if the logic isn’t optimised. Here’s an example setup:

<div class="section-wrapper" data-section-loading="true">
  {% if condition_met %}
    {% section 'conditional-content' %}
  {% endif %}
</div>

Speed Optimisation

Conditional sections can slow down page load times if not handled properly. Use these strategies to keep things running smoothly:

Lazy Loading

Implement lazy loading to reduce the initial load time:

{% if template.name == 'product' %}
  <div data-lazy-section="product-recommendations"
       data-url="{{ routes.product_recommendations_url }}">
  </div>
{% endif %}

Resource Management Tips

• Combine similar conditional checks to minimise processing time.
• Use CSS display properties instead of manipulating the DOM whenever possible.

Keep your logic straightforward to avoid unnecessary overhead:

{% if template.name == 'product' and product.type == 'shoes' and product.tags contains 'sale' %}
  {% section 'special-offer' %}
{% endif %}

Next Steps

Key Actions

Once you’ve added conditional sections to your Shopify 2.0 theme, it’s crucial to test them thoroughly on different devices to ensure everything works smoothly. Use Shopify’s built-in analytics to keep an eye on load times and track mobile performance metrics. These steps will help maintain a seamless user experience and keep your site running efficiently as your conditional logic changes over time.

If you need more advanced support beyond your internal testing and tweaking, consider how our services can help improve your theme.

Alinga Services

Alinga, a certified Shopify Plus Partner with 20 years of eCommerce experience, provides expert assistance in optimising Shopify 2.0 themes. Here’s what we offer:

Are you ready to elevate your online business to the next level? With automation, easy customisation, and multi-channel adaptability, Alinga’s Shopify Plus integration will help grow your e-commerce business. Our team of experts ensures that your setup is smooth future-ready, and fits every requirement. Let’s explore how Alinga can transform your Shopify platform into an effective sales tool, get in touch with us right away!

Related posts

• Ultimate Guide to Shopify Plus Custom Development
• How to Use Dynamic Sources in Shopify Themes
• Responsive Design for Shopify: Ultimate Guide
• 10 Mobile Optimisation Tips for Shopify Plus

The post Conditional Sections in Shopify 2.0 Themes appeared first on Alinga.