Please note that advanced customisation of your loyalty program is a feature available on Classic Plan and above.
If your panel does not look like the one below, please
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.
NOTE: this is an advanced guide - having some experience with HTML and CSS is recommended.
Don't have a developer to edit your page? Hire a LoyaltyLion expert here!
You can add images to your free product rewards like this:
1. First, log into your admin account and navigate to "Manage -> Customise -> Loyalty panel"
2. Next, scroll down and click "open CSS editor"
3. Here is the CSS to add product images to the panel:
/*Name of your product */
.lion-loyalty-panel-reward-item[data-reward-id='12345'] .lion-loyalty-panel-reward-item__meta:after {
content: '';
background: url(https://your-awesome-store.com/images/cool-product.png/) no-repeat center;
background-size: 200px;
display: block;
height: 130px;
width: 120px;
margin: auto;
}
Here are things that you will need to edit when adding the CSS to your panel:
Where to find the right information:
Reward ID: you can find the reward ID at the end of your product reward URL
