You sell a product in multiple colors. Each color has its own product page with its own photos, its own description, and its own URL. The pages work great individually. But there is no connection between them.

You want something simple: a variant selector on each product page that shows the available colors. When a customer clicks a different color, they get redirected to that color’s product page. The same behavior as Shopify’s built-in variant picker, except each option lives on a separate product page instead of being a variant on the same product.

This question comes up constantly in the Shopify community. Merchants phrase it in different ways: “How do I redirect the variant selector to another product page?” “Can I make the color picker link to a different URL?” “How do I connect separate product pages with a variant switcher?” The underlying need is always the same. Let customers switch between related products as easily as they switch between variants.

Shopify’s native variant selector cannot do this. It only works within a single product listing. But there is a clean, no-code way to get exactly this behavior.

Why the built-in variant selector cannot redirect to another product

Shopify’s variant selector is tied to one product. When you add a Color option with Red, Blue, and Green variants, the selector switches between those variants on the same page. The URL changes slightly (a ?variant= parameter gets appended), but the customer stays on the same product page. The same gallery, the same description, the same add-to-cart button.

There is no setting in Shopify to make a variant option redirect to a completely different product URL. The variant system was not designed for that. Variants are sub-options of a single product, not links between separate products.

Some merchants try workarounds. They add a “dummy” variant for each color to a single product and use custom Liquid code or JavaScript to redirect when the variant changes. This sort of works, but it creates real problems:

Inventory confusion. The dummy variants have their own stock levels, prices, and SKUs that do not correspond to real products. Orders placed before the redirect fires go to the wrong variant.
SEO damage. Google indexes the combined product with all its dummy variants. Your carefully optimized individual product pages now compete with a frankenstein listing that has no real content.
Cart issues. If the redirect JavaScript fails to fire (slow connection, ad blocker, mobile browser quirks), customers can add the dummy variant to their cart and check out with a product that does not actually exist.
Maintenance overhead. Every time you add or remove a color, you need to update the dummy variants on the redirect product AND update the redirect code. It scales poorly.

The better approach is to skip the variant system entirely and use a purpose-built selector that links separate products together.

What the solution looks like for your customers

Instead of hacking Shopify’s variant selector, you add a dedicated swatch row to each product page. It sits in the same spot where a variant selector would normally appear. Each swatch represents one of your separate products. The current product is highlighted. Click a different swatch, and the customer goes to that product’s page.

From the customer’s perspective, the experience is identical to using a variant selector. They see their color options, they pick one, they see the product. The only difference is what happens behind the scenes: instead of loading a different variant on the same page, the browser navigates to a different product page with its own URL, photos, and description.

This actually gives your customers a better experience than a traditional variant selector. Each product page has a focused gallery showing only the relevant photos. No scrolling past images of colors they did not pick. The description can speak specifically to that color or material. And the URL is clean and bookmarkable.

The swatches also appear on collection pages. Product cards show small color indicators, so customers can see at a glance which products come in multiple options. Hover over a swatch on a product card and the card image updates to preview that option.

How to set it up (no code required)

Rubik Combined Listings adds this variant-style selector between separate products. Setup takes a few minutes per product group.

1. Create a product group. Pick an option name like “Color”, “Material”, or “Style”. This is the label that appears above the swatches on your storefront, just like the label above a normal variant selector.

2. Add the products you want to connect. If your jacket comes in black, brown, and navy, and each color is its own Shopify product, add all three.

3. Choose a swatch type. You have four options depending on what works best for your products:

Color swatches: solid color circles (or two-tone splits for multi-color products). Best when the difference between products is a single solid color.
Image swatches: small product photos or texture thumbnails as the selector. Best for patterns, prints, fabrics, and finishes where a flat color circle cannot represent the option.
Button swatches: text labels with optional images. Best for non-visual differences like material names, scents, or pack sizes.
Dropdown menu: a select-style picker for groups with many options where individual swatches would take up too much space.

4. Set the option values. Give each product a label (“Black”, “Brown”, “Navy”) and optionally a swatch color or image. If you want to skip this step, Magic Fill uses AI to analyze your product titles and images and generates the labels and colors automatically.

5. Save. The swatch selector appears on your storefront immediately. Every product in the group now has a clickable selector linking to all the other products. No theme editing, no code, no publishing step.

The app uses Shopify metaobjects with direct product references to store the group data. Prices, stock levels, and images stay in sync automatically. If you archive a product or set it to draft, it disappears from the selector without any manual cleanup.

Why this is better than a redirect hack

