🔓 Loyalty Tab Design Customization is unlocked on the Marsello Pro Plan
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 do I hide the loyalty tab on a mobile phone?
- Can I use an icon on my loyalty tab instead of text?
- Can I move my loyalty tab to a different position on my online store?
How to customize the Loyalty Tab
1. In your Marsello admin, go to: http://app.marsello.com/Manage/Widget/
📝 Note: Marsello is currently in the process of transitioning to the new loyalty widget & tab design screens. If you are still seeing the old design options, please browse to the link above.
2. Click on the Tab tab
Here, you can customize the design of your Loyalty Tab.
How to select a tab style
3. Click Tab Style
4. Click Circle to open the drop-down options
5. 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.
📝 Please note: If you want to create a tabless program, please skip ahead to the Tab Visibility section.
6. Click Save & Publish
How to customize the tab content
7. 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 (note there is a 16 character limit for text)
> Select the checkbox Include icon on Tab Icon (Optional)
> Click Choose File to upload an icon image (Optional)
💡Quick tip: The recommended size for the icon image is 80px width by 80px height. To replace the icon with another icon, simply click Choose File and select a new image from your device.
9. Click Save & Publish
Customize the tab font
10. Click Font
11. 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.
12. Click Save & Publish
How to select the tab background color
13. Click Theme Color
14. 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.
15. Click Save & Publish
Choose the position of the tab on your online store
16. Click Tab Position
17. Click Bottom Right to open the drop-down
18. Select your preferred tab position
19. 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)
20. Click Tab Visibility
21. Click Desktop & Mobile to open the drop-down
📝 Note: By default, your loyalty tab will show on all devices.
22. Select the from device options that you would like the loyalty tab to be
📝 Note: If you select None this will create a tabless loyalty program.
- Learn more about creating a tabless program with Shopify eCommerce
- Learn more about creating a tabless program with BigCommerce
23. Click Save & 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 login to check their points balance, redeem rewards and more.