The SDK is flexible and can be configured with quite a few different options. A complete list of options are outlined below:

Configuration Name	Data Type	Description
`merchantId`*	`string`	Your merchant ID
`apiKey`*	`string`	Your API key intended to be used on the frontend for unsigned requests
`offerElementId`	`string`	The element ID (defaults to `#stylux-offer-container`) to render the offer within
`modalElementId`	`string`	The element ID (defaults to `#stylux-modal-container`) to render the modal within
`getButtonOfferText`	`(config: { ctaText: string; price: string }) => string;`	A function that can be used to dynamically render different CTA button text; defaults to `Offer CTA text $price`
`modal`	`IModalConfig`	The modal configuration.
`plugins`	`IPluginConfig`	The plugin configuration. For the Shopify specific plugin configuration, see its config here.

*: required

Modal Configuration

The Stylux modal is rendered in a separate frame/document so that styles are consistent on any integrated page. In having said this, it does accept configuration to make the modal button styles more consistent with your brand's theme/colors/styles. For example:

(async function () {
  if (!self.Stylux) {
    return;
  }

  await Stylux.setup({
    apiKey: 'STLX_key-for-unsigned-requests',
    merchantId: 'merchant-id',

    modal: {
      buttonStyles: {
        background: '#0000FF',
        color: '#FFF',
        'border-radius': '2px',
      },
    },
  });
})();

Modal Redesign (Modal V2):

Stylux has rolled out a new Modal V2 for our merchants. To configure the modal version explicitly:

(async function () {
  if (!self.Stylux) {
    return;
  }

  await Stylux.setup({
    apiKey: 'STLX_key-for-unsigned-requests',
    merchantId: 'merchant-id',

    modal: {
      version: 'V2',
    },
  });
})();