In this article: 

Why should I use notifications?

To ensure your loyalty program is successful with your customers we recommend you turn on the notifications in your merchant account.

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 enabled the widget on your page, you won't be able to change the position of the notification. Notification will always show up above it.

Notification visibility 

Notify new visitors? notification has a cool-off period of 7 days. Your guest customer will see it only once a week, no matter how many time they visit your store.

The prompt users for referrals notification will be visible to your loyalty program members only after purchase - to ensure this shows on the post purchase page, please ensure you have manually added the LoyaltyLion snippet within the Shopify Checkout. Instructions on how to do this can be found here.

Customising notifications using CSS 

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

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

.lion-notification {
    background-color: antiquewhite;
  • Replace the background-colour, 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;

Customising Campaign notification

To customise your 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?