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

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.

Show an Offer

On a Shopify online store, add the button offer block. It places the button for you.

To place the button yourself, add a container on the product page and follow Rendering Offers:

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

Next, review configuration.