Loyalty Panel

The Loyalty Panel is a monolithic, self-contained component which lets a customer interact with all aspects of the loyalty program, e.g. viewing ways to earn points, redeeming rewards, etc.

This is our “plug and play” component; dropping this onto a page (or having it open in a modal) is the fastest way to get started with LoyaltyLion.

The Loyalty Panel is fully responsive and will switch to a more compact, mobile friendly view on smaller screens.

When no customer is logged in, this component will switch to rendering a simpler “Loyalty Splash” designed to introduce your program to guest shoppers.

Live preview

Embedding on a page

Use the following code to embed the Loyalty Panel on a page:

<div data-lion-account></div>

By default, the Loyalty Panel will expand horizontally to fill the available space. For best results, do not add anything to either side of the panel.

You can make the Loyalty Panel open on a specific page when it loads by including a tab parameter in the URL of the page containing the embedded component:

https://example.com/page/rewards?tab=help

Opening in a modal

You can open the Loyalty Panel in a modal by adding the data-lion-account-link attribute to any element. You can open it on a specific page by passing a value to this attribute.

The available pages you can open on are:

  • redeem (this is the default)
  • earn
  • refer
  • account
  • help
<a data-lion-account-link>Access your Rewards</a>

<!-- open on the help page -->
<a data-lion-account-link='help'>About our Loyalty Program</a>

If you have the Loyalty Widget enabled, it will also open the Loyalty Panel in a modal on click.