Theme

Customize your widget theme

Learn how to customize your widget using features in the Theme tab

Introduction

Appearance and branding play a crucial role in a successful loyalty program. A visually appealing design not only impresses customers but also fosters recognition, helping your business stand out from competitors. Strong, unique branding builds trust, creates lasting impressions, and reinforces customer loyalty.

Overview

Overview of the Theme features
Customize your widget with the Theme features

Overview of the Theme features

To personalize your loyalty program’s display and match it with your store’s branding, you can find all options in Branding > Click on the ‘Customize‘ button in the Theme tab to customize how your widget will appear.

There are several customizable settings for you to make changes to the widget appearing on your store-storefront:

Visibility: Decide which pages to display your widget on and select the loyalty sections to feature within the widget.
Colors: Customize theme colors for separate sections on your widget.
Other advanced customizations include changing the banner image, adjusting the corner of the widget, removing the BON brandmark, and adding your own custom CSS.

NOTE: Some features are only available from the Basic plan and higher. Check out our pricing plans here.

Customize your widget with the Theme features

1. Visibility

To begin setting up your widget on the storefront, you need to decide where to place the widget, so that your customers can see it clearly. Go to Branding > Select Visibility.

Here, you can decide which pages to display your widget on.

Next, choose whether to display all loyalty sections or only the active ones. If you select “Only show sections with active rules,” the system will automatically determine which sections to display based on the activation status of each program (Earn points, Redeem points, Referral program, VIP Tier program).

You can also customize the displayed content on your widget. This setting comes with two options:

Show illustrations: Check this box to display the hand and gift box illustrations on your widget’s banner.
Show program title: Check this box to display the name of your loyalty program. You can edit this name under Widget Text > Sign-in Page > Section 1. Reward program. Learn how to customize the Widget Text here.

2. Colors

With the Theme color, the changes will be reflected in the primary button, background, program title, and icon of each section.

With the Section color, you can make changes to the loyalty sections on your widget.

With the Function button color, you can change the color of the action buttons in tabs like Redeem points and Earn points. To preview the changes, you’ll need to go to your store-front, open the widget, and go to a specific tab to view the buttons.

NOTE: To change the colors for the loyalty sections and function buttons, you need to be on the Basic plan and above to unlock these features.

3. Banner image

This feature allows you to upload a banner image to enhance your store’s branding and product promotion. Image requirements:

Aspect ratio of 1.7:1 (e.g., 375x220px)
File size must be under 500KB
Accepted file formats: .png, .jpg, .svg, .gif

Once you finish customizing your widget’s Theme, don’t forget to click Save. If you click Reset settings to default, all the settings will be permanently reset.