Divider between collection/series

Store Design

Topic summary

Question: How to display products grouped by series on a collection page while maintaining filter functionality.

Proposed Solution:
Tag products by series (e.g., “Series-A”, “Series-B”) in Shopify admin, then modify the collection template using Liquid code to group products under series headings. Add JavaScript for dynamic filtering or use Shopify’s built-in tag filters.

Implementation Approach:

  • Use Liquid to loop through series tags and display products grouped accordingly
  • Apply CSS styling to organize series visually with horizontal product layouts
  • Add filter functionality via JavaScript dropdowns/checkboxes

Theme-Specific Challenge:
The user is working with the Symmetry theme, which doesn’t have traditional collection.liquid files. Instead, it uses:

  • Sections folder (look for collection-template.liquid, collection-grid.liquid)
  • JSON templates (collection.json in Templates folder)
  • Section-based architecture requiring modifications in the Sections folder

Next Steps:
Identify the specific section file handling collections in Symmetry, implement the series grouping logic there, and add custom CSS in theme assets. The responder offered further assistance via email for theme-specific customization.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Is there any way I can have an overview per series on a collection page which is still filterable.

example:

Serie A

Product A1 - product A2 - product A3 - Product A4

Serie B

Product B1 - product B2 - product B3 - Product B4

Serie C

Product C1 - product C2 - product C3 - Product C4

Thanks,

Guido

2

Hey @GuidoB ,

Yes, you can achieve this layout by creating custom sections in your Shopify theme’s collection template. Here’s a general approach using Shopify’s Liquid code and basic CSS:

Steps to Create a Series-based Product Overview

  1. Tag Products by Series:

-Start by tagging products in your Shopify admin under each series. For instance, you can tag products with Series-A, Series-B, Series-C, etc.

  1. Modify the Collection Template:

-In your theme, go to the collection.liquid or collection-template.liquid file.

-Use Liquid to filter products based on the tags and group them under each series.

3. Add Filter Functionality:

-You can add JavaScript to filter products dynamically on the page without refreshing. Alternatively, Shopify’s built-in tag filter feature can also be used.

Example Liquid Code:

Here’s a basic structure of how this might look in Liquid:

{% assign series = "Serie-A,Serie-B,Serie-C" | split: "," %}

{% for serie in series %}
  
    ## {{ serie }}
    
      {% for product in collection.products %}
        {% if product.tags contains serie %}
          

            
            
              
              

{{ product.title }}

            
          

        {% endif %}
      {% endfor %}
    

  

  

---

{% endfor %}

CSS for Styling:

Customize the styling with CSS to organize each series visually and align products horizontally.

.series-wrapper {
  margin-bottom: 2rem;
}
.series-wrapper h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.products {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.product-item {
  width: calc(25% - 1rem);
}

Adding a Filter Function:

Use JavaScript to add filtering on the page. This could involve dropdowns or checkboxes to filter products based on tags, series, or other criteria.

This approach provides the grouped view you want while still being filterable by series or other product attributes.

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

1 Like
3

Thanks Rajat,

We are using Symmetry template and I don’t see files: collection.liquid or collection-template.liquid file.

4

In the Symmetry theme, the collection page template might be structured differently, often using Sections and Snippets rather than a single collection.liquid file. Here’s how you can find and modify the collection page in Symmetry:

  1. Check for Sections:

-Go to Online Store > Themes > Edit Code.

-Look in the Sections folder for files like collection-template.liquid or collection.liquid . You may also see files like collection-grid.liquid or collection-list.liquid that handle the collection layout.

  1. Alternative File Locations:
  • In Symmetry, collections are sometimes managed through JSON templates. Look for collection.json in the Templates folder, which defines the layout and includes different sections.

-Open collection.json and see which sections are included on the page, such as main-collection or other collection-specific sections.

3. Creating Custom Series Grouping:

If the collection page uses a section (e.g., main-collection), open that file in the Sections folder. This is where you’ll add the Liquid logic to display products by series.

  1. Implement the Series-Based Layout:

-In the section file (like main-collection.liquid), follow the approach we discussed to group products by series based on tags.

5. Testing and Styling:

Make sure to preview the changes on a live collection to ensure the layout works as expected.

Add custom CSS in the theme.css file or the relevant CSS file in Assets to style each series section.

If you run into specific file locations or need help customizing the Liquid code in Symmetry, please messege me on email after that we discuss this.

thanks