Add product images to the panel
Success team avatar
Written by Success team
Updated over a week ago

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.

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 

Did this answer your question?