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.
2. 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 %}
<div class="series-wrapper">
<h2>{{ serie }}</h2>
<div class="products">
{% for product in collection.products %}
{% if product.tags contains serie %}
<div class="product-item">
<!-- Display product information here -->
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<p>{{ product.title }}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<hr />
{% 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
