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.
How to customize the Loyalty Tab
1. In your Marsello admin, go to Display > Customer experience> Online > Online widget
📝 Note: The Loyalty Widget has been updated. If you are still seeing the old design options, please click this link to upgrade to the new widget.
2. Click on the Tab 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 where you can add an icon and/or text and sits on the edge of your online store.
Circle (middle example): This tab is a small circle where you can add an icon and floats on your online store. Note: You cannot add text on this tab style.
Floating (bottom example): This tab is a rectangle 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 the Include icon on the 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
1. Click Tab Font
2. The loyalty tab uses the same font as the loyalty widget. If you would like to use other Fonts, you'll need to untick the box that says 'Use same font as widget' so that the options for other fonts will show.
📝 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.
3. Click Save & Publish
How to select the tab background-color
1. Click Theme Color
2. 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.
3. Click Save & Publish
Choose the position of the tab on your online store
1. Click Tab Position
2. Click Right Side to open the drop-down
3. Select your preferred tab position
4. Click Save & Publish
💡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)
1. Click Tab Visibility
2. Click None to open the drop-down
📝 Note: By default, your loyalty tab will be set to None on all devices.
3. Select from None, Desktop and Mobile, or Desktop Only
📝 Note: If you select None this will create a tabless loyalty program.
4. Click Save and Publish
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 log in to check their points balance, redeem rewards, and more.