The dummy-variant-with-JavaScript-redirect approach tries to force Shopify’s variant system to do something it was not built for. Rubik Combined Listings takes the opposite approach: it leaves the variant system alone and adds a separate, purpose-built selector that links products together.

Here is what that means in practice:

No phantom variants in your catalog. There are no dummy variants to create, no fake inventory to manage, and no risk of customers ordering a variant that does not exist. Each product stays exactly as it is.

No JavaScript redirect that can fail. The swatches are simple links. Click a swatch, go to that product’s URL. There is no JavaScript intercepting variant changes or racing against add-to-cart clicks. It just works.

No SEO compromise. Each product page keeps its own URL, its own title, its own meta description, and its own structured data. Google indexes each page independently. You keep all the SEO benefits of having separate products.

No maintenance when products change. Add a new color? Add it to the group and the selector updates everywhere. Remove a color? Remove it from the group. Archive a product? It disappears automatically. No code to update, no redirect rules to maintain.

What about SEO and AI-powered shopping?

One of the main reasons merchants keep products separate is SEO. A “Black Leather Jacket” page and a “Brown Leather Jacket” page can each rank for their own search terms. Merging them into one product with variants means one URL competing for both keywords.

Linking separate products with swatches preserves this advantage completely. The swatch selector adds navigation between the pages, but it does not merge them. Each product page stays independent in Google’s index with its own authority.

This also matters for AI-powered shopping, which is becoming a significant source of product discovery. When a shopper asks ChatGPT, Google AI, or Perplexity to “recommend a brown leather jacket under $300,” the AI scans product pages for matches. A dedicated “Brown Leather Jacket” page with brown-focused photos and a brown-specific description is a much stronger match than a generic “Leather Jacket” page where brown is one option in a variant dropdown.

Separate products give AI systems more entry points to discover and recommend your products. The swatch selector gives customers a way to navigate between them once they land on one. You get the best of both without sacrificing either.

Works with every theme and Shopify plan

The swatch selector works on all Shopify plans and all themes. Dawn, Prestige, Impulse, Impact, Focal, Palo Alto, Symmetry, Stiletto, Broadcast, and hundreds of others. The app detects your theme and positions the swatches correctly for that theme’s layout.

Shopify does have a native Combined Listings feature, but it requires Shopify Plus ($2,300+/month) and it merges your products under a single parent listing. That defeats the purpose if you want to keep separate product pages for SEO and clean galleries. Rubik Combined Listings works on any plan, starting with a free tier, and keeps every product fully independent.

The visual settings editor gives you full control over how the selector looks. Swatch size, shape, border, spacing, active state styling, hover effects, fonts, and colors are all configurable. Desktop and mobile layouts can be styled independently. If you prefer not to tweak settings manually, style presets give you a polished look in one click. And the AI visual assistant lets you describe what you want in plain language and applies the changes for you.

Common scenarios where this is the right approach

Fashion and apparel. Each color has dedicated lifestyle photography. The black dress has studio-lit photos against a dark backdrop. The white dress has outdoor beach photos. Separate pages let each color tell its own visual story. Swatches let customers flip between them.

Print-on-demand. Printify, Printful, Gooten, and other POD providers create a separate Shopify product for each colorway. You cannot control this. The products arrive in your store as unrelated listings. Swatches group them together so customers can browse all colors from any product page.

Home goods and furniture. A sofa available in 8 fabrics. Each fabric has a different price, lead time, and care instructions. Separate product pages let you communicate these differences clearly. Image swatches show fabric textures so customers can compare at a glance.

Skincare and cosmetics. A foundation in 12 shades. Each shade targets a different skin tone and has shade-specific descriptions and usage tips. Separate pages provide targeted content. Color swatches let customers find their shade quickly.

Electronics and accessories. A phone case for different device models, or a charger in different wattages. Button swatches with text labels let customers pick their model or spec without confusion.

For stores with dozens or hundreds of product groups

If you have 5 products to connect, manual setup takes a few minutes. If you have 500, the bulk grouping feature handles it. It scans your catalog and detects products that should be grouped based on shared title patterns, tags, or metafields. You review the suggested groups, confirm, and the app creates all the swatch connections at once.

This is especially useful for stores that receive new products regularly (like POD stores syncing from a supplier). Set up the detection rules once, and new products that match the pattern get grouped automatically.

See it in action

Demo store: combinedlistings.rubikdemo.com. Click through products, switch between colors using the swatches, and test it on mobile. This is exactly the behavior that replaces the “variant selector redirect” approach.

Video tutorial: Watch the setup walkthrough on YouTube

Install: Rubik Combined Listings on the Shopify App Store (free plan available, 5 product groups)

FAQ: Frequently asked questions