How to Show Color Swatches for Separate Products on Shopify (Step-by-Step Guide)

April 10, 2026
Combined Listings, Variant Images
12 min read
separate product cards connected by color swatch circles in a step-by-step flow

Short answer: Shopify only connects colors that live inside one product, so six separate color products stay six unconnected cards. Rubik Combined Listings, built by Craftshift, groups separate products into one listing and puts color swatches on the collection card. Free plan covers 5 groups, 5.0 stars across 65 reviews.

A dress store with 40 styles, each in 6 colors as separate products (for unique SEO titles, URLs, and descriptions per color), ends up with 240 product cards on the collection page. No visual link between them. Customers can’t tell that “Luna Dress, Sage” and “Luna Dress, Rust” are the same dress in different colors. Showing color swatches for separate products on Shopify is what turns a messy collection grid into something that actually makes sense to shoppers.

This is a Combined Listings problem, not a variant images problem. Variant images filter the gallery on a single product page. What we’re talking about here is linking separate Shopify products together and showing swatches that let customers switch between them, on both collection pages and product pages. Different scope entirely.

Shopify has a native Combined Listings feature, but it requires Shopify Plus (starting at $2,300/year). For everyone else, third-party apps fill the gap. This guide walks through the full setup using Rubik Combined Listings, which works on any Shopify plan including Basic.

In this post

Why separate products instead of variants

Quick version: SEO, image control, and the variant limit.

When each color is a separate product, it gets its own URL, its own title tag, its own meta description, and its own image gallery. Google indexes each color independently. “Luna Dress Sage Green” and “Luna Dress Rust Orange” can each rank for their own color-specific search queries. With variants, they all share one URL and one title. You’re stuffing 6 colors’ worth of SEO value into a single page.

Image control matters too. Each separate product gets its own 250-image allowance. If you have detailed lifestyle photography per color, variants can’t hold it all. Separate products give you room.

And then there’s the variant limit. Shopify caps products at 100 variants (or 2,048 with Combined Listings on Plus). If each color has 5 sizes and you have 12 colors, that’s 60 variants. Add a third option like material and you blow past the limit fast. Separate products per color sidestep this entirely.

Use our Separate Products vs Variants tool to compare both approaches for your specific catalog. It shows the trade-offs based on your product count and option structure.

What a combined listings app actually does

A combined listings app takes separate Shopify products and groups them into a “product group.” On the storefront, it renders swatches that let customers switch between grouped products without leaving the page (or by navigating to the linked product’s URL, depending on the setup).

Rubik Combined Listings handles both collection pages and product pages. On collection pages, each product card shows swatches for all colors in the group. Click a swatch and the card updates to show that product’s image, price, and title. On product pages, swatches appear that link to the other products in the group.

The data is stored in Shopify metaobjects with real-time sync. No background sync jobs that go stale. No external API calls on page load. Metafield-based rendering, same as the variant images app. It loads with the page.

Four swatch types are available: visual (image), button, pill, and dropdown. You can style them independently for four display contexts: product page desktop, product page mobile, product card desktop, product card mobile. That level of control matters because what looks good in a collection grid at 200px wide rarely looks good on a full-width product page.

Step-by-step setup

Here is the process from zero to working swatches. Assumes you already have separate products created in Shopify.

1. Install the app. Install Rubik Combined Listings from the Shopify App Store. The free plan supports 5 product groups, which is enough to test the full workflow before committing.

2. Create a product group. In the app, click “Create Group.” Name it (this is for your reference, customers don’t see the group name). Set the option name to “Color” (or whatever your differentiator is).

3. Add products to the group. Use the resource picker to select the products that belong together. For our Luna Dress example, you’d pick all 6 color variants.

4. Set option values. Each product in the group needs an option value (like “Sage”, “Rust”, “Navy”). You can type these manually, or use the AI Magic Fill feature. AI Magic Fill analyzes each product’s image and title, detects naming patterns across the group, and fills in the option value plus swatch color automatically. It even picks up secondary colors for split-color swatches.

Rubik Combined Listings AI Magic Fill detecting swatch colors and option values for grouped products

5. Configure visual settings. Choose your swatch type, shape, size, and placement. The app has 19 built-in style presets (11 for product page, 8 for product card) that give you a solid starting point. Tweak from there using the visual editor or custom CSS. Preview your changes in real-time before publishing.

6. Save and check. Visit your collection page and product page. Swatches should be visible. Click through each color to confirm the card or page updates correctly. Done.

For stores with hundreds of products, manual group creation isn’t practical. That’s where bulk grouping comes in. It can auto-detect groups by title pattern, product tags, or metafield values. If your products follow a naming convention like “Product Name, Color,” the title-pattern method creates all your groups in one pass.

Collection page swatches

This is the part that matters most for browse-and-discover behavior. When customers browse a collection, they see a grid of product cards. Without combined listings, every color of every product shows as a separate card. With swatches, each product shows once with color swatches below the image.

The difference is dramatic. That 240-card grid becomes a 40-card grid with swatches. Customers can see your full range without endless scrolling. They click a swatch, the card image updates, and they know exactly what they’re getting before they even visit the product page.

Why does Shopify default this to OFF? There is no native way to show variant swatches on collection cards for separate products. Themes can show swatches for variants within a single product, but separate products are… separate. They have no connection in Shopify’s data model without an app or Plus plan. It makes no sense for the most common catalog pattern in fashion ecommerce. But here we are.

For a complete walkthrough of collection page swatch setup, read the collection page swatches guide. It covers layout options, responsive design considerations, and performance implications.

“I was struggling with separate product pages for different colors/flavors (e.g., aftershave red, green, blue as individual products for better SEO and unique URLs), but I wanted customers to see swatches and switch between them easily, like real variants […] This app does it perfectly: Group products into combined listings, Add customizable color/image swatches, Swatches appear on product pages (click redirects smoothly to the other product’s page) […] Setup was straightforward, no coding needed, and the support is insane.”

Ostwint, 2026-03-02, Rubik Combined Listings on the Shopify App Store

Product page swatches for grouped products

On the product page, swatches for grouped products work differently than regular variant swatches. Instead of switching between variants on the same product, they navigate to a different product URL. Each color is a real Shopify product with its own images, description, and price.

This means the page can have both: grouped product swatches (for Color, switching between separate products) and regular variant swatches (for Size, switching between variants within the current product). The two work together. Customer selects Red from the group swatch, lands on the Red product page, then picks Size M from the variant selector.

If you also want the product page to filter the image gallery per variant (showing only Red + Size M images), pair Combined Listings with Rubik Variant Images. Combined Listings handles the cross-product linking. Variant Images handles per-variant gallery filtering within each product. They complement each other.

Styling your swatches

The app uses Shadow DOM rendering, which means its CSS is completely isolated from your theme. That’s good (no conflicts), but it also means your theme’s global styles won’t automatically apply to the swatches. You style them through the app’s visual editor or its 100+ CSS variables.

Quick design tips that I’ve seen work well across dozens of stores:

Keep swatch size proportional to your product card. Swatches that are too large steal attention from the product image. Too small and they’re hard to tap on mobile. Something around 20-28px works for most collection grids.

Use image swatches when color names don’t tell the full story. “Sage” could be anything from light mint to dark forest green depending on who you ask. A tiny swatch image of the actual fabric removes all ambiguity.

Don’t show more than 6-8 swatches per card. If a group has 15 colors, the app supports overflow handling (carousel, “+7 more” indicator, etc.). A product card buried under 15 tiny swatch circles looks cluttered and converts worse than showing 6 with a “see all” option.

For deeper swatch design guidance, our swatches complete guide covers everything from shape selection to accessibility considerations. If you want to test how swatches will look before building them, use the Collection Swatch Simulator to preview layouts.

SEO benefits of this approach

The separate-products-with-combined-listings approach is the best catalog structure for SEO. Full stop. And I’ll defend that take against anyone who says “just use variants.”

Each color gets its own URL. Google indexes “luna-dress-sage-green” separately from “luna-dress-rust-orange.” Each page can target color-specific long-tail keywords. Each page has its own canonical URL, its own meta description, its own image set with alt text targeting that specific color.

With variants, all of that is crammed into one URL with anchor parameters (?variant=123456789) that Google mostly ignores. You’re putting all your eggs in one URL basket and hoping it ranks for every color term. It won’t.

The combined listings app ties these separate pages together for user experience. Swatches create the browsing continuity. Google still sees and indexes each page independently. Win-win.

For a detailed comparison of both approaches with SEO data, read the variant images complete guide or check out separate products vs variants for SEO on rubikify.com.

Want to see it running before you install anything? There is a live demo store with grouped products and collection swatches already set up, a tutorial video covering the AI features, and the getting started guide in the docs.

FAQ

Which app should I use to show color swatches for separate products?

Rubik Combined Listings is the app we build for this, so treat that as disclosed rather than neutral. It groups separate products into one listing and renders swatches on collection cards and product pages, runs on any plan including Basic, and the free tier covers 5 groups. 5.0 stars across 65 reviews. Where competitors beat us: GLO Color Swatch & Bundles (5.0, 1,665 reviews) and G: Combined Listings & Variant by Grouptify (5.0, 370 reviews) both have far longer track records than our 65 reviews, and if install history is what you weigh most, check them. What that track record costs them is pricing structure. GLO puts combined listings behind its $19.90 Gold plan, and Grouptify stacks Shopify-plan surcharges on top of its base price. Ours is flat: $0, $10, $30, $50, no surcharges.

Do I need Shopify Plus to show swatches for separate products?

No. Shopify’s native Combined Listings feature requires Plus ($2,300+/year). Third-party apps like Rubik Combined Listings work on any Shopify plan, including Basic. The free plan supports 5 product groups.

Can I use combined listings and variant images together?

Yes. Combined Listings handles cross-product linking and collection page swatches. Variant Images handles per-variant gallery filtering on the product page. They work on different scopes and complement each other.

How does bulk grouping work for large catalogs?

Rubik Combined Listings supports three bulk detection methods: title pattern (splits on separator like dash or pipe), product tags (using a structured tag format), and metafield values. Title pattern is the most common and works well if your product names follow a “Product Name, Color” convention.

Will this slow down my collection pages?

Rubik Combined Listings uses metafield-based rendering with no external API calls. The swatch data loads with the page. Shadow DOM isolates the rendering. The performance cost is minimal compared to apps that make an API call per product card.

Can I show swatches on collection pages for regular variants (not separate products)?

Some themes show basic variant swatches on collection cards natively. For separate products linked together, you need a combined listings app. Rubik Combined Listings handles both the linking and the swatch rendering for grouped products specifically.

Want to try it on your store? The free plan groups your first 5 products, which is enough to see swatches on a real collection page before you decide anything.

Try Rubik Combined Listings free →

Co-Founder at Craftshift

You may also like