For all Shopify stores.
In this article:
Overview
On Shopify, the LoyaltyLion SDK loads on your store through an app embed in your theme, called LoyaltyLion SDK. Your loyalty program only works on your store while this app embed is turned on. New stores turn it on during onboarding.
Because it's an app embed, you don't need to edit your theme's code to add LoyaltyLion, and you manage it alongside your other theme apps.
Checking the app embed is on
In LoyaltyLion, go to Display > Store components. The badge at the top shows SDK enabled when the LoyaltyLion SDK app embed is on in your live theme, or Action needed: Enable SDK when it isn't.
Click the badge to see the steps, with an Open Theme Editor button that takes you straight to the app embed in Shopify.
Enable the SDK via Shopify App Embeds
You turn on the LoyaltyLion SDK app embed in your Shopify theme editor.
In your Shopify admin, click Online Store.
Click Customize on your theme.
In the left-hand sidebar, click App embeds.
Turn on the LoyaltyLion SDK toggle.
Click Save in the top right. Your loyalty program now loads on your store.
If you don't click Save, the app embed stays off and your customers can't use your loyalty program.
When you change your theme
App embeds are set separately in each Shopify theme. When you publish a new theme, check that the LoyaltyLion SDK app embed is turned on in it, even if it was on in your old theme. A theme copied from one that didn't have the app embed on starts with it off.
Follow the steps above in the new theme, or check the badge in Display > Store components once the new theme is live.
App embed settings
The LoyaltyLion SDK app embed has three settings. To change them, click LoyaltyLion SDK in App embeds to expand it, and then click Save.
Disable bundled CSS: stops our default styles from loading, so you can style LoyaltyLion from a blank slate.
Disable bundled fonts: stops our default font from loading. Use it when you style LoyaltyLion with your own font.
Use class isolator: wraps LoyaltyLion components in the class lion-isolator instead of the id loyaltylion. This changes the selector your custom CSS needs.
These settings don't change the loyalty widget, which uses its own isolated styles.
Using the class isolator
By default, we wrap each LoyaltyLion component in an element with id="loyaltylion", which keeps your theme's styles from changing our components. Some web standards treat more than one element with the same id on a page as a violation, so some website validation tools report it. Use class isolator avoids this.
To preview it first, add ll_use_class_isolator=1 to any URL on your store, such as https://mystore.com/rewards?ll_use_class_isolator=1. This uses the class isolator for that page view only.
The class isolator protects LoyaltyLion components less strongly from your theme's styles, so some components may need extra CSS from you. We do not write custom CSS. Any custom CSS that targets #loyaltylion must target .lion-isolator instead.
For example:
/* instead of #loyaltylion */
.lion-isolator .lion-loyalty-panel-sidebar__title {
font-weight: bold;
}
If you load LoyaltyLion with code rather than the app embed, the SDK configuration guide for developers covers the same options.
Moving from the theme snippet
Some older stores load LoyaltyLion with a loyaltylion.liquid snippet in their theme instead of the app embed. If that's your store, turn on the app embed with the steps above, and then remove this line from your theme.liquid file:
{% include "loyaltylion" %}If you customized the snippet, for example to load LoyaltyLion only on certain pages, the app embed doesn't keep those customizations. It loads LoyaltyLion on every page.
FAQ
I customized the loyaltylion.liquid snippet. How does this affect me?
We didn't move stores with a customized snippet to the app embed, so your snippet still works. You can switch to the app embed when you choose, but it won't keep your customizations.
What happens to the old loyaltylion.liquid snippet?
If we moved your store to the app embed, we removed the snippet for you. Otherwise, you can remove the include line from your theme.liquid file once the LoyaltyLion SDK app embed is on.