Dynamic pages and variant changes#

The SDK observes targets inserted after page load. Your storefront still owns the selected product and must keep target attributes synchronized with that selection.

Load once, update the target#

Keep one SDK loader at the application or theme level. Do not append a new script on every route transition. Render a target where the current product appears and update it when a quick view, variant selector or client-side route changes the product.

For generated buttons, use the current product code on the target container. For authored buttons, also reset the previous SDK state, as shown in the custom storefront tutorial.

Authored button reset#

The following follows the existing custom storefront contract. Call it from your own selection handler, after you know the selected product code.

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

Connect the real platform lifecycle#

There is no universal ecommerce variant-change event. The Shopify guide defines an event for your theme to dispatch; adding that listener alone does not connect the theme. Use the callback documented by your actual theme or application.

For React / Next.js and Vue / Nuxt, follow the framework guide's client-side lifecycle and cleanup instructions.

Check for stale selections#

Switch between an eligible product, a different eligible product and one without a mapping. The Viewer must never reopen the previous product after selection changes. Repeat with quick views and browser back navigation.