Please note that advanced customization of your loyalty program is a feature available on Classic Plan and above. If your panel does not look like the one below, please see our other UI customization options.
Loyalty panel is a legacy interface that we are deprecating. 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:
Log into LoyaltyLion
Go to Display > Store components > Loyalty panel
Scroll down and click "open CSS editor"
Here is the sample 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;
}
You will need to edit the following when adding the CSS to your panel, in order to target the right product and add your image to it:
Reward ID: you can find the reward ID at the end of your product reward URL
