To see what plans include the notifications, please see our pricing page here.

In this article: 

Why should I use notifications?

Customers who redeem rewards are far more valuable to you. If a customer joins your loyalty program and uses a reward, the chance of them purchasing for a second time is 68% higher versus customers who don’t join your loyalty program.

To capitalize on this, notifications are highly useful as they provide enhanced visibility of your program.

Notifications encourage customer redemption and drive ongoing customer engagement, delivering a high CLV (customer lifetime value).

All notifications are customizable with CSS.

To enable notifications on your website:

1. Log in to your LoyaltyLion admin account
2. Go to the tab Manage 

3. On the left find Customise and click on Notifications 

4. Here, you can enable and change the position of notifications on your page.

Note: If you have the turnkey or legacy widget on your page, you won't be able to change the position of the notification. The notification will always appear up above it.

To see the "reward available" notification in the admin here, you must be on our modern loyalty page UI and the loyalty page must be created.

Types of notifications

Earn points

Program introduction

Refer a friend

Reward redemption

Earn points

The earn points notification lets your signed-in customers know that they've earned points every time they complete an activity rule. It will let customers know which rule they completed, and how many points they got for completing the action:

You should be able to edit the notification text from the activity rule page in the admin. For example, if you wanted to change the text for the "Create an account" notification:

  1. Log in to Loyalty Lion

  2. Go to "Manage" tab

  3. Go to "Activity rules" and "View rules"

  4. Go to "Create an account" and "Edit"

  5. Scroll down to notification text and make the adjustments there

  6. Save the changes by hitting "Update rule"

Program introduction

The program introduction notification will be shown to every new visitor to your site, letting them know that you have a loyalty program. This notification has a cool-off period of 7 days, so guest customers will only see it once a week:

Refer a friend

Signed-in customers will see this notification after purchase. It will incentivize customers to prompt their friends for referrals:

To ensure this notification is visible, please ensure that you have added the LoyaltyLion snippet to your Shopify checkout. You can find instructions on how to do this here.

Reward redemption

Please note that the reward redemption notification is only available to our Loyalty Page UI. This notification is not compatible with our legacy UI elements.

The reward redemption notification will show your customers what rewards are available to them. To see the notification in admin, your loyalty page must have been created.

This notification will appear once for signed-in customers, typically on a product or catalog page. From the notifications tab, you can edit the message shown to customers:

We’ll show the customer the top 3 rewards available to them, with a Call to Action button for each to redeem the reward:

There’s also a space-saving version of the notification that shows just a single reward:

Reward notification compatible rewards:

  • Money-off (fixed or % discount)

  • Collection Fixed Discount

  • Custom Reward

  • Free shipping

  • Product Discount (voucher)

  • Seamless free product

[LEGACY PANEL] Customizing notifications using CSS 

Please note this specific guide is only possible with our Legacy UI, the legacy panel.

If you are using our Loyalty page, you should be able to use the same identifiers using your site's CSS editor.

1. Log into your admin account
2. Go to the tab Manage 

3. Find Customise and click on Loyalty panel

4. Scroll down to Advanced and Open CSS Editor

5. Click on Widget and Notifications to see the preview of your widget and notifications


Find the correct notification you wish to customise:

New customers: .lion-notification--guest-introduction

Referral: .lion-notification--referral-prompt

Points: .lion-notification--point

Reward redemption: .lion-notification--reward-redemption

In the CSS editor, change the color/text size to one of your choices:

.lion-notification {
    background-color: antiquewhite;
  • Replace the background color, font size, etc. to match your preference

  • Replace  .lion-notification  with the following, depending on what element you want to style


Main background: .lion-notification

Main text:  .lion-notification__message  

Button background:  .lion-notification__action-button 

Action button: .lion-notification__action-button 

Close button: .lion-notification__close-button

Example notification:

CSS used:

  background-color: antiquewhite;

  font-size: 20px;
  color: darkslategray;

.lion-notification__action-button .lion-action-button{
  background-color: darkslategrey;
  color: white;

  font-size: 24px;

Customizing a Campaign notification

To customize a Campaign notification, please use the below class to target the campaigns notification.



Q. Are LoyaltyLion notifications visible on mobile devices, or only on the desktop?
At present, LoyaltyLion notifications are visible only on the desktop. Your customers using mobile devices will not receive notifications until they log in on their desktops. 

Did this answer your question?