Please note that this article talks about changing icons of your Loyalty Panel. If your LoyaltyLion UI does not look like on the screenshot, please click below to see customisation options for different LoyaltyLion UIs:
In this article:
- Where to find the CSS Editor?
- How to apply the code within CSS
- Guest Panel icon codes
- Logged in Activity tab icon codes
Where to find the CSS Editor?
1. Log into your admin account
2. Go to the tab Manage
3. Find Customise 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
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 'customise 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 here.
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
For examples and inspiration on how to customise your loyalty panel please see our Pinterest board here.
Please note, that even though we give you all options to customise your loyalty panel, we do not specialise in customising loyalty programs for individual clients.