Please note that this article talks about changing icons of your Loyalty Page. 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:
Please note, that even though we give you all options to customise your loyalty page, we do not specialise in customising loyalty programs for individual clients. If you're having troubles with customising your program, please make sure to get in contact with your developer.
Don't have a developer to edit your page? Hire a LoyaltyLion expert here!
How to change the look of your program?
You can change the look of your loyalty page using CSS. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colours, spacing) to Web documents.
You can change the way your program looks by using your store platform's CSS editor. You should be able to find it by logging in to your platform's admin (Shopify/Magento/BigCommerce or Custom page). In this document, we'll be using Shopify as an example.
1. Log in your Shopify admin.
2. Navigate to your Online store > Themes section.
3. Click on Actions > Edit Code
4. Find your CSS tab. Usually, it should be: theme.css.liquid, however, please note that the name of the tab might vary depending on your theme.
It is merchant's responsibility to find their CSS tab/editor on their platform.
How to apply the code using CSS
In order to change the look of the program make sure to prepare all icons (in the .png format) and locate the CSS editor on your platform.
Each element of the loyalty page, including icons, have their own code that helps us recognise them. This way, when you make the changes in the CSS Editor, the site will know which elements you're amending.
We will list the codes for each of the default icon elements below, but it's always good to know how to find them!
1. Go on the page where you can see your loyalty page. Depending if you have launched the program already it might be either a live site or a preview.
2. Right-click on the icon you wish to change and select Inspect. This will open up a DevTools view on the side of your program.
3. Make sure you select the correct element. The correct code should be already highlighted, but if not, right-click on the correct icon again to highlight it.
4. Click a few times on the highlighted code, so you're able to copy it and select only the last bit of the code
5. Paste it in the css editor
6. In order to change the icon, use the code below:
#loyaltylion .CODE YOU JUST SELECTED {
background: #fff url( YOUR ICON'S URL) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};
So when at the end you're left with your code looking similar to this:
7. Save the changes and refresh your loyalty page. You should see the changed icon.
Icon codes
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
Follow on Twitter: .lion-icon__rule--twitter-follow
Like on Facebook: .lion-icon__rule--facebook-like
Visit: .lion-icon__rule--pageview
Custom rule: .lion-icon__rule--custom