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.

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

EDITING  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

ELEMENT / CSS

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:

.lion-notification{
  background-color: antiquewhite;
  }

.lion-notification__message{
  font-size: 20px;
  color: darkslategray;
  }

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

.lion-notification__close-button{
  font-size: 24px;
  }

Customising AOV Campaign notification

To customise your AOV Campaign notification, please use the below class to target the campaigns notification.

.lion-notification—campaign


FAQ

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?