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 go to the tab Manage on your LoyaltyLion merchant account and click on Notifications under Customise

Note: please be advised if you're using our SDK or embedded page, that the notifications are linked only to the pop-up panel.  

Here you can 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.

Note: notification visibility
Notify new visitors? notification cool-off is 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 customers only after purchase.

Customising notifications using CSS 

  1. Log into your admin account
  2. Navigate to the Manage tab
  3. Find Customise and find Loyalty panel
  4. Scroll down and click open CSS editor

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 notifications

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

.lion-notification—campaign
Did this answer your question?