By default, Shopify groups all product variants under a single product card on collection pages.
If you’re using the Shopify Dawn theme and want each variant (Color, Size, Material…) to appear as its own product card, this guide shows you how to do it using a free, Dawn-specific code customization.
⚠️ Important: This tutorial works only with the Dawn theme.
Video Tutorial
Prefer watching instead of reading?
In this video, I walk you through the exact same steps, from duplicating the Dawn theme to seeing each variant displayed as an individual product card on a collection page.
Why Show Variants as Separate Products?
Displaying variants as individual products on collection pages helps you:
- Improve product visibility
- Let customers instantly see all available colors or options
- Increase click-through rate on collection grids
- Reduce friction in the browsing experience
This is especially useful for products where visual choice is the main decision factor.
⚠️ Before You Start (Read This)
This method:
- Works only with the Shopify Dawn theme
- Requires editing theme code
- Must be reviewed after Dawn updates
- Does not offer per-collection controls
- Does not scale well on large catalogs
If you want a no-code solution that works across themes, skip to the Variantify section at the end.
Not Using the Dawn Theme?
This guide is Dawn-specific because it relies on Dawn’s collection grid structure and product card snippets.
If you’re using another theme, you’ll need to:
- Identify the equivalent collection section
- Adapt the product card markup
- Adjust variant logic manually
There is no universal “free” method that works identically across all Shopify themes.
Step 1 — Duplicate Your Dawn Theme (Recommended)
Always work on a copy to avoid breaking your live store.
- Go to Online Store → Themes
- On Dawn, click ⋯ → Duplicate
- Work only on the duplicated theme (e.g. Copy of Dawn)
Step 2 — Create a New Snippet File
- In your duplicated theme, click ⋯ → Edit code
- Open the Snippets folder
- Click Add a new file
- Name it exactly:
card-product-split.liquid - Paste Code 1 (code below)
- Save
Code 1 :
This snippet renders one variant as one product card
Step 3 — Modify main-collection-product-grid.liquid
- In Sections, open:
main-collection-product-grid.liquid - Locate the
<li>block responsible for rendering product cards - Replace that block with Code 2 (provided earlier)
- Save
Code 2 :
This change loops through variants instead of products and outputs one card per variant.
Choose Which Option to Split By
By default, the code splits variants using the Color option:
assign option_chosen = "Color"
You can change this to any option name used in your products, for example:
"Size""Material"
⚠️ The option name must match exactly what is defined in Shopify (case-sensitive).
Step 4 — Preview & Result
- Go back to Online Store → Themes
- Click Preview on your duplicated Dawn theme
- Open a collection page
Each variant is now displayed as its own product card in the collection grid.
Limitations of This Dawn-Only Method
This approach works, but comes with trade-offs:
- Dawn theme only
- Manual code maintenance
- Theme updates may overwrite changes
- No per-collection toggles
- No advanced rules (hide out-of-stock, sales only, etc.)
- Not ideal for large or fast-growing catalogs
Want a No-Code & Theme-Agnostic Solution?
If you want to:
- Avoid editing theme code
- Keep compatibility with theme updates
- Control variant display per collection
- Hide out-of-stock variants automatically
- Show variants on collection, homepage, and search pages
Variantify is built for that.
Variantify lets you show Shopify variants as separate products — no code required.
👉 Install Variantify on Shopify
Conclusion
This Dawn-only method is a solid free workaround if you’re comfortable editing Shopify theme files and understand the maintenance trade-offs.
For merchants who want a safer, scalable, and theme-independent solution, a dedicated app is usually the better long-term choice.