Template management determines the logo, as well as the other content elements e.g. fonts, headers, colors, that are used for all pages within Open Loyalty.


The content is formatted with CSS, and can be easily edited and customizes by adding variables and another content element. You can make a color theme on the frontend using your primary color (Accent color).

To customize your template:

  1. Tap the Settings icon settings in the upper-right corner and choose Configuration on the menu.
  1. Scroll down to Template section and do the following:
  • In Accent color, define your primary color indicator. Accent color is the color displayed most frequently across your Loyalty Program screens and components. Only Hexadecimal color values are supported.
  • In the CSS template box, enter the CSS code as needed. The content consists of a combination of CSS directives, variables, and text
Content management
One of the first things you’ll want to do is to change the logo in the header above the menu. Your logo can be saved as either a PNG, JPG, or JPEG file type, and uploaded from the Admin of your Open Loyalty.
The default Open Loyalty logo in the sample data is a PNG file. During upload, Logo and Small logo images will be automatically resized to applicable versions.
In addition, you can also add an oversized banner image, called Hero image, that will be placed on a login page. Hero image is the first visual element a customer’s encounters on your site.
Logo in Header Menu


Images sizing and formats:

  • The minimum and maximum image width is between 200–2560 pixels
  • The minimum and maximum image height is between 200–1440 pixels
  • The size of any one image must not exceed 2 MB
  • Supported image formats: JPEG, JPG, PNG