Last updated: 2024-12-20
Estimated reading time: 15 minutes
Before you start
✅ Loyalty program is available in our Gold plan(US$29/month) and above. Please navigate to Service Plans from the Ako Marketing panel to ensure your current plan is on Platinum or above.
✅ If you haven't installed Ako Marketing App, click here to install it and start your 14-day free trial.
To customize the appearance of your loyalty widget:
Go to Theme Editor > App Embeds.
Under the Ako Loyalty Widget panel, you will find two main sections:
Widget Button
Widget Style
Here is a step-by-step guide for each customization area:
1. Customize the Widget Button
Type: Choose between Icon only or Icon and text for your Loyalty Widget button.
Placement: Position the widget button on your storefront. Options include:
Bottom Left
Bottom Right
Center Left
Center Right
Text: Enter the text you want to display on the button (e.g., "Rewards").
Padding: Adjust the button's position precisely with:
Side padding: Adds space horizontally.
Bottom padding: Adds space vertically.
Button Icon: Select the icon style:
Default Icon: Use the system's default image.
Custom Icon: Click +Upload to add your own icon.
Supported formats: PNG, JPG, or SVG
Dimensions: 1:1 ratio
File size: Less than 50KB
Button Colors:
Button: Customize the button background color.
Text: Set the color for the button text.
✅ Use the real-time preview on the right to see the changes instantly.
2. Customize the Widget Style
Widget Radius: Adjust the roundness of the widget corners (e.g., 8px).
Button Radius: Set the corner radius for the button (e.g., 40px).
Header Colors:
Header Background: Choose the color for the widget header.
Header Text: Set the text color in the header.
Tab Background: Define the color of the tab area.
Tab Text: Customize the text color for the tab.
General Colors:
Primary Color: Set the primary theme color for the widget.
Background: Define the widget's overall background color.
Card & Footer Background: Adjust the color for cards and the footer section.
Icon Color: Choose the color for icons displayed in the widget.
Coupon Color: Set the background color for coupons.
Coupon Button Hovering: Define the color for buttons when users hover over them.
3. Text Display
By default, the Loyalty Widget is in English. To translate or edit the display text:
Click Edit Text Display under the Text Display section.
Customize the text for the following panels:
Visitor Panel
Rewards Panel
VIP Tiers Panel (skip if the VIP Program is not enabled)
Account Panel
Click Save when you're done.
4. Enable the Customized Widget
Once you’ve completed all customizations:
Toggle the Ako Loyalty Widget to On in the App Embeds panel.
Click Save in your theme editor.
Your Loyalty Widget will now appear on your storefront with the updated design and text.
Next Steps:
If you'd like to configure the VIP Program or Rewards System, check out our guides: