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 anid="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:
lion-isolator
, and subsequently your CSS customisations need to use this as well. From the example above, this now looks like:
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 thedisableBundledCSS
option to true
when you configure the LoyaltyLion SDK:
Disable our default fonts
By default, we load theSource 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:
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 ascart.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: