NOTE: this is an advanced guide - having some experience with HTML and CSS is recommended.

 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?