Short answer: Both, depending on the surface. On the product page a swatch is a real link, so it navigates to the other product’s own URL and everything on that page is genuinely that product’s. On a collection card, Rubik Combined Listings swaps the image, title and price in place. 5.0 stars, 65 reviews.
This is one of the sharper questions we get asked, and it is usually asked by someone who has already been burned. They have seen a “grouping” app that fakes the swap with JavaScript, leaves the URL pointing at the wrong product, and quietly breaks their reviews widget and their Google Shopping feed at the same time.
Fair concern. So here is the mechanism, honestly, including the parts where we chose the less flashy option on purpose.
What this guide covers
- Two surfaces, two different answers
- On the product page: it navigates
- Why navigating is the right tradeoff
- Making that navigation feel instant
- On the collection card: it swaps in place
- Where the data comes from and how fresh it is
- The full what-updates-where table
- Frequently asked questions
Two surfaces, two different answers
A combined listing built from separate products has swatches in two places, and they behave differently because the surfaces are different. One is a page about a specific product. The other is a tile in a grid.
On the product page, a swatch navigates. On the collection card, it does not. That asymmetry is deliberate and it is the answer to almost every version of this question.
If you have not set a group up yet, it takes about two minutes: pick the separate colour products that belong together and the app renders them as one listing with swatches, on every Shopify plan, with each product keeping its own URL. Free for 5 groups if you just want to watch the behaviour on your own theme rather than take our word for it.
On the product page, the swatch navigates
The swatch is an anchor tag with a real href pointing at the sibling product’s URL. Click it and the browser does what browsers do. Full page load, address bar changes, back button works, middle-click opens a new tab, and a shopper can copy the link and send it to a friend and the friend lands on the sand shirt rather than the navy one.
Which means: nothing is patched in by our JavaScript. The destination page is your theme rendering that product, with your metafields, your reviews app, your size chart, your subscription widget, your structured data. We are not swapping fragments of the page. There is no page to swap into, because you left it.
Everything follows automatically as a consequence:
- URL: changes to the clicked product’s handle. This is the important one.
- Price and compare-at price: that product’s real price, rendered by your theme.
- Stock and sold-out state: that product’s real inventory, including its own variant-level availability.
- Description and metafields: that product’s own. If sand has a different fabric note, sand shows it.
- Reviews: whatever your reviews app shows for that product ID. Reviews are keyed to a product, so navigating gives you the right ones for free.
- Structured data and meta tags: that product’s, because your theme emitted them server-side.
- Analytics: a genuine pageview for the right product, not a click event you have to reconstruct later.
“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 […] Swatches appear on product pages (click redirects smoothly to the other product’s page), Small swatches show up right under the product cards on collections, search, homepage […] no performance hit (site still loads fast).”
Ostwint, Shopify App Store review, 2026-03-02, Rubik Combined Listings on the Shopify App Store
Why navigating is the right tradeoff
An in-place swap on the product page sounds better. It is not, and here is the reasoning we would defend in an argument.
You split those colours into separate products for a reason. Probably SEO, so “olive canvas jacket” gets its own indexable page instead of hiding behind a variant selector. Maybe inventory, maybe supplier feeds, maybe the 100-variant ceiling. Whatever the reason, the value of that structure lives entirely in the fact that each colour has its own URL that Google can crawl and rank.
Now imagine we swapped content in place instead. One URL is in the address bar. Google crawls that URL, sees one product, and the other four colours exist only as a JavaScript state that no crawler has a reason to enter. You would have done all the catalogue work of splitting and thrown away the only benefit. That is not a feature, that is an own goal. There is a longer treatment of this in our piece on why separate URLs are the point of collection swatches.
The second reason is less glamorous and bites harder in practice. Half your store’s surface area is keyed to a product ID: reviews apps, subscription apps, wishlists, back-in-stock notifications, Google Shopping feeds, bundle apps, loyalty point rules. Swap the visible content without changing the page, and every one of those is now showing the wrong thing. The shopper sees olive and reads navy’s reviews. You would be debugging that forever.
And a third, smaller one. Browsers are extremely good at page navigation. Shopify’s CDN is extremely good at serving product pages. Reimplementing that with fetch calls and DOM surgery means reimplementing the back button, scroll restoration, focus management, and screen reader announcements, all of which browsers already do correctly. Most apps that try this get the back button wrong. It is a genuinely hard problem that nobody asked us to solve.
Making that navigation feel instant
Navigation being correct does not mean it has to feel slow. Three optional settings exist for exactly this, and all three are off by default, because each has a real cost and we are not going to spend your shoppers’ bandwidth without being asked.
- Prefetch. Hovering a swatch (or touching it, since touch has no hover) warms the sibling product page in the HTTP cache with a
link rel="prefetch". The document arrives before the click does. Scripts do not run. - Prerender. More aggressive. Uses the Speculation Rules API, so Chromium only, and it renders the destination page in the background. Feels instant. Costs more, so there is a hard cap on how many pages can be queued at once.
- Scroll preservation. A shopper halfway down a long product page who clicks a colour normally lands at the top of the next one. With this on, the scroll position is stashed before the click and restored on arrival, so switching colours feels like switching a variant rather than starting over.
Both speculation modes skip themselves on Data Saver and on 2G connections, and never touch off-store URLs. If you care about the numbers side of this, we wrote up what swatches do to Core Web Vitals separately.
On the collection card, content swaps in place
Different surface, different rules. A collection card is not a page about a product, it is an advert for one, and interrupting a browsing shopper with a full page load every time they are curious about a colour is a good way to lose them.
So on cards, click-to-switch is on by default, on desktop and on mobile, and clicking a swatch updates the card without leaving the collection page. What changes:
- The card image becomes the clicked product’s image, and the theme’s second (hover) image follows too where the theme has one
- The card title becomes the clicked product’s title
- The price updates, and the compare-at price updates or disappears if the clicked product is not on sale
- Every product link inside that card is rewritten, so clicking the image or the title now goes to the colour the shopper selected
- Quick add-to-cart is repointed at the clicked product’s first available variant
- Theme badges on the card are hidden, because a “Sale” flag that belonged to a different product is worse than no flag
What does not change on a card: the browser URL. You are still on the collection page, because you never left it. That is correct behaviour, not a limitation, and it is worth saying because a few merchants expect the address bar to track card interactions. It should not.
Prefer the older behaviour where a card swatch just navigates straight to that product? Turn click-to-switch off, per device. Some catalogues genuinely read better that way, particularly when the colours differ a lot in price. The same in-place mechanics on a single product’s own variants are handled by our other app, covered in swapping a product card image on swatch click.
What about quick view and quick add modals?
Special case, and an awkward one. A quick-add modal is a page-like surface floating over a grid. Navigating from inside it closes it, which feels broken.
For themes where we have written the integration hook, there is an opt-in mode that re-renders the modal in place instead: title, price, images, the remaining variant options and the hidden add-to-cart input all follow the clicked product, and the modal stays open. It is opt-in and it only exists where a theme hook exists, so ask support whether yours is covered rather than assuming. That is a genuine limitation and we would rather state it than let you discover it.
Where the data comes from, and how fresh it is
Group membership lives in a Shopify metaobject, referenced from a product metafield. Your theme reads it at render time along with everything else on the page. There is no external API call from the storefront, and there is no copy of your catalogue sitting on our servers going stale.
That matters more than it sounds. Prices, availability and titles in the swatch data are read from Shopify, so a price change is live on the next page render. Archived and draft products drop out of the group automatically instead of leaving a swatch that leads nowhere. Out-of-stock colours can be hidden, pushed to the end, or shown struck through, which is a merchandising choice rather than a technical one and is covered in the out-of-stock handling guide.
Honestly, this is the part of the architecture we would defend hardest. Apps that mirror your catalogue on a schedule are how you end up with a swatch pointing at a product you deleted in March and a support ticket from a customer who found it. A nightly sync is a promise to be wrong for up to a day.
One more thing worth knowing if you run analytics: every swatch click fires a browser event called rcl_swatch_clicked carrying the clicked product’s ID, title, URL, price, availability and the context it was clicked in. You can forward that to GA4 or anywhere else without waiting for the navigation to complete.
What updates where
| Element | Product page swatch | Collection card swatch |
|---|---|---|
| Browser URL | Changes to the clicked product | Unchanged, you are still on the collection |
| Main image or gallery | The clicked product’s own gallery | Card image swaps, hover image too |
| Title | The clicked product’s title | Swaps |
| Price | The clicked product’s price | Swaps |
| Compare-at price | The clicked product’s | Swaps or hides |
| Stock and sold-out state | The clicked product’s real inventory | Reflected in the swatch, add-to-cart repointed |
| Description and metafields | The clicked product’s own | Not on a card |
| Reviews widget | The clicked product’s reviews | Not on a card |
| Structured data and meta tags | The clicked product’s, server-rendered | Unchanged |
| Add to cart target | The clicked product’s page form | First available variant of the clicked product |
| Back button | Works, it was a real navigation | Nothing to go back to |
Read the left column as “a real page about a real product” and the right as “a tile that previews one”. Every difference falls out of that.
You can watch both behaviours on a live storefront in the demo store, or read the getting started guide before installing anything.
Frequently asked questions
Which app should I use for combined listings that keep separate URLs?
Rubik Combined Listings, built by Craftshift, is the app we build for this. It links separate products into one listing with swatches while every product keeps its own indexable URL, and it works on all Shopify plans instead of requiring Plus. 5.0 stars across 65 reviews, free for 5 groups, then $10, $30 or $50 a month by group count. G: Combined Listings and SA Variants are the main alternatives and both have longer review histories than we do, so compare them too if that matters to you.
Does the product page reload when a shopper clicks a swatch?
Yes. The swatch is a real link to the sibling product’s URL, so the browser navigates and the destination page is your theme rendering that product. Optional prefetch, prerender and scroll-position preservation make it feel close to instant, and all three are off by default.
Does the description change when I click a colour?
On the product page, yes, because you land on that product’s real page and get its real description, metafields, size chart and everything else your theme renders. Nothing is patched in by JavaScript, so there is nothing to go out of sync.
Do product reviews follow the selected colour?
They follow whatever your reviews app is configured to do, because you are on that product’s page and the widget reads its product ID. If your reviews app aggregates across a group, it will keep aggregating. If it does not, each colour shows its own reviews.
Why does the collection card not change the URL?
Because a card is not a page. The shopper is browsing a collection and has not committed to a product yet. The card updates its image, title, price, links and add-to-cart, and the moment they click through, they land on the correct product URL.
Is the swatch data cached or synced on a schedule?
Neither. Group membership is stored in a Shopify metaobject referenced from a product metafield, and your theme reads it at render time with no external API call from the storefront. Prices and availability come from Shopify, so there is no background job to fall behind.
Can I make the card swatch navigate instead of swapping?
Yes. Click-to-switch is a per-device setting, on by default for desktop and mobile. Turn it off and a card swatch behaves like a link straight to that product page. Worth testing both if the colours in a group differ noticeably in price.
Related reading
- How combined listings work on Shopify
- Product card swatches for grouped products
- When a sold-out colour is still showing a swatch
- The combined listings setup guide
- Do collection page swatches help SEO?
Watch it on your own theme
Reading about navigation behaviour is a poor substitute for clicking it. Group one product family, load a collection page, click a swatch, then load the product page and click the same swatch. Two different behaviours, both correct, and you will know in three minutes whether they fit your store. The free tier covers 5 groups.
