Skip to main content
All CollectionsGetting StartedSet up the loyalty UI
Standard loyalty page
Standard loyalty page
Mags Maras avatar
Written by Mags Maras
Updated over 4 months ago

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 support@loyaltylion.com

What is the Loyalty Page?

Setting up and customizing 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 a 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 customize 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?

For the Loyalty page to appear after it has been created, the LoyaltyLion SDK needs to be installed on your website

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)

[Shopify]

4. Amend the settings below:

  • Page's title

  • Location on your store

  • Colors

  • Colors assignment

(click an image to make it bigger)

[Shopify]

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.

Please note that in order for LoyaltyLion UI to be visible on your page, you need to ensure that Shopify Page Content is added to and visible on your page template, as below:

[Non-Shopify]

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 customize 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

find instructions in this article

FAQ

[Shopify] LoyaltyLion UI disappeared from my rewards page. How can I add it back?

If for some reason, LoyaltyLion doesn't show on your rewards page, please make sure that the loyalty page code snippet has been added to the page content.

To check this, please follow the steps below:

  1. In Shopify admin, find Sales channel, and click on Online store

  2. Go to Pages, and from the list select your rewards page

  3. Click on the </> button in the top right corner of the Content

  4. Here you should be able to view the html. If you use Loyalty Page, you should see the below code:

    If the HTML section is empty, or you can't find the code snippet, make sure to add it and save the changes: 

    <div data-lion-integrated-page=""></div>

Please note that in order for LoyaltyLion UI to be visible on your page, you need to ensure that Shopify Page Content is added to and visible on your page template, as below:

If you're still having issues, feel free to get in touch with our support team (support@loyaltylion.com).

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>

Is there a reason I can't see the Loyalty Page under customize? I can only access the loyalty panel, loyalty widget, or program design tabs.

This could be down to being on a plan that does not include the loyalty page, or on an old version of the LoyaltyLion UI. The loyalty page is typically for our Advanced and Plus merchants. If you believe you should have the loyalty page, please get in touch with our support team or account manager, who will be able to assist.

I wanted to test our points program without my customers being about to interact with it. Is there a way to do this without opening it up to my entire customer base?

This is certainly possible. Please follow the steps in our documentation here to test the program before going live to customers.

Our Loyalty Page preview doesn't have any content on it. Nothing is showing.

If your loyalty page preview is not working, please check that the code for the loyalty page is present on the page you are previewing:

<div data-lion-integrated-page=""></div>

Please also ensure that the LoyaltyLion SDK is installed and loading on that page of the site.

If you're still having issues, feel free to get in touch with our support team (support@loyaltylion.com).

My loyalty page won't display on my site even though I have set it to active.

If your loyalty page is not displaying, and you believe it should be, please check the following:

  • That your loyalty program is launched. You will be able to see if your program is launched. Merchants with a launched program will not see this option it in the top bar of the LoyaltyLion admin

  • That the code for the loyalty page has been added to the relevant page in Shopify 

<div data-lion-integrated-page=""></div>

[Shopify] Is there a way to change the URL of the loyalty page so it shows up on another URL?

You will need to create the page URL in Shopify that you want to move the LoyaltyLion page over to, then change the URL from the LoyaltyLion admin.

If you already created a loyalty page, and see the below error message, please reach out to our support team (support@loyaltylion.com) with the url of your Shopify loyalty page. Our team will help link the existing loyalty page to LoyaltyLion's Page Editor.

Did this answer your question?