In this article:

  • How to apply the code within CSS
  • Guest Panel icon codes
  • Logged in Activity tab icon codes

How to apply the code within CSS

Within your CSS panel, simply find the element code for the icon you want to change, and add it into the panel using the below example as your structure. 

Please note that the image format of your image address needs to be in a png format.

.loyalty_example{
background: #fff url(enter-your-image-address-url-here) no-repeat 50% 50%;
background-size: 46px;
}

Guest View - Panel Icons

For customers that are not logged into an account, they will see the guest view panel (below). You can see this view within your admin account, by unselecting the 'preview customer - enabled' section within your 'customise panel' tab.

Make a purchase:   .lion-icon__rule--purchase{
Create an account:  .lion-icon__rule--signup{
Refer a friend:  .lion-icon__rule--referral{
Voucher:  .lion-icon__reward--cart-discount-voucher{
Free Product Voucher:  .lion-icon__reward--product-discount-voucher{

Logged in customer - Activity icons

The below codes will include the element codes needed for each tab of your loyalty program.

Activities 

For more information on how to set up your rules, please see our documentation here.

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
Post a # on Instagram:  .lion-icon__rule--instagram-post-hashtag
Follow on Twitter:  .lion-icon__rule--twitter-follow
Like on Facebook:  .lion-icon__rule--facebook-like
Visit:  .lion-icon__rule--pageview
Custom rule ("Test"):  .lion-icon__rule--custom

For examples and inspiration on how to customise your loyalty panel please see our Pinterest board here.

Please note that we do not specialise in customising your loyalty program - if further assistance is required please contact our support team at support@loyaltylion.com and we can refer you to a development team to assist.

Did this answer your question?