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?