Wix Loyalty Program: Adding a Loyalty Widget to Your Site's Header
Add a loyalty widget to display essential loyalty program information directly in your site's header. Customers can see their points balance or available rewards from anywhere on your site, and it allows them to easily access your loyalty program page.
Adding a loyalty widget to your site
Once you have added loyalty program pages to your site, you can add the widget as well. You can choose to keep it in the header or move it out to someplace else on the page.
To add a loyalty widget:
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Site Menu.
Click your loyalty page.
Click the loyalty element on your page.
Click Settings.
Click the Add-Ons tab.
Click Add Widget.
Tip: The widget is automatically added to the header, but you can drag it anywhere on the page.
(Optional) Choose to pin the widget to the screen and/or show it on all pages.
Studio Editor
Click Pages
on the left side of the editor.
Click your loyalty page.
Click the loyalty element on your page.
Click Settings.
Click the Add-Ons tab.
Click Add Widget.
Tip: The widget is automatically added to the header, but you can drag it anywhere on the page.
(Optional) Pin the widget to the screen.
Tip: If you want the widget to show on all pages, make sure it is in a global section.
Tip:
You can also add the loyalty widget from the 'My Rewards' page.
Customizing the loyalty widget
Customize the loyalty widget to tailor its appearance and functionality to better suit your site's design and your customers' needs. You can decide what information to display and how it should look. For example, choose whether to show available points or rewards, and in which font and color.
Best practices for accessibility
By default, the loyalty widget (on web and mobile) is accessible. However, if customers accumulate a large number of points, the widget's length does not automatically expand. As a result, numbers or text in the widget may get cut off, which does not meet accessibility standards.
To meet accessibility best practices, we recommend to:
Adjust the widget's length to accommodate the longest possible length needed, based on your site's language(s) and the maximum number of points customers can accumulate.
Display both text and number of points or rewards in the widget. Make sure to apply the same settings to your mobile site.
To customize the loyalty widget:
Wix Editor
Click the loyalty widget element on your page.
Click Settings.
Choose what you want to customize:
Display
Click the Display tab.
Select what to show on the widget:
Customer points balance: Displays how many loyalty points the site customer has.
Available rewards: Displays the number of rewards the customer has. This includes rewards the customer has redeemed but not used yet and ones that they can redeem with their current points balance.
Loyalty program name: Displays your loyalty program name. This is the name you chose when setting up the program in the dashboard.
Tip: Selecting Customer points balance or Available rewards are best for accessibility.
Layout
Click the Layout tab.
Select a layout for the widget: Both, Icon, or Text.
Choose what you want to customize:
Both: Set the icon position, icon size, spacing between the text and icon, and alignment.
Icon: Set the icon size.
Tip: If you select the Text layout, you can customize the font and color in the Design tab.
Tip: Selecting Both or Text are best for accessibility.
Design
Click the Design tab.
Click the Regular or Hover tab to customize how the widget looks for each.
Choose what you want to customize:
Font & color: Set the font and color to match your brand and site's color theme.
Background color & opacity: Set the color and opacity of the widget's background.
Border width: Set the width of the widget's border.
Corner radius: Round the corners to make the widget's frame more circular.
Text
Click the Text tab.
Set the widget text that appears before and after site visitors log in by switching between the tabs:
Logged in:
Type the text that appears on the widget (e.g. "Available points").
Click the drop-down to choose where the widget links to.
Note: By default, the widget links to the My Rewards page.
Logged out: Type the text that appears on the widget (e.g. "Log in to see points").
Studio Editor
Click the loyalty widget element on your page.
Click Settings.
Choose what you want to customize:
Display
Click the Display tab.
Select what to show on the widget:
Customer points balance: Displays how many loyalty points the site customer has.
Available rewards: Displays the number of rewards the site customer has. This includes rewards the customer has redeemed but not used yet and ones that they can redeem with their current points balance.
Loyalty program name: Displays your loyalty program name. This is the name you chose when setting up the program in the dashboard.
Layout
Click the Layout tab.
Select a layout for the widget: Both, Icon, or Text.
Choose what you want to customize:
Both: Set the icon position, icon size, spacing between the text and icon, and alignment.
Icon: Set the icon size.
Tip: If you select Text, you can customize the font and color in the Design tab.
Design
Click the Design tab.
Click the Regular or Hover tab to customize how the widget looks for each.
Choose what you want to customize:
Font & color: Set the font and color to match your brand and site's color theme.
Background color & opacity: Set the color and opacity of the widget's background.
Border width: Set the width of the widget's border.
Corner radius: Round the corners to make the widget's frame more circular.
Text
Click the Text tab.
Set the widget text that appears before and after site visitors log in by switching between the tabs:
Logged in:
Type the text that appears on the widget (e.g. "Available points").
Click the drop-down to choose where the widget links to.
Note: By default, the widget links to the Member Page.
Logged out: Type the text that appears on the widget (e.g. "Log in to see points").
Removing the loyalty widget:
To remove the loyalty widget from your site, select the element in your editor and press Delete on your keyboard. You can always re-add the loyalty widget from the Loyalty page settings.