The LoyaltyLion SDK can be configured using the loyaltylion.configure function.

​
Class-based isolation

We apply a set of ‘isolation’ styles to ensure that our components look good regardless of a theme’s existing CSS. By default, this is implemented by rendering the root of our component trees with an id="loyaltylion" element, allowing us to target our isolation styles using #loyaltylion ... { ... } which enables robust and reliable isolation. This has the potential side effect of rendering more than one element on the page with the #loyaltylion id, which can raise warnings with some web standards validation tools.

If you prefer to use class-based isolation, you can use a configuration option to do so:

loyaltylion.configure({
  useClassIsolator: true,
})

This causes our components to render with a new lion-isolator, and subsequently your CSS customisations need to use this as well. From the example above, this now looks like:

/* instead of #loyaltylion */
.lion-isolator .lion-loyalty-panel-sidebar__title {
  font-weight: bold;
}

Note that class-based isolation is inherently less robust than id based isolation, and using it may require you to implement additional CSS overrides to address any conflicts that arise between your theme’s styles and our components.

​
Preview class-based isolation

To facilitate easy adoption of class-based isolation, you can enable it for a single pageview by adding a ?ll_use_class_isolator=1 query param. This allows you to try it out and see what additional CSS you may need to apply to address any style conflicts.

​
Disable our default styles

It’s possible to prevent our default styles from loading entirely, so you can start from a completely blank slate. To do this, set the disableBundledCSS option to true when you configure the LoyaltyLion SDK:

loyaltylion.configure({
  disableBundledCSS: true,
})

​
Disable our default fonts

By default, we load the Source Sans Pro font, when using your own font your should disable ours to avoid loading an unnecessary font. To do this, set the disableBundledFonts option to true when you configure the LoyaltyLion SDK:

loyaltylion.configure({
  disableBundledFonts: true,
})

​
Indicate your Shopify frontend type

By default, we’ll assume that you’re running on a native Shopify theme, and the SDK uses Shopify frontend APIs such as cart.js.

If you’re running a headless Shopify store, these APIs may not be available. To explicitly configure the SDK not to use these APIs, you can specify the shopifyFrontend configuration option. This turns off some features which depend on those APIs, such as in-cart rewards:

loyaltylion.configure({
  shopifyFrontend: 'unknown',
})