I’m working on a Shopify store using the Savor theme (version 3.2.1), and I’m trying to achieve something specific on one of my collection pages.
Goal:
I want to display product variants (specifically colour variants) as separate product cards within a collection page, rather than showing each product only once.
Each colour variant of a product should appear as its own product card.
The product title on the card should include the variant colour.
The price shown on each card should be the variant’s price, not the base product price
The image shown on each card should be the image associated with that specific colour variant.
Styling and layout should remain identical to the default collection page.
I found this article, which provides a guide on how to achieve this, but the issue is that the article is out of date and therefore no longer works with OS 2.0 of Shopify. - Adding variants to collection pages on Shopify – Blink
The other guide I found works as intended, however the collection template doesn’t match the styling of my other collections, and there is no way to edit it to match within the theme editor. - Show Variants As Separate Products Shopify
If anyone has a solution, it would be greatly appreciated.
I ran into this exact same problem on my store when I was using an OS 2.0 theme, so you’re definitely not alone here.
Most of the older guides (including the Blink one) stopped working once Shopify moved to OS 2.0, and the newer “separate variants” tutorials usually rely on custom collection templates, which is why you’re seeing styling mismatches and no theme editor control.
What worked for me in the end was not creating a new collection template at all, but instead modifying the existing product card snippet (the one your theme already uses for collections). I looped through the color variants inside that card and rendered one card per variant, while keeping all the original markup and classes intact.
That approach let me:
Show each color variant as its own card
Use the variant image and variant price
Append the color to the product title
Keep the exact same layout and styling as the default collection
Still edit everything normally in the theme editor
It also works cleanly with OS 2.0, pagination, and filters since the collection template itself stays unchanged.
It took a bit of careful editing in the product card snippet, but once it was done, it behaved exactly like a native feature of the theme. Definitely more stable than the template-based solutions.
Hope that helps, happy to share more details if you need them.
Thanks for sharing this. Really helpful to hear from someone who’s already solved it with OS 2.0. Your approach to modifying the existing product card snippet makes a lot of sense, especially keeping everything native to the theme.
One quick thing I wanted to check before playing around with the code. Does your method apply to every collection page, or does it apply everywhere on the site? For example, on my homepage, I have a product showcase that intentionally features a range of select products and colour variants, and I’d want that to stay the same.
With your setup, is it possible to limit the “separate variant cards” behaviour to only certain collections rather than every place the product card is used? Just want to make sure it can be applied selectively.
it can definitely be applied selectively, it doesn’t have to affect every place the product card is used.
In my case, I limited the “one card per variant” behaviour to specific collection pages only, while leaving the homepage, featured product sections, and other product showcases untouched.
You can wrap the variant-loop logic in a condition that checks the current collection. For example:
Only enable it for collections with a specific handle
Or collections that contain a specific tag or metafield
That way, the same product card snippet behaves normally everywhere else (homepage, featured collections, sliders), and only expands variants in the collections you choose.
Really interesting approach @Johnmax , especially the idea of wrapping the variant loop in a collection-handle condition. That’s a clean way to keep it selective.
One thing worth flagging for others reading this, the main downside of the code route is maintenance. Every time the theme updates, there’s a chance your product card modifications get overwritten, especially with third-party themes like Savor that push updates regularly.
For anyone who wants the same result (colour variants showing as individual cards on collection pages) but doesn’t want to maintain custom Liquid, Variantify handles this out of the box. You can choose which collections display variants separately and which stay grouped, without touching theme code. It also pulls the correct variant price and image per card, which was one of @Aaron-Mihell ‘s original requirements.
Not saying code isn’t the right call for some stores, just wanted to add an alternative for merchants who’d rather not deal with the upkeep.