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

• What Are Dynamic Sources? They use metafields to store extra product, collection, or page details, making updates quick and easy.
• Why Use Them? Save time, reduce errors, and maintain consistent branding while managing content for a growing store.
• How to Set Them Up:
  • Create metafields under Settings > Custom data > Metafields.
  • Link them to theme sections via the dynamic source icon in the customiser.
• Common Uses: Seasonal banners, product specifications, collection filters, and more.

Quick Tip: Always test your changes across devices and formats to ensure everything looks right. If issues arise, check metafield setup, clear theme cache, or use fallback content.

Dynamic sources make managing Shopify themes simple and efficient. Ready to dive in? Keep reading for detailed steps and troubleshooting tips.

Using dynamic sources in your product and page templates

Setup Steps for Dynamic Sources

Opening Theme Settings

Go to Online Store > Themes and click “Customise” on your active theme. In the left sidebar, look for blocks with a dynamic source icon.

Setting Up Metafields

Follow these steps to create metafields:

• Access Metafields: Head to Settings > Custom data > Metafields.
• Choose Content Type: Select the type of content you want to customise, such as products, collections, or pages.
• Create Definition: Click “Add definition” and configure the following:
  • Name: Use a clear, descriptive name.
  • Namespace: Organise related fields into groups.
  • Key: Provide a unique identifier for the field.
  • Type: Pick the data type (e.g., text, number).

Organise your metafields under relevant namespaces like product_specs or shipping_info to keep everything structured.

Linking Metafields to Themes

1. Choose a Theme Section

Decide where you want to display dynamic content, such as in product descriptions, collection headers, or custom page sections.

2. Set Up the Dynamic Source

In the section settings, look for fields that allow dynamic sources. Click the dynamic source icon and select the desired metafield from the dropdown menu.

3. Preview Your Changes

Check how the updates look across different devices to ensure everything is formatted correctly.

For larger product catalogues, it’s helpful to establish a consistent metafield structure. Here’s an example:

Now that you’ve set up your dynamic sources, you can explore how to use them to improve product and page layouts.

sbb-itb-19747f8

Common Uses for Dynamic Sources

Collection Page Features

Dynamic sources can simplify and improve your collection page layouts by automating updates and streamlining design elements.

• Seasonal Banners: Use collection-specific metafields to automatically update banner text, background colours, and CTAs during sales or seasonal events.
• Filter Options: Set up metafields for attributes like material, price, season, or size to create dynamic filtering options.
• Collection Headers: Configure metafields to display flexible headers, including category descriptions, image galleries, countdown timers, and sorting options.

These features work smoothly with your theme setup, improving both the look and functionality of your pages.

Fix Common Problems

Fix Connection Issues

If your dynamic sources aren’t connecting, try these steps:

Clear Theme Cache
Go to Online Store > Themes > Customise > Theme Actions > Clear Cache to clear your theme’s cache.

Check Namespace Consistency
Ensure that the namespaces and keys for metafields match exactly in your theme files.

Update Theme Files
Verify that your theme files correctly reference dynamic sources. Check the schema.json file to confirm accurate metafield definitions. For example:

{
  "name": "Product features",
  "settings": [
    {
      "type": "text",
      "id": "feature_specs",
      "label": "Feature Specifications",
      "info": "Enter product specifications"
    }
  ]
}

If the issue persists, move on to resolving display problems.

Fix Display Problems

If your metafield data isn’t showing up as expected, try these fixes:

Format Validation
Ensure your metafield data uses the correct format. For example, currency values should follow the Australian format (AUD), and dates should be in DD/MM/YYYY format.

Handle Empty Values
Provide fallback content for metafields that are blank. Here’s an example in Liquid:

{% if product.metafields.custom.feature_specs != blank %}
  {{ product.metafields.custom.feature_specs }}
{% else %}
  <p>Specifications coming soon</p>
{% endif %}

Responsive Display
Make sure your dynamic content displays properly across devices by adding CSS:

.dynamic-content {
  max-width: 100%;
  overflow-wrap: break-word;
}

Maintenance Tips

To keep your dynamic sources running smoothly, follow these maintenance practices:

Weekly Checks
Inspect metafield connections, test mobile responsiveness, confirm AUD currency and DD/MM/YYYY date formats, and check for broken images.

Version Control
Always back up your working theme configuration before making changes. Use Shopify’s theme versioning system to track edits and revert if necessary.

Performance Monitoring
Keep an eye on page load speeds. If pages take longer than 3 seconds to load, optimise metafield queries or enable lazy loading for dynamic content.

Documentation
Maintain a simple record of your dynamic source setups. Here’s an example:

Conclusion

Key Takeaways

Dynamic sources simplify Shopify themes by allowing flexible, data-driven content management. To make the most of them, focus on these essentials: set up correct namespaces, maintain cache regularly, and test thoroughly on different devices.

Other tips include validating data formats (like DD/MM/YYYY and AUD), using fallback content, keeping an eye on load times, and documenting your configurations for future reference.

If you need more help, check out the support options below.

Alinga Support Options

Still facing challenges? Professional help can ensure everything works smoothly.

Alinga’s Success Growth Retainers program offers expert support for dynamic source implementation. Their team of Shopify developers, designers, and SEO strategists can help with:

• Setting up custom metafields
• Implementing dynamic content tailored to Australian eCommerce standards
• Improving theme performance for quicker load times
• Resolving technical issues and providing ongoing maintenance

Based in the Gold Coast and Brisbane areas, Alinga’s specialists are committed to delivering top-notch configuration and support to keep your Shopify store running efficiently. Their expertise ensures your dynamic content remains effective and responsive.

Are you thinking about transitioning to Shopify? Alinga makes transferring effortless, safe, and easy. We manage every aspect, from data and product transfers to design copy and SEO maintenance, so your store operates seamlessly. Don’t allow your fear of technology to restrict you. You can have confidence in Alinga to offer an effortless transition to Shopify and to prepare your business for significant growth. To start the transformation, contact us right away!

Related posts

• B2B and B2C blended stores
• Real-Time Inventory Sync for Shopify Plus
• Ultimate Guide to Shopify Plus Custom Development
• Business Central > Shopify integration

The post How to Use Dynamic Sources in Shopify Themes appeared first on Alinga.