🔓 Widget Design Customization is unlocked on the Marsello Pro Plan
📝 Note: This loyalty widget design version is only available for Shopify, Vend & Kounta integrations. Coming soon for BigCommerce.
The loyalty widget is a place for your customers to interact with your loyalty program and also access any discount codes sent via marketing emails. Here they can sign-up, check their points balance, earn more points and claim rewards.
In this article:
- How to customize the loyalty widget
→ Select a theme color
→ Choose a layout (and add a header image)
→ Customize the widget font
→ Customize or translate your loyalty widget text
- How it works – Your customers' experience
Common questions this article will help answer:
- How do customer(s) know how many loyalty points they have?
- How do customer(s) access their coupon/discount codes?
- How do I add my store's logo to the loyalty widget?
How to customize the loyalty widget
1. In your Marsello admin, go to Loyalty > Loyalty Widget
2. Click on the Widget tab
Here, you can customize the design of your loyalty widget.
How to select a theme color
3. Click Theme Color
4. 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.
5. Click Save & Publish
Choose a layout (and add a header image)
6. Click Layout
7. Under Layout Type, click Center to open the drop-down
8. Select the Layout type that best suits your store.
- Side panel (top example): This layout has a smaller image option, slides in from the side, sits on the side of the page.
- Center (middle example): This layout has a large image option, rounded corners & opens in the middle of the page.
- Floating panel (bottom example): This layout has a smaller image option, slides in from the side, has rounded corners & floats on the side of the page.
9. Click Choose File to upload an image
To make sure the images are optimized to the widget layout type please use the suggested size dimensions:
- Center layout: 1000px width by 650px height
- Floating panel layout: 500px width by 200px height
- Side panel layout: 500px width by 200px height
💡 Quick tip: Need help re-sizing your image? Try this free online tool Photoresizer.com.
📝 Note: To replace the image with another image, simply click Choose File and select a new image from your device.
10. Click Save & Publish
Customize the widget font
11. Click Font
12. Click Open Sans to open the drop-down
13. From the font list, select your chosen 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 widget.
14. Click Save & Publish
Customize or translate your loyalty widget text
15. Click Customize text / Translation
16. Click Go to text editor to open the text customization page
17. Next to Customize text for: click Rewards tab to open the drop-down
18. Click the name of widget page you want to edit
- Rewards tab: This page lists your rewards that your customer can earn points towards and redeem.
- Earn tab: This page lists the different ways that your customers can earn points.
- View coupon page: This page displays the customer's unique discount code.
- On your birthday page: This page collects the customer's birthday.
- Complete profile page: This page collects the customer's additional details e.g. mobile number, gender & birthday.
- Claim referral coupon page: This page is where the referred friend enters their details (name and email address) to be able to receive their unique discount code.
- Get referral link page: This page is where the customer can access their unique referral link that they can share with their friends and family.
19. Edit (or translate) the text to your preferred content
20. Click Save & Publish
📖 Learn more: Customizing/translating your loyalty widget text
How it works – Your customers' experience
How customers access their loyalty profile online:
When visitors or customers are on your online store they'll be able to click on your loyalty tab (if enabled) to sign-up or login to their loyalty profile on your loyalty widget.
Or after they've completed their online order, they will receive your loyalty points earned email (if enabled). On this email your customers can click through to see their loyalty profile on your loyalty widget.
How customers access their loyalty profile in-store:
When your customers earn loyalty points for their order, they will receive your loyalty points earned email (if enabled). On this email your customers can click through to see their loyalty profile on your loyalty widget.
What customers can do on your their loyalty profile:
Here they'll be able to see the rewards that they can earn points towards and also complete actions like liking on social media, or completing their profile to earn more points.
📝 Note: If you are an omni-channel retailer, any time that the customer clicks to open their loyalty profile it'll automatically open your loyalty widget on your online store.