Seamless Product Switching – Compatibility & Setup Guide

1. What is Seamless Product Switching?

When Seamless Product Switching is enabled, selecting a product option (for example, size, color, or linked variant) will:

Update the product content dynamically
Replace specific sections on the page
Update the browser URL
Avoid a full page reload

This creates a faster and smoother browsing experience similar to a single-page application (SPA).

2. How to Use This Feature

Step 1: Enable Seamless Product Switching

In the app settings, enable:

✅ Enable seamless product switching

By default, only the section that contains product options will be updated.

Step 2: Add Additional Section IDs or Stable Keys (Optional)

Some parts of the product page may also need to be refreshed when the product changes, such as:

Product recommendations
Product details
Reviews
Custom theme sections

You can enter either:

A stable section key (recommended) — use the exact part after __
A full section ID — full IDs remain supported

Recommended stable key example

If the full section ID is:

shopify-section-template--22688037077300__product-recommendations

Enter only the section key after __:

product-recommendations

A duplicated theme or another version of the same theme can have a different Shopify-generated template ID while keeping the same section key, for example:

shopify-section-template--22688037077300__product-recommendations
shopify-section-template--98765432100000__product-recommendations

Both are matched by the stable key product-recommendations.

Why use a stable section key?

Configure the section once for duplicated themes or versions of the same theme
Avoid re-entering the full ID when Shopify's generated template ID changes
Reduce ongoing setup and maintenance

The section key is matched exactly. For example, details does not match details-primary.

Different, unrelated themes can use different keys for sections that serve a similar purpose. For example, one theme might use product-recommendations while another uses related-products. In that case, add both stable keys as separate entries.

You may add multiple section IDs or stable keys, one per entry.

3. How to Get a Section ID or Stable Key

Method 1: Shopify Theme Editor (Recommended)

Go to Online Store → Themes
Click Customize
Navigate to a product page
Click the section you want to update
Look at the URL or browser inspector — the section ID usually starts with:

shopify-section-template--

Method 2: Browser Developer Tools

Open the product page
Right-click the section → Inspect
Locate the outer container element
Find the id attribute, for example:

<div id="shopify-section-template--123456789__details">

👉 Recommended: copy the exact stable section key after __ — in this example, enter details. You can still copy and enter the full ID when you want to target that exact section ID only.

Section Id

4. Third-Party App Compatibility (Important)

Why Some Apps Stop Working

Many third-party Shopify apps:

Initialize JavaScript only once on page load
Expect a full page refresh
Bind event listeners when the DOM first loads

Because Seamless Product Switching replaces parts of the page dynamically, those apps may:

Stop responding
Display outdated content
Fail to initialize on the new product

⚠️ This is expected behavior for apps that are not SPA-aware.

5. How to Fix Compatibility Issues

Our Solution: Product Switch Event

We provide a custom JavaScript event that fires every time a seamless product switch completes.

Developers can listen to this event and re-initialize:

Third-party apps
Theme scripts
Custom UI logic

Event Name

king-linked-options:product-seamless-switched

Example Usage

document.addEventListener(
  'king-linked-options:product-seamless-switched',
  function (event) {
    // Reinitialize third-party apps
    // Rebind theme JavaScript
    // Refresh widgets or UI components
  }
);

6. Working with Third-Party App Developers

If a third-party app stops working after product switching:

Identify which app is affected
Contact the app developer
Ask if they provide:
- A JavaScript re-initialization function

A public API or global method

Example (hypothetical)

document.addEventListener(
  'king-linked-options:product-seamless-switched',
  function () {
    if (window.ReviewApp && typeof window.ReviewApp.init === 'function') {
      window.ReviewApp.init();
    }
  }
);

📌 Most modern apps already support this pattern.

7. Best Practices

✅ Prefer the exact stable section key after __ for duplicated themes or versions of the same theme
✅ Add each key separately when unrelated themes use different section keys
✅ Use a full section ID only when you intentionally want one exact ID
✅ Add only necessary sections (avoid re-rendering the entire page)
✅ Reinitialize scripts on the provided event

8. When to Disable Seamless Switching

You may consider disabling this feature if:

A critical third-party app does not support re-initialization
The app vendor confirms incompatibility
A full page reload is required for business-critical logic

9. Summary

Seamless Product Switching improves UX by avoiding reloads
Full section IDs or exact stable section keys control what gets updated
Some third-party apps require manual re-initialization
We provide a dedicated event to handle compatibility cleanly

If you have questions or need help integrating a specific app, please contact our support team.

Updated on: 09/08/2026

Was this article helpful?

Thank you!