Rendering Offers

To render an offer within the offer element (optionally configured by using offerElementId; defaults to #stylux-offer-container) you'll want to use the offer's show API.

For example:

Stylux.offers.show({
  productId: 'external-platform-id',
  channel: 'D2C', // include 'B2B' for B2B offers
});

productId is the external platform ID stored in Stylux. On Shopify this is the variant ID, not the parent product ID.

You can also configure custom classes to apply to the button element that's ultimately rendered within the container; for instance:

Stylux.offers.show({
  productId: 'external-platform-id',
  elementClasses: ['custom-button-class-here'],
  channel: 'D2C', // include 'B2B' for B2B offers
});

Showing an offer will have no effect if the product being retrieved doesn't have an offer associated with it; the button offer will only be displayed to the user if there is a corresponding offer associated with the product. If an offer exists, this will render the offer button or entry point to the Stylux modal. When a user clicks on the button, it will open the Stylux modal for the current product/offer.

For a headless or custom storefront, register a cart adapter during setup. The SDK will use it to add the base product, replacement product, and any required upsell products after personalization. BUNDLE_CREATE remains available as an optional notification; it is not the preferred cart integration.