Accessing Widget Customization

Through Ako Marketing Admin Panel

  1. From Ako Marketing admin, go to Settings > Accounts & Widgets > Loyalty widget > Set up > Install > Toggle the Ako Loyalty Widget to On in the App Embeds panel.

Under the Ako Loyalty Widget panel, you will find two main sections:

  • Widget Button

  • Widget Style

Customizing the Widget Button

The widget button is what your customers will click to open your loyalty program interface. Here's how to customize it:



Button Type and Placement

  • 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")

Button Position Fine-Tuning

  • Padding: Adjust the button's position precisely with:

    • Side padding: Adds space horizontally

    • Bottom padding: Adds space vertically

Button Appearance

  • Button Icon: Select the icon style:

    • Supported formats: PNG, JPG, or SVG

    • Dimensions: 1:1 ratio

    • File size: Less than 50KB

    • Default Icon: Use the system's default image

    • Custom Icon: Click +Upload to add your own icon

  • 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.

Customizing the Widget Style

The widget style controls how the loyalty program interface looks when opened. Here's how to customize it:

Shape and Structure

  • 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

Enabling Your Customized Widget

Once you've completed all customizations:

  1. Toggle the Ako Loyalty Widget to On in the App Embeds panel

  2. Click Save in your theme editor

Your Loyalty Widget will now appear on your storefront with the updated design and text.

For additional support, contact us at service@akohub.com or via the chat in the bottom-right corner of the Ako Marketing admin panel.