LoyaltyLion SDK

The LoyaltyLion JavaScript SDK allows shoppers to see and interact with your loyalty program.

The simplest LoyaltyLion UI uses our combined Loyalty Panel component which can be embedded onto a page or opened as a modal on demand. If you need something more customised, we have many smaller components which can be used to construct your own interface.


We’ve designed all our components to be easy to style with your own CSS as part of your normal workflow. Every component adopts BEM methodology so it’s easy to target individual elements without worrying about our default CSS doing anything weird.

To isolate our default styles from the rest of the page, we wrap all our components inside a container with id loyaltylion and target this element with our default CSS. Therefore, to target any of our elements with your own CSS you’ll need to ensure your selectors include #loyaltylion. For example:

/* all good */
#loyaltylion .lion-loyalty-panel-sidebar__title {
  font-weight: bold;

 * will be ignored, because our default styles apply to the rule:
 * `#loyaltylion .lion-loyalty-panel-sidebar__title`
.lion-loyalty-panel-sidebar__title {
  color: rebeccapurple;

Disabling 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:

  disableBundledCSS: true,

Disabling 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:

  disableBundledFonts: true,