The Complete Shopify Color Experience: Swatches on Collections, Product Pages, and Filtered Galleries

February 27, 2026

Most Shopify stores handle color one of two ways. Either all colors are variants inside one product (simple but limiting) or each color is a separate product (flexible but disconnected). Neither gives customers the smooth experience they expect from shopping at Zara, Nike, or any major retailer.

Here’s what that ideal experience looks like: you browse a collection and see every color as its own card with swatch dots showing available options. You hover a swatch, the card previews that color. You click through to a product page where a swatch row lets you switch between all colors without going back. You pick a size, and the image gallery filters to show only photos for that size. Every step shows exactly the right content at the right time.

This post explains how to build that full flow on Shopify using two apps that handle different layers of the same experience.

The Three Layers of a Color-First Shopping Experience

Layer 1: Collection Page – See Every Color While Browsing

The default Shopify collection grid shows one card per product. If your jacket comes in 8 colors and those are variants, the grid shows one jacket card. The other 7 are invisible.

Making each color a separate Shopify product fixes the grid – 8 cards, 8 thumbnails, 8 chances to catch someone’s eye. But separate products need a visual connection.

Rubik Combined Listings adds swatch indicators under each collection card. Four color dots below the navy jacket thumbnail. Hover over cream, the thumbnail swaps. Click it, go to the cream jacket’s page. The customer can preview every color without leaving the collection grid.

The swatch indicators work across all Shopify themes. Swatch size, shape, spacing, and overflow are configurable separately for desktop and mobile. For groups with many colors, a “+5 more” indicator keeps the card layout clean.

Layer 2: Product Page – Switch Colors Like Native Variants

Once a customer clicks into a product, they need a way to switch colors that feels like a regular Shopify variant selector.

Combined Listings places a swatch row above the Add to Cart button – the exact spot where Shopify would put its own variant picker. Color circles, image thumbnails, text buttons, or a dropdown menu. Click Navy, see the navy product’s photos, price, and stock. Click Cream, land on the cream product’s page. Same layout, same interaction pattern as native variants.

Customers don’t know these are separate products. They pick a color and the page updates. That’s all they see.

For products defined by material rather than color, image swatches show actual fabric or texture photos instead of flat color circles. For phone cases or size options, button swatches display text labels. Each product group independently controls which swatch type it uses.

Layer 3: Gallery Filtering – Show Only the Right Photos

This is the layer most stores miss entirely.

A customer picked the navy jacket. They’re on the navy jacket product page. Now they select size Medium from the variant dropdown. The image gallery still shows every photo – small, medium, large, XL flat lays, lifestyle shots, detail close-ups for every size. The medium-specific fit photo is somewhere around slide 9.

Shopify doesn’t filter product images by variant. It shows every image assigned to a product regardless of which variant is selected.

Rubik Variant Images fixes this. You assign specific images to each variant. When a customer selects Medium, the gallery shows only medium photos – the medium fit photo, the medium measurement overlay, the medium lifestyle shot. Everything else is hidden. 5.0 stars, 323+ reviews on the App Store.

The Full Customer Journey

When all three layers work together:

Step 1. Customer browses the “Jackets” collection. They see 8 cards – each color with its own photo and title. Small swatch dots below each card show all 8 colors. They hover over cream and the card image swaps to preview.

Step 2. They click the cream jacket card. The product page loads with cream photos, cream pricing, cream description. A swatch row above Add to Cart shows all 8 colors with cream highlighted.

Step 3. They could switch to navy by clicking the navy swatch. The page updates to navy – different photos, possibly different price. But they stick with cream.

Step 4. They pick size Medium from the variant selector. The image gallery instantly filters: 4 photos instead of 12. Just the medium fit photo, the medium measurement diagram, and two medium lifestyle shots. No scrolling through irrelevant sizes.

Step 5. They add to cart. Done.

Every step gave them exactly the information they needed. No hunting through galleries, no going back to the collection page, no guessing which photos match which size.

Which App Handles What

The two apps handle fundamentally different things, and understanding the split matters for setup.

Rubik Combined Listings handles everything between separate products. It creates the swatch row connecting your navy, cream, and black jacket products. It renders swatches on product pages and collection cards. Click a swatch, jump to a different product. This is inter-product navigation.

Rubik Variant Images handles everything within a single product. It maps images to specific variants (like sizes) and filters the gallery when a variant is selected. This is intra-product gallery management.

They’re built by the same team. No JavaScript conflicts, no CSS collisions, no duplicate renders. The combined listings swatches handle the color axis. The variant images handle the size (or any other variant) axis. They stack cleanly.

Category-by-Category Breakdown

Fashion. The most common setup. Split by color, keep sizes as variants within each color product. Combined Listings shows the color swatches. Variant Images filters the gallery by size to show fit-specific photos. Customer picks Cream, picks Medium, sees only cream medium photos.

Furniture. Split by fabric or upholstery material. Image swatches showing actual textures. Within each fabric product, variants could be size or configuration. Gallery filtering shows only the selected configuration’s room photos.

Jewelry. Split by metal (gold, silver, rose gold). Different pricing and different photography per metal. Within each metal product, ring size variants can have size-specific photos showing the piece on different finger sizes.

Cosmetics and beauty. Split by shade. Color swatches matching actual product colors. Within each shade product, variants for volume (travel size, regular, value pack) can have packaging-specific photos.

Electronics accessories. Split by design or pattern. Image swatches showing each design. Within each design, device model variants (iPhone 15, 16, Samsung S24) can show device-specific mockup photos.

SEO: Why This Setup Outperforms Variants

When each color is a separate product, Google gets:

Individual URLs with color-specific keywords in the slug. /products/cream-linen-jacket ranks for “cream linen jacket” while /products/navy-linen-jacket ranks for “navy linen jacket.” With variants, both searches lead to /products/linen-jacket with a ?variant= parameter Google mostly ignores.

Color-matched Google Shopping entries. Each product has its own feed entry with the right title and the right thumbnail. “Cream Linen Jacket” with a cream photo converts better in Shopping results than a generic “Linen Jacket” that might show the wrong color.

Swatch links = internal links. Every swatch pointing from one product to another is an anchor-tagged internal link. Backlinks to any product distribute authority to all its siblings.

SEO deep dive: Combined Listings and SEO

No Shopify Plus Required

Shopify’s native Combined Listings feature requires Plus at $2,300+/month. Both Rubik apps work on any plan including Basic ($39/month). Rubik Combined Listings also offers features the native tool doesn’t: collection page swatches, image/button/dropdown swatch types, Magic Fill AI, two-tone colors, carousel layouts, and separate desktop/mobile styling.

Native vs third-party comparison: Combined Listings App Comparison

Variant limit workaround: Shopify’s Variant Limit and How to Get Around It