Faster swatch navigation Rubik Combined Listings Swatch

← Back to documentation

Overview

With combined listings, each option value (a color, size, material, style, and so on) is its own Shopify product, so every swatch on the product page is a link to a separate product. Clicking a swatch is a normal page navigation, which means there is a short load between products.

To make that navigation feel faster, the app can ask the browser to load the linked product page before the shopper clicks, while they hover with the mouse (desktop) or touch the swatch (mobile). There are two options, both off by default, in Settings → Product page settings.

The two options at a glance

Option	What it does	Feel	Main trade-offs
Prefetch	Downloads the linked product page's HTML in the background.	Faster	Extra background requests; can raise server-side view counts. Does not run the linked page's scripts.
Prerender	Fully builds the linked product page in the background.	Near-instant	Runs the linked page's scripts (analytics & ad pixels) before the visit; uses more bandwidth and memory; Chrome only.

Prefetch

When a shopper hovers or taps a swatch, the browser quietly downloads the linked product page's HTML and keeps it in cache. When they click, the page is already in cache, so the navigation is faster.

Prefetch only fetches the HTML document. It does not execute the linked page's JavaScript, which means client-side analytics and marketing pixels (Shopify's pixel, Google Analytics, Meta, etc.) do not fire from a prefetch. The main considerations are:

• Extra requests. Hovering several swatches issues a background request for each one, even for products the shopper never opens.
• Server-side view counts. The prefetch is a real request to your store, so anything that counts views on the server (for example "X people are viewing this" widgets or some recommendation apps) may count it. Browsers send a Sec-Purpose: prefetch header that well-behaved tools can use to exclude these.
• Mobile data. On phones the trigger is a touch right before the tap, so waste is minimal.

Prerender

Prerender goes further: the browser fully renders the linked product page in a hidden tab, running its scripts, so that clicking the swatch activates an already-rendered page almost instantly.

This is the most aggressive option. Because it runs the linked page's scripts before the shopper actually visits:

• Analytics and ad pixels fire for pages that are only hovered, which can inflate product views and conversion tracking unless your pages handle the prerender state (the document.prerendering flag).
• It uses more bandwidth and memory, and the browser limits how many pages can be prerendered at once.
• It is supported in Chrome and Chromium-based browsers only; other browsers simply navigate normally.

Leave prerender off unless you understand these trade-offs and have confirmed your analytics handle prerendered pages correctly.

How to enable

• Open the app and go to Settings → Product page settings.
• Turn on Prefetch linked product on hover for a safe speed boost. To go further, also turn on Prerender linked product on hover for near-instant navigation, and keep Prefetch on as well (see "Which should I use?" below).
• Save. Both options are off by default, so nothing changes until you enable them.

Which should I use?

The two options do not stack on a single visitor. When both are on, the browser prerenders where it can (Chrome and other Chromium browsers) and falls back to prefetch everywhere else, so there is no duplicate work.

• Most stores: Prefetch only. It is the safe choice: faster navigation without running the linked page's scripts, so your analytics and ad pixels are unaffected.
• Want the fastest possible feel? Enable both, not Prerender on its own. Chromium visitors then get prerender (near-instant) and everyone else gets prefetch as a fallback. Only do this once you are comfortable with prerender running the linked page's scripts before the visit, and with the analytics and bandwidth impact that comes with it.

Do not enable Prerender on its own. Prerender works only in Chrome and other Chromium browsers, so turning it on without Prefetch leaves visitors on Safari, Firefox and other browsers with no speed-up at all. If you enable Prerender, keep Prefetch on alongside it so those visitors still benefit.

Good to know

• These options affect the product page swatches (the ones that navigate to a separate product). They have no effect where swatches are configured to switch in place.
• The linked products are on your own store (same origin), so prefetch and prerender are allowed and behave reliably.
• The browser still respects Data Saver and very slow connections.

Related guides

• Visual settings: full reference for swatch appearance.
• Swatch click event: track swatch clicks in your analytics.
• FAQ: common questions and troubleshooting.