Show Color Variants On Collection Pages As Separate Product

Show Color Variants On Collection Pages As Separate Product

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn version 2.5 above and any Shopify 2.0 FREE themes

You can have your variant separated by its variant. I created a code here, but what if you have several variants and needed to show color only or a design perhaps? 

Below is what I created to solve the problem.

We will displaying variants as products in collection pages with a secondary image on hover. The variant only allows one image currently right? We can add more image using metafield. 

If your product does not have a variant image, it will display as one product. So make sure you assign an image to your variants. I used the following variant metafield below to show a secondary variant image. 

Variant metafield

We have to add metafield to our variant. Then set up our metafield in our product variant.

Please check the video as reference. Naming of files will be different different. 

What you are buying:

  • A collection of instead products, it will show product variants with color or type (depending on which option you want to show)
  • This still works with filter but number of products is based on products and not variants
  • You will need to provide featured images to the variants
  • Use metafield variant image to provide hover image
  • Assign which option you want to separate using the theme editor
  • Hide all variant title or show color title only
  • Option to hide the "out of stock" variants, not products
  • Filters works with products only therefore it will not filter the variant

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, create a section, name it collection-variant-color.
3. Replace the default code with the code below


 4. If you want  to assign this collection template as a default, then follow the video. 

If not, we need to create a new collection template. Open and copy the code in the "collection.json" under the Template folder. Then paste the code to the newly created template. 

Inside the newly created template, find this code "main-collection-product-grid" and replace with the name "collection-variant color".

5. We need to make a code snippet. Go to Snippet folder, create a new snippet, name it variant-card.

6. Paste the code below to the newly created snippet.



7. Make sure to SAVE.

8. Please make sure to customize the theme. We provided more options to suit your needs. 

That is it (",)

Back to blog

Leave a comment