Conditional sections in Shopify 2.0 themes let you display content only when specific conditions are met. This means you can customise your store dynamically without duplicating code. For example, show a seasonal banner during certain dates or tailor product pages based on customer tags. Here’s why conditional sections matter:
- 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
| Feature | Conditional Sections | Static Sections |
|---|---|---|
| Content Display | Shown based on rules | Always visible |
| Customisation | Page-specific changes | Limited to global updates |
| Performance | Loads selectively | Loads on every page |
| Management | Needs strategic setup | Simple but less flexible |
| Business Value | Drives engagement | Basic functionality |
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:
| Condition Type | Example | Purpose |
|---|---|---|
| Page Type | template == 'product' |
Content for product pages |
| Collection | collection.all_tags contains 'sale' |
Display for sale items |
| Customer | customer.tags contains 'vip' |
Sections for VIP customers |
| Time-based | `now | date: ‘%m’ == ’12’` |
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:
| Page Type | Liquid Check | Use Case |
|---|---|---|
| Home | template.name == 'index' |
Content tailored to homepage |
| Collection | template.name == 'collection' |
Customise category layouts |
| Product | template.name == 'product' |
Product-specific details |
| Blog | template.name == 'article' |
Blog post formatting |
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:
| Product Type | Conditional Sections | Purpose |
|---|---|---|
| Clothing | Size Chart, Fabric Details | Provide sizing and material details |
| Electronics | Tech Specs, Warranty Info | Highlight technical features and guarantees |
| Food/Beverage | Ingredients, Nutrition Facts | Share dietary and ingredient details |
| Digital Goods | Download Instructions, System Requirements | Offer access and compatibility info |
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.
| Test Type | Check Points | Expected Outcome |
|---|---|---|
| Template Logic | Different page types | Sections appear only on the appropriate templates |
| Collection Rules | Various collection types | Promotional sections display correctly for targeted groups |
| Product Conditions | Multiple product types | Product-specific sections load as intended |
| Performance Impact | Page load times | Load time increase stays under 200ms per conditional section |
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:
| Service Type | Description | Benefits for You |
|---|---|---|
| Theme Development | Custom implementation of conditional sections | Designed solutions for Australian businesses |
| Technical Support | Ongoing maintenance and troubleshooting | Direct access to skilled developers |
| Performance Optimisation | Improvements in speed and functionality | Better experience across all devices |
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!
