Show all products as separate variants on the collection page of the Debut Theme

Posted By: Dylan Hunt

Published: May 06, 2019 12:04

I just added a YouTube video of this for people that may want to follow along to see how this is implemented. CLICK HERE

This guide is for the DEBUT theme only. If you are looking for the generic guide that works on other themes (requiring some tweaking, then click HERE

I have had a lot of comments for people looking to have this guide work specifically for the Debut theme, so I am going to try to be as specific as possible and hopefully this can help more people achieve this on their own.

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 on the Debut theme.

1. Find the product-card-grid.liquid snippet and open it. This is the loop that is used to display all products in the collection.

2. Replace the product-grid-item with the code below.

3. Find the Collection-template.liquid section and remove the codes on line 144 and 146. These should start with li and /li respectively. The line should now just be the forloop with the snippet in between it.

4. Go to the collection.liquid section and update the same change as step 3, but on lines 29 and 31, which will ensure that the home page is updated properly with this grid and everything is not in one row.

You should be all set now.

Comment below if you're struggling.

Need help implementing any of these guides?

Contact Me