Show all Colors of a product as separate products on the collection page

Posted By: Dylan Hunt

Published: May 16, 2018 17:12


This Tutorial is available for the following themes and as a youtube video

Before reading this, please note I also made a video on how to do this. I have embedded it here to see if it helps a bit more than the code itself since all themes are so different.

Alright, I see a lot of people asking for this and wanted to provide a guide to help anyone looking to do this. If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants.

Where you see the VARIANT LOOP that is where you will need to make a new snippet that contains the code from the product loop. this might be a snippet called product-grid-item or product-loop and you'll need to make a new one, per haps called product-grid-item-variant, and within that you will paste the code from the product grid item, and change the liquid to identify the variant information such as variant.url and variant.image instead of product.featured_image

Comment below if you're struggling.


Need help implementing any of these guides?

Contact Me