To see which plans include this feature please see our pricing page. If you would like to have access to the Loyalty Page, please contact

In this article:

What is the Loyalty Page?

Setting up and customising a loyalty program that will not only be functional but also look on-brand with the rest of your store can be a handful. Coming up with the design that's going to be coherent with your brand can take up some time and require technical help. This is why we created our Loyalty Page, to make sure your loyalty page is ready within a few minutes and looks great!

What are the benefits?

  • A fully on-brand loyalty experience - you can customise the loyalty program quickly

  • A unique URL for your loyalty program - drive program engagement by directing people straight to your loyalty offering rather than relying on popups, iframes or widgets

  • A great way for increasing visibility across your site - make your program a natural part of every customer journey by embedding loyalty components on a product or post-purchase pages

  • No need for CSS - create a loyalty page with all important elements without the CSS knowledge. You can set this up quickly, within a few minutes

How to set it up?

1. Login to your LoyaltyLion account

2. Click on the tab Manage

(click an image to make it bigger)

3. On the left find Customise and select Loyalty Page

(click an image to make it bigger)


4. Amend the settings below:

  • Page's title

  • Location on your store

  • Colours

  • Colours assignment

(click an image to make it bigger)


5. By default, your page will be hidden from the view. You'll be able to preview it in the Shopify admin.

If you want to make it visible to your customers, make sure to select Visible and save the changes.


5. Make sure you create the rewards page on your platform and add the code visible below.

6. Once the page is created on your platform, add the location, so where the loyalty page is going to be visible. Click on Create once this is done.

7. If everything is correct, You'll see the below message and you'll be able to view the panel's preview.

If we can't locate the URL or are unable to find the code, you'll see an error message as below:

Please make sure you go to the Pages section of your store's platform and confirm that the URL you provided in LoyaltyLion is correct and you added the necessary code.

9. If you click on the link, this is the view you'll see:

Guest view:

Member view:

You can customise your program further using your platform's CSS Editor.

How to change the default icons?

In order to learn how to change the default icons to your custom ones, please


Q. My loyalty page looks buggy for some reason. Why?

If your loyalty page looks like the one below, please follow the steps below.

It is possible, that you have added a code for embedding our legacy loyalty panel on your site and this is breaking the loyalty page. You can check this by:

  1. Right-click anywhere on the site

  2. Select Inspect

  3. In the panel search for <div data-lion-account></div>. If you find it on the page, this means that you embedded the legacy panel that does not work with your site.

Please make sure to go to the place where you embedded the panel and remove the code below:

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

The only code on the page should be:

<div data-lion-integrated-page=""></div>
Did this answer your question?