How to Show Variants as Separate Products in Shopify (No Code)
Display each color, size, or style variant as its own product card on Shopify collection pages — without duplicating products or editing theme code.
By Siva Baskara
·
Updated April 2026
·
10 min read · 3 min setup
Who this guide is for
Shopify merchants selling products with multiple visual variants — color, size, material, pattern, or style. Especially useful for fashion, jewelry, home decor, and any catalog where variants drive the purchase decision.
By default, Shopify hides your product variants behind a single product card on collection pages. If you sell a hoodie in 5 colors, customers only see one — the others stay invisible unless they click into the product page.
This guide shows you exactly how to display every variant as its own product card, using a real example from one of our users: Geliefd Hout, a Dutch brand selling rattan wall decoration letters.
🎥 Video Tutorial
Prefer to watch? This video walks you through the exact same steps shown in this article.
Geliefd Hout sells rattan letters for wall decoration — one product with 26 variants, one for each letter of the alphabet. On their collection page, customers only saw one card. No indication that 25 other letters existed unless they clicked in.
Variants hidden behind one product
The Goal: Each Variant as Its Own Product
A full-catalog collection grid, without duplicating products
Geliefd Hout's goal was simple: make every letter variant appear as a separate product on their collection page, so customers could instantly see all 26 options.
They achieved this with the Variantify app without duplicating products in Shopify admin, and without editing any theme code.
The result with Variantify
Step-by-Step: How to Set It Up with Variantify
4 steps, no code, ~3 minutes end to end
1
Install Variantify & enable the app embed
Go to the Shopify App Store and install Variantify (free 7-day trial, no credit card required).
Once installed, open your Shopify theme editor and enable the Variantify app embed in your theme settings. This allows the app to modify how products appear on your collection pages.
Enable the Variantify app embed in your theme
2
Open the Variantify Dashboard
All your Shopify collections appear automatically in the dashboard, ready to configure.
Your collections in the Variantify dashboard
3
Configure variant display on your collection
Select the collection you want to edit. Then:
Toggle Variant display ON
Choose which option to split by — color, size, material, or any custom option used in your products
Optionally set a custom title format (e.g. "Product Title – Color")
Optionally enable display rules: hide out-of-stock variants, hide variants without image, show only discounted variants
Configure variant display settings per collection
4
Refresh your collection page
That's it — each variant now appears as its own product card with its unique image. No duplicated products in Shopify, no theme code changes.
Before vs After — Geliefd Hout collection page
Why This Works for Them
Three concrete outcomes, measurable from day one
🛒
Better discovery
Customers see every variant at a glance — no clicks needed to explore the full range.
📈
More clicks & sales
Each variant card is a new entry point — more visibility directly translates to more engagement.
🛡️
Zero maintenance
No code, no theme edits, no breakage on theme updates. Works with most OS 2.0 themes.
Extra Features
Beyond the basic setup — advanced controls included
🎨
Split by any option
By letter, color, size, material, style or any custom option.
🔀
Reorder variants
Drag & drop to control the display order of variants on each collection — prioritize best-sellers or seasonal colors.
👁️
Show or hide each variant
Per-variant visibility toggle for each collection — hide specific variants without affecting Shopify product data.
🏷️
Custom variant titles
Choose how variant titles appear in collections (e.g. "T-shirt – Blue"). SEO-friendly and readable.
🎯
Advanced display rules
Hide out-of-stock variants, hide variants without an image, show only discounted variants, or mix variants.
🔍
Custom collections by SKU
Create curated collections with specific variants only, selected by SKU or barcode — perfect for "Black-only" or sale pages.
🏠
Homepage & search results
Display variants beyond collections — inside featured collections on your homepage and in Shopify search.
No. Variantify only changes how variants are displayed on your collection pages, homepage, and search results. Your product structure, inventory, and data in Shopify Admin remain completely unchanged.
Yes. Variantify works with most Shopify OS 2.0 themes, including Dawn, Impulse, Prestige, Refresh, Sense, and many more. Install the free trial to test compatibility, or contact support for a quick check on your specific theme.
No. Variantify doesn't create new URLs or duplicate product pages — it enhances the visual display on collection pages while preserving Shopify's native product structure. Your existing SEO remains intact.
Yes. Variantify gives you full per-collection control. You can enable variant display on specific collections, choose which option to split by (color, size, material…), hide specific variants, and reorder them with drag & drop — all independently for each collection.
Yes. Variantify includes a drag & drop interface to reorder variants per collection. You can prioritize best-sellers, seasonal colors, or new arrivals, and your custom order is saved per collection.
Yes. Variantify supports variant display on collection pages, featured collections on your homepage, and Shopify search results. See this guide for details.
Yes — you can achieve this with custom Liquid code. We wrote a free Dawn theme tutorial with production-ready code. The trade-off: custom code breaks when you update your theme, doesn't offer per-collection control, and requires a developer.
Pro plan: $9.99/month (up to 30 collections). Advanced plan: $19.99/month (unlimited collections). Both include a 7-day free trial. See pricing details.
Support is handled directly by the founder. Reach out via in-app chat or the contact page — you'll get a personal response, usually within a few hours.
.webp)
.webp)
