The Stylux JavaScript SDK renders personalization offers and modals, communicates with the Stylux API, and coordinates cart updates. It is exposed as window.Stylux.

On a product detail page, place a container where the Stylux offer button should render:

<div id="stylux-offer-container"></div>

Load the SDK asynchronously on every storefront page where Stylux is used, then call Stylux.setup in the load callback.

Connect the Cart

For a standard Shopify online store theme, enable the Shopify plugin:

await Stylux.setup({
  apiKey: 'STLX_key-for-unsigned-requests',
  merchantId: 'merchant-id',
  plugins: {
    shopify: true,
  },
});

For a headless or custom storefront, provide a cart adapter:

await Stylux.setup({
  apiKey: 'STLX_key-for-unsigned-requests',
  merchantId: 'merchant-id',
  cart: {
    adapter: cartAdapter,
  },
});

The adapter is the preferred cart integration. Do not use BUNDLE_CREATE to add products to cart; that topic remains available for observing successful bundle creation.

Next, review configuration or render an offer.