Loyalty tab customization
Add a loyalty tab to your online store to help customers engage with your loyalty program.
The loyalty tab is designed to give your customers visibility of your loyalty program, to encourage them to buy with you over the competition, and to give your loyalty program customers a place to view their points balance, see the ways they can earn points, and redeem points for rewards. You can customize this loyalty tab to match your store's brand.
In this article:
- How to customize the loyalty tab
→ Select a tab style
→ Customize the tab content (add an icon and customize text)
→ Customize the tab font
→ Select the tab background color
→ Choose the position of the tab on your online store
→ Choose the tab visibility (displayed on desktop, mobile or both)
- How it works – Your customers' experience
Common questions this article will help answer:
How to customize the Loyalty Tab
Here, you can customize the design of your Loyalty Tab.
How to select a tab style
1. Click Tab Style
2. Click Circle to open the drop-down options
3. Click the tab style you would like on your online store
- Resting (top example): This tab is a rectangle that you can add an icon and/or text to and sits on the edge of your online store.
- Circle (middle example): This tab is a small circle that you can add an icon to and floats on your online store. Note: You cannot add text on this tab style.
- Floating (bottom example): This tab is a rectangle that you can add an icon and/or text to and floats on your online store.
📝 Note: If you want to create a tabless program, please skip ahead to the Tab Visibility section.
4. Click Save & Publish
How to customize the tab content
1. Click Tab Content
📝 Note: Depending on what Tab Style you selected, will determine the content options that you can include on your Loyalty Tab.
- IF you selected the Circle Tab Style
> Tab Text is not available with this Tab Style.
> Select the checkbox next to Include icon on tab Tab Icon
> Click Choose File to upload an icon image
💡Quick tip: The recommended size for the icon image is 80px width by 80px height.
- IF you selected the Floating or Resting Tab Style
> Customize the Tab text to prompt your customers to open their loyalty profile (up to 16 characters only)
> Select the checkbox Include icon on Tab Icon (Optional)
> Click Choose File to upload an icon image (Optional)
💡 Quick tip: To replace the icon with another icon, simply click Choose File and select a new image from your device.
2. Click Save & Publish
Customize the tab font
- Click Font
- By default, the loyalty tab uses the same font as the loyalty widget.
OR If you want to change the font, simply un-tick the Use same font as widget checkbox and then click Open Sans to open the drop-down to choose a different font.
📝 Note: If your brand uses a custom Google Font, click Use Google Font, then follow these instructions on how to add your custom font to the loyalty tab.
- Click Save & Publish
How to select the tab background color
- Click Theme Color
- Add your store's brand color by entering your hex color code or simply click on the color picker to select your color.
💡Quick Tip: Not sure what your store's hex color code is? HTML Color Code tool can help you find it easily.
- Click Save & Publish
Choose the position of the tab on your online store
💡Quick Tip: If you have other tabs on your online store already, for example a live chat icon, choose a position that is completely separate from the other tab.
Choose the tab visibility (displayed on desktop, mobile or both)
- Click Tab Visibility
- Click None to open the drop-down
📝 Note: By default, your loyalty tab will be set to None on all devices.
- Select from None, Desktop and Mobile, or Desktop Only
📝 Note: If you select None this will create a tabless loyalty program.
How it works – Your customers' experience
On your online store, your customers will see your customized loyalty tab. They can then click on the Loyalty tab to sign-up or login to check their points balance, redeem rewards and more.