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.

CUSTOMISING NOTIFICATIONS USING CSS

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

EDITING  NOTIFICATION

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

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

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