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.

Here you can change the position of notifications on your page.


  1. First, log into your admin account and navigate to "Manage -> Customise -> Loyalty panel"
  2. Next, scroll down and click "open CSS editor"


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 Campaigns notifications:

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

Did this answer your question?