Please note that this article talks about changing the icons of your Loyalty Panel. If your LoyaltyLion UI does not look like on the screenshot, please click below to see customization options for different LoyaltyLion UIs:
Loyalty panel is a legacy interface, that we are slowly retiring. 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.
In this article:
Where to find the CSS Editor?
1. Log into your admin account
2. Go to the tab Manage
3. Find Customize and click on Loyalty panel
4. Scroll down to Advanced and Open CSS Editor
5. Here you can make changes to your loyalty panel, widget, and notifications
Don't have a developer to edit your page? Hire a LoyaltyLion expert here!
How to apply the code within CSS
Within your CSS panel, simply find the element code for the icon you want to change, and add it into the panel using the below example as your structure.
Please note that the image format of your image address needs to be in a png format.
.loyalty_example{
background: #fff url(enter-your-image-address-url-here) no-repeat 50% 50%;
background-size: 46px;
}
Guest View - Panel Icons
For customers that are not logged into an account, they will see the guest view panel (below). You can see this view within your admin account, by unselecting the 'preview customer - enabled' section within your 'customize panel' tab.
Make a purchase: .lion-icon__rule--purchase{
Create an account: .lion-icon__rule--signup{
Refer a friend: .lion-icon__rule--referral{
Voucher: .lion-icon__reward--cart-discount-voucher{
Free Product Voucher: .lion-icon__reward--product-discount-voucher{
Logged in customer - Activity icons
The below codes will include the element codes needed for each tab of your loyalty program.
Activities
For more information on how to set up your rules, please see our documentation.
Make a purchase: .lion-icon__rule--purchase
Refer a friend: .lion-icon__rule--referral
Happy birthday: .lion-icon__rule--birthday
Sign up to mailing list: .lion-icon__rule--newsletter-signup
Follow on Instagram: .lion-icon__rule--instagram-follow
Post a # on Instagram: .lion-icon__rule--instagram-post-hashtag
Follow on Twitter: .lion-icon__rule--twitter-follow
Like on Facebook: .lion-icon__rule--facebook-like
Visit: .lion-icon__rule--pageview
Custom rule ("Test"): .lion-icon__rule--custom
Bonus points for a collection purchase: .lion-icon__rule--collection-purchase
For examples and inspiration on how to customize your loyalty panel please see our Pinterest board.
Please note, that even though we give you all options to customize your loyalty panel, we do not specialize in customizing loyalty programs for individual clients.