Displaying Product Variants on Collection Pages in Shopify


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.


  • Basic understanding of HTML and Liquid (Shopify’s templating language).
  • Access to your Shopify theme’s code.

Step 1: Access Your Theme Code

  1. Go to your Shopify admin panel.
  2. Click on ‘Online Store’ and then ‘Themes’.
  3. Find your theme (Dawn or similar), click on ‘Actions’, and select ‘Edit code’.

Step 2: Modify the Product Card Template

  1. Open card-product.liquid in the Snippets directory. This file controls how products are displayed within collections.

  2. 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">
      {% for variant in card_product.variants %}
          <td>{{ variant.title }}</td>
          <td>{{ variant.price | money }}</td>
      {% endfor %}
{% 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

  1. Open your theme’s main CSS file (like base.css in the Assets directory for Dawn theme).

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

  1. Preview your collection page.
  2. Check for products with single and multiple variants to ensure the table displays correctly only for the latter.
  3. Ensure the layout is responsive and aligns well with your theme’s design.


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!

Make a comment

Your email adress will not be published. Required field are marked*

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.