Skip to main content

Change the font of the panel

See our documentation below for the various ways in which you can customize the text of your loyalty panel.

Written by Success team

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 is being deprecated. 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.


In this article:

Where to find the CSS Editor? 

  1. Log into LoyaltyLion

  2. Go to Display > Store components > Loyalty panel

  3. Scroll down to Advanced and Open CSS Editor

In the CSS editor, you can make changes to your loyalty panel, widget and notifications

How to change the font family

Once you have found the element of the text you want to change, simply add the code into the CSS editor using ‘font-family’ as the class. Please see below for an example of this structure.

.lion-loyalty-splash__title {​
font-family: sans-serif;
​}

How to change the font size

To change the font size, simply add the following code into your CSS editor using ‘font-size’. Please see below for an example of this structure.

​.lion-loyalty-splash__title {
font-size: 150px;​
}

How to change the font color

To change the color of your font, apply the code: ‘color’ to your element. See below for an example of this structure. You can either use a general colour such as yellow, or add specific HEX code.

.lion-loyalty-splash__title {
​ color: #37aadf;
​}

How to change the thickness of the font

To change the thickness (boldness) of your font, apply the code: 'font-weight' to your element. See below for an example of this structure. You can either apply a numeric value for a specific weight, or enter a general weight (bold, bolder, lighter, normal).

​.lion-loyalty-splash__title {
​font-weight:bold;
​}
​.lion-loyalty-splash__title {
​font-weight:600;
​}

Please note, that even though we give you all options to customize your loyalty panel, we do not specialize in customizing loyalty programs for individual clients. 

Did this answer your question?