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',
      },
    },
  });
})();

It also accepts configuration to change/modify icons; this internally defaults to:

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

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

    modal: {
      icons: [
        {
          type: 'star',
          text: 'Be unique',
        },

        {
          type: 'gift',
          text: 'Great for gifting',
        },

        {
          type: 'protect',
          text: 'Prevent theft',
        },
      ],
    },
  });
})();

For example, to remove the prevent theft icon, the modal could be configured as follows:

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

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

    modal: {
      icons: [
        {
          type: 'star',
          text: 'Be unique',
        },

        {
          type: 'gift',
          text: 'Great for gifting',
        },
      ],
    },
  });
})();