The Stylux JavaScript SDK has an optional Shopify plugin that can be enabled to make the frontend integration for standard Shopify significantly easier. The Stylux Shopify Plugin automatically integrates with Shopify's AJAX API to handle cart behavior after the BUNDLE_CREATE event is emitted, automatically balance cart items, and more.

Note: for headless Shopify integrations you'll likely not want to use this plugin.

Getting Started

When initializing the SDK you can enable the plugin as follows:

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

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

    plugins: {
      shopify: true,
    },
  });
})();

Configuration

A complete list of optional configuration options for the Shopify plugin is listed below:

Configuration Name	Data Type	Description
`detectVariantChanges`	`boolean`	Whether to automatically detect variant changes (defaults to `true`)
`normalizeCart`	`boolean`	Whether to automatically normalize/balance Stylux cart items (defaults to `true`)
`addToCartSelector`	`string`	The default selector matching the element triggering add to cart (defaults to `[name="add"], [name="add"] *`)
`overrideAddToCart`	`boolean`	Whether to override the add to cart button to trigger the Stylux modal for products eligible for personalization (defaults to `true`)
`sectionsForCartRequests`	`string[]`	When interacting with Shopify's AJAX cart API you can specify sections to fetch; this configures sections to include in these requests
`afterUpdateCart`	`(addToCartResponse: unknown) => void`	A function that's optionally called after any cart updates via Shopify's AJAX API
`getQuantity`	`() => number`	A function to optionally get the current selected quantity