LoyaltyLion applies isolation to your styles to ensure that the default LoyaltyLion themes look good regardless of your existing theme and its CSS.
By default, this is implemented by rendering the root of LoyaltyLion component trees, with a wrapping element with an id="loyaltylion". This allows LoyaltyLion to target our isolated elements with a CSS selector of #loyaltylion ... which enables robust and reliable isolation.
By some web standards, the existence of multiple elements on the page with the same "id" can be considered a violation, and can lead to warnings or errors when using certain website 'validation' tools.
If you want to change these errors/warnings, LoyaltyLion offer the option to change the isolation approach to use class-based isolation instead of our #loyaltylion id's.
This will result in compliance with the aforementioned web standard, at the cost of weakened isolation which may result in some components needing additional styling by you. At present, LoyaltyLion cannot provide any assistance with the change of the isolation approach as this will differ on each merchant site, it is your responsibility to implement this.
If you want to preview how it will appear to customers before making the changes live, you can follow the below steps.
To preview:
Add the query parameter
ll_use_class_isolator=1to any url (e.g.https://mystore.com/rewards?ll_use_class_isolator=1)
This will force LoyaltyLion to render with class based isolation for that page view only. This enables you to try this out on your store, and see what kinds of additional CSS may be needed to compensate for the changed isolation.
To enable permanently:
This can be achieved using our SFK's configuration options. You will need to add a small JavaScript snippet to your site that should be run immediately after LoyaltyLion's core SDK snippet.
For example, in a Shopify theme.js file, this may look like the following:
<head>
...
{% include 'loyaltylion' %}
<script>
window.loyaltylion &&
window.loyaltylion.configure({
useClassIsolator: true })
</script>
</head>
This will set this option for every render of the LoyaltyLion SDK.