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.

FAQ: Loyalty Widget Customization

How do I enable the loyalty widget on my Shopify store?

To make your widget visible, navigate to the Ako Marketing admin panel, go to Settings > Accounts & Widgets > Loyalty widget > Set up > Install, and toggle the Ako Loyalty Widget to "On" within your Shopify Theme Editor's App Embeds panel. Don't forget to click "Save."

Can I use my own brand's icon for the widget button?

Yes! In the Widget Button customization settings, select "Custom Icon" and click "+Upload." For the best results, use a PNG, JPG, or SVG file with a 1:1 aspect ratio and a file size under 50KB.

What is the difference between "Icon only" and "Icon and text"?

The "Icon only" setting shows a minimal circular button with just your chosen icon. "Icon and text" expands the button to include a label, such as "Rewards" or "Loyalty," which can help increase customer engagement by making the button's purpose clearer.

How can I adjust the exact position of the widget button?

Beyond the standard placements (Bottom Left, Bottom Right, etc.), you can use the "Side padding" and "Bottom padding" settings to fine-tune the button's position. This ensures the widget doesn't overlap with other site elements like "Back to Top" buttons or chat bubbles.

Will my changes appear on my storefront immediately?

While you can see a real-time preview in the Ako Marketing admin panel, the changes will only go live on your storefront once you have toggled the widget to "On" in the App Embeds panel and saved your theme settings.

Need Further Assistance?

If you have questions about matching the widget to your brand theme, email us at service@akohub.com or use the live chat in the bottom-right corner of the Ako Marketing admin panel.