Displaying Product Variants on Collection Pages in Shopify
Shopify themes like Dawn have set a new standard for clean, efficient, and responsive online storefronts. One common customization that many store owners seek is displaying all product variants directly on the collection pages. This tutorial uses the Dawn theme as an example, but the principles should be applicable to most modern Shopify themes.
Understanding the Requirement
By default, Shopify collection pages show only the main product, not its individual variants. This guide will help you modify your theme to display a table of product variants, including their prices, for products with multiple variants.
If you prefer video tutorials over text, feel free to skip this post and watch the video below. If not, please continue reading.
Join Our Free Shopify Support Group
Prerequisites
- Basic understanding of HTML and Liquid (Shopify’s templating language).
- Access to your Shopify theme’s code.
Step 1: Access Your Theme Code
- Go to your Shopify admin panel.
- Click on ‘Online Store’ and then ‘Themes’.
- Find your theme (Dawn or similar), click on ‘Actions’, and select ‘Edit code’.
Step 2: Modify the Product Card Template
Open
card-product.liquidin theSnippetsdirectory. This file controls how products are displayed within collections.Add the following code where you want the variants table to appear:
{% if template.name == 'collection' and card_product.variants.size > 1 %}
<table class="variants-table">
<thead>
<tr>
<th>Variant</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{% for variant in card_product.variants %}
<tr>
<td>{{ variant.title }}</td>
<td>{{ variant.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}This code checks if the template is a collection page and if the product has more than one variant. If both conditions are true, it displays a table of variants.
Step 3: Style the Variants Table
Open your theme’s main CSS file (like
base.cssin theAssetsdirectory for Dawn theme).Add the below CSS code to style the variants table.
.variants-table {
width: 100%;
border-collapse: collapse;
}
.variants-table th, .variants-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.variants-table th {
background-color: #f4f4f4;
}This CSS code ensures that the text field is visually appealing and matches the Dawn theme’s aesthetic.
Step 4: Test Your Changes
- Preview your collection page.
- Check for products with single and multiple variants to ensure the table displays correctly only for the latter.
- Ensure the layout is responsive and aligns well with your theme’s design.
Conclusion
Adding a variants table to collection pages can significantly enhance the user experience by providing more information at a glance. While this guide focuses on the Dawn theme, the basic approach should be compatible with most modern Shopify themes. Always remember to back up your theme before making changes, and consider reaching out to a professional if you’re not comfortable editing theme code.
With this customization, your Shopify store will be one step ahead in providing a seamless and informative shopping experience to your customers. Happy customizing!
Have you tried this customization? How did it work for your store? Let us know in the comments below!
Comments (6)
James Swann
October 19, 2024 - 4:16 amHi, this was incredibly helpful, thank you so much! I wonder if there’s a way to render each variant on a new line on the product card please? Some of our products have several variants, which at the moment display in one long line of text wrapping onto several lines. Huge thanks 🙂
Shahriar Kabir
December 22, 2024 - 10:28 pmYou can modify the HTML/Liquid structure of the code. Essentially you can add a
BRHTML tag after each variant.ryan
November 15, 2024 - 1:47 amhow do I have the variants table display that a variant is out of stock ?
Shahriar Kabir
December 22, 2024 - 10:31 pmYou can pull the stock status from the product object and add that in the liquid code.
vanessa
December 1, 2024 - 2:15 amHi Shahriah, how can I show only the sizes? thanks in advance
Shahriar Kabir
December 22, 2024 - 10:33 pmYou can remove the price variable from the liquid code.