Please note that advanced customization of your loyalty program is a feature available on Classic Plan and above. If your panel does not look like the one below, please see our other UI customization options.
In this article:
Loyalty panel is a legacy interface that is being deprecated. If you still use loyalty panel, we’ll be in touch with you when it’s your time to upgrade.
If you’d like to make the change earlier and take advantage of our new UI, contact us at support@loyaltylion.com.
Please note that if you joined LoyaltyLion after 2022, you will not have access to this UI.
When you first set up your Loyalty Program, your panel might look something like this:
Replacing "Loyalty Points" in this example can be done with a single line of code.
Where to find the CSS Editor?
Log into LoyaltyLion
Go to Display > Store components > Loyalty panel
Scroll down to Advanced and Open CSS Editor
In the CSS editor, you can make changes to your loyalty panel, widget and notifications
How to add your logo in your loyalty panel?
In the CSS editor, add the following line, replacing the URL with a public link to your logo:
.lion-loyalty-panel-sidebar__title {
background:url(http://www.mysite.com/assets/logo.png) no-repeat center;
background-size: 180px; height: 60px; color:transparent;
}Once you're done, your panel should look something more like this:
To change the size of the logo, edit the background-size property in the provided CSS.