How to Group Separate Shopify Products and Show Them as Variants With Swatches

You sell a hoodie in 8 colors. You’ve created 8 separate products because your supplier sends each color as its own SKU, or because you want each color to rank independently in Google, or because Shopify’s 3-option limit forced you to split.

Now you have a problem. Those 8 products sit in your catalog with no visual connection. A customer on “Navy Hoodie” has no idea “Burgundy Hoodie” exists two rows down in the collection. And your collection page shows 8 cards that look like 8 unrelated products rather than 8 colors of the same thing.

Combined listings solve this. They take your separate products and connect them with a swatch row that works exactly like a native Shopify variant selector. This post explains why stores end up with separate products, how combined listings bridge the gap, and what the setup actually involves.

Three Reasons Stores End Up With Separate Products

The Variant Limit Forces It

Shopify allows 2,000 variants per product but locks you to 3 option categories. A rug store selling 30 patterns in 5 sizes with 4 pile heights has 600 combinations across 3 options – that fits. Add a border color as a 4th option and Shopify won’t allow it. There’s no workaround within a single product.

The standard fix: split along the most visual axis (usually pattern or color), create each as its own product, and reconnect them with swatches. The variant limit math breakdown explains where the numbers stop working.

SEO Rewards Individual Pages

When all colors are variants under one product, Google sees one URL. “Linen Blazer” competes for every color keyword with a single page. Split each color into its own product and suddenly “navy linen blazer,” “cream linen blazer,” and “black linen blazer” each have a dedicated URL with a matching title tag and meta description.

For stores where customers search by color (fashion, home decor, phone cases, beauty), this can multiply organic traffic. Each product page targets a specific long-tail keyword instead of competing against itself.

The SEO analysis for combined listings covers URL structure, Google Shopping feeds, and internal linking in detail.

Suppliers Create Them That Way

Printify, Printful, and most print-on-demand services generate one Shopify product per colorway. ERP systems and wholesale suppliers often export each variant as its own SKU. If your catalog already has separate products per color, you don’t need to restructure anything – you just need the visual link between them.

The broader tradeoffs between variants and separate products: Separate Products vs Variants on Shopify.

What Combined Listings Look Like to Your Customers

On Product Pages

A swatch row appears in the same position where Shopify’s built-in variant picker would normally sit – right above Add to Cart. Color circles, image thumbnails, text buttons, or a dropdown menu (you choose). Customer clicks a swatch, the page updates with that product’s photos, price, description, and stock status. They have no reason to think they just switched between separate products. The interaction is identical to picking a variant.

On Collection Pages

Every color shows as its own card in the collection grid. Each card gets small swatch indicators underneath its thumbnail. Hover over a swatch and the card image swaps to preview that color instantly. Click it to go directly to that product’s page. A collection of 10 products with 5 colors each displays 50 browseable cards instead of 10 cards with hidden options.

The collection page setup details: How to Display Every Product Color on Shopify Collection Pages

For the specific problem of collections showing one card per product: Shopify Only Shows One Card Per Variant Group – Here’s the Fix

Picking the Right Swatch Type

Not everything needs a color circle. Four options exist, and the right one depends on your product.

Color swatches work for products defined by solid colors: t-shirts, phone cases, accessories. Single-color circles or two-tone splits (vertical, horizontal, diagonal) for dual-color designs. Set hex values manually or sample from product photos with an eyedropper tool.

Image swatches work when a flat color can’t represent the option. Fabrics, wood grains, printed patterns, stone textures. The swatch thumbnail shows the actual material instead of an approximation.

Button swatches work for non-visual options. Device models (iPhone 15 / iPhone 16), pack sizes (50ml / 100ml), material names. Text communicates the difference better than any color or image could.

Dropdown menus work when you have 20+ options and can’t afford the screen space for individual swatches. Compact. Out-of-stock products automatically get “(Sold out)” appended.

The full comparison by product category: How to Display Product Variants as Swatches

Setup Overview

The whole thing takes a few minutes for your first group.

Install Rubik Combined Listings and activate the app embed in your theme customizer. Select your theme type so swatches inject in the right position. Create a product group, add your products, assign swatch styles. For large catalogs, Magic Fill auto-detects colors from product images and generates labels from titles – a store with hundreds of products can set up everything in one sitting instead of manually picking hex codes for each.

Enable collection page swatches separately. Desktop and mobile swatch sizing are independent, so you can use 22px circles on desktop and 36px on mobile for better touch targets. Pick from 20+ presets designed for different layouts.

The step-by-step: How to Group and Link Separate Products on Shopify With Color Swatches

Advanced Features Worth Knowing

Multi-group membership. One product can belong to multiple groups. A jacket grouped by color (color swatches) AND by material (image swatches). Both rows appear on the product page.

Categories within groups. Organize products into sub-sections. A “Summer” group with “Dresses,” “Tops,” and “Shorts” categories, each rendered as its own swatch section.

Out-of-stock styling. Sold-out swatches can hide, move to the end, or show with reduced opacity and a strikethrough line. Archived products auto-hide.

Carousel layout. For groups with 15+ options, swatches scroll horizontally instead of wrapping to multiple rows.

Pairing With Variant Image Filtering

Combined listings handle switching between separate products. But what about variants within each product?

Say each color product also has size variants with size-specific fit photos. A customer picks size M, but the gallery shows all sizes mixed together. Rubik Variant Images assigns images to specific variants and filters the gallery on selection. Combined Listings handles between-product navigation; Variant Images handles within-product gallery filtering. Built by the same team, designed to run together.

The full dual-app flow: Show Every Color on Your Collection Page (And the Right Photos When They Click)

You Don’t Need Shopify Plus

Shopify’s native combined listings feature requires Plus ($2,300+/month). Third-party apps work on any plan starting from Basic ($39/month) with more swatch types, collection page swatches, Magic Fill, and deeper customization.

Feature comparison: Native vs Third-Party Combined Listings Apps

All apps compared: Best Shopify Combined Listings Apps