The Stylux JavaScript SDK is a thin JavaScript library that integrates on the merchant's ecommerce theme that makes the Stylux integration significantly easier than without it. The initial SDK bundle size sits at ~9 kB compressed; fully loaded (including all CSS) sits ~32 kB compressed.

Then on your product detail page (PDP) place the following container element where you want the Stylux button rendered if a product has an offer:

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

Initializing the SDK

In order to use the SDK, it must first be initialized/setup; for example:

(async function () {
  window.Stylux = {
    queue: [],
    onScriptLoad: (fn) => {
      window.Stylux.queue.push(fn);
    },
  };

  (function loadStyluxSDK(src, onload) {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.crossOrigin = "anonymous";
    script.onload = onload;
    document.head.appendChild(script);
  })("https://sdk.stylux.io/js-sdk.js", async () => {
    if (!self.Stylux) {
      return;
    }

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

Initializing the SDK with your API key for client/unsigned requests allows the SDK to make authenticated requests to Stylux's API on your online store.

Initializing the SDK exposes the Stylux SDK on the window object; all interactions will use the Stylux global.