Adding variant pills to the collection page on Dawn Theme

Store Design
1

Hi,

I am wanting to add the variant pills from our product page to the collection pages so customers can see what sizes are available. Can anyone help me with the code for this?

Thank you in advance.

2

@Kate_JRC

Hi Please refer to the below instructions to add variants on collection page.

1- Open card-product.liquid in the Snippets directory. This file controls how products are displayed within collections.Add the following code
2- where you want the variants table to appear:

{% if template.name == 'collection' and card_product.variants.size > 1 %}
  
      {% for variant in card_product.variants %}
        
      {% endfor %}
    

| Variant | Price |
| - | - |
| {{ variant.title }} | {{ variant.price | money }} |

{% endif %}

3- 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.
4- Open your theme’s main CSS file (like base.css in the Assets directory for Dawn theme).
5- 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;
}

6- Test Your Changes

Do let me know if you want me to perform these steps if you are not familiar with the code :slightly_smiling_face:

Thanks

3

Legend! Thank you. Is it possible have the variants displayed as pills like the product page. I have attached a screen shot of what that looks like.

Kate

variant pills.jpg
variant pills.jpg704×264 13.1 KB

4

@Kate_JRC

can you please share the collection url so that i can give you an updated style code?

5

Thank you. URL is https://www.jerichoroadclothing.com.au/collections/retail We are currently rebuilding in the dawn them though which is where we are wanting the size variants displayed.

6

@Kate_JRC

than you need to share the preview theme url with me of the draft theme