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:
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
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 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 customize your loyalty panel please see our Pinterest board here.
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.