> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.linkedoption.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)

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

`shopify-section-template--`

### Method 2: Browser Developer Tools

1. Open the product page
2. Right-click the section → **Inspect**
3. Locate the outer container element
4. 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](https://helpkit.getalltool.com/api/media/file/image-142.png)

## 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:

1. Identify which app is affected
2. Contact the app developer
3. Ask if they provide:
4. - 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.