AOV.ai Help Center
AOV.ai Help Center
AOV.ai Help Center
  • Welcome
  • 🚀Getting started
    • Introduction
  • 🛍️Promotion campaign
    • Buy X Get Y
    • Gift with Cart Value
    • Gift with Collection Value
    • Gift with Quantity Purchase
    • Volume Discount
    • Order Goal
      • How to set up Order Goal campaign
      • Promote Order Goal with Announcement Bar
    • Shipping Goal
    • Milestone Rewards
  • 🖼️Widgets
    • Introduction
    • Deal of the Day
    • Pop-up
    • Congrats Bar
    • Deal Badge
    • Promotion Card
    • Volume Table
    • Tiered Reward Box
      • How Does the Tiered Reward Box Help Boost Your Store's AOV?
    • Floating button
    • Milestone bar
  • 🗝️SETTINGS
    • Pop-up hidden time
    • Specific Link
  • 📑Knowledge Hub
    • Understand AOV
    • Gift with purchase in BFCM
      • Where Should Promotional Campaigns Appear During BFCM?
    • Design BFCM gift with purchase widget
    • Combine Multiple Promotional Campaigns
      • Gift with Cart Value + Buy X Get Y (BXGY)
      • Gift With Quantity Purchase + Volume Discount
      • Gift with Collection Value + Volume Discount
      • Gift with Quantity Purchase + Buy X Get Y
      • Buy X Get Y + Volume Discount
    • Test AOV Free Gift without going live with your store
  • 🟠OTHERS
    • Translation
  • ❓FAQs
  • 🔐Legal materials
    • Privacy Policy
  • 💸Plan and Billing
    • Revenue (generated by app) limit
Powered by GitBook
On this page
  • What is the Milestone Bar?
  • How to set up
  1. Widgets

Milestone bar

Learn how to set up the Milestone bar for your Milestone rewards campaign to show customers how close they are to earning rewards.

PreviousFloating buttonNextPop-up hidden time

Last updated 12 days ago

Who can use this feature?

This feature is available for all AOV Free Gift users on any plan. At least one active Milestone campaign must be created to use this widget.

What is the Milestone Bar?

The Milestone Bar is a real-time progress widget displayed on product pages. It helps boost conversion by motivating shoppers to unlock tiered rewards such as discounts or free shipping. It reacts instantly as customers add more to their cart and supports up to 3 milestones per campaign.

How to set up

To give merchants full flexibility and control, the Milestone bar feature is configured in two distinct places, each serving a different purpose:

  • Campaign Setting (Content setup)

This section lets you define the message content shown inside the Milestone bar for each campaign. It’s campaign-specific because different campaigns may have different offers, tones, or messages.

  • Widget Styling (Appearance Setup)

This section controls how the floating button looks across your storefront, regardless of campaign. It ensures consistent design and branding across your store.

Step 1: Navigate the Milestone bar on Milestone rewards setting screen

Select the button Display setting on the bar, then you will see the Widget position setting. Click Go to theme and choose the position you want to show Milestone bar on the storefront > Save to activate the widget.

Step 2: Customize the Milestone bar content

Edit the text shown before and after each milestone using smart variables:

  • Title after all milestones reached: This message appears when a shopper has unlocked the final reward tier. Use it to celebrate the moment and confirm the reward.

Recommended variable:

  • {{nearest_reward}} – auto-fills the reward name from the highest milestone achieved.

  • Title before reaching each milestone: These messages display when a customer is still working toward the next reward. It helps build anticipation and urgency. They update dynamically as the customer gets closer to each tier, showing how much is left and what they can earn.

Recommended variables:

  • {{item_left}} or {{amount_left}} – shows what’s remaining

  • {{nearest_reward}} – shows the reward name of the next milestone

  • Reward labels: These labels appear below the progress bar and represent the reward tied to each milestone. You should enter a short reward label - this will appear directly under the milestone icon (e.g. “10% OFF”, “Free Shipping”, “$15 OFF”).

Be specific and keep it short — shoppers should recognize rewards instantly.

After setting all the content for the Milestone bar, click Save to confirm the update.

Step 3: Style the Milestone bar widget

From the AOV Free Gift app sidebar, go to Widget styling. In the Offer promotion section, find Milestone bar > Click Customize to start setting up.

Step 4: Choose a layout style

You’ll see two layout options for the progress bar:

  • Layout 1: Clean linear design with milestone icons and a highlighted progress marker.

  • Layout 2: Compact icon-based layout displaying reward types only.

Select the layout that fits your site’s visual flow.

Step 5: Customize Widget theme

Themes help your widget match the look and feel of your brand. You can choose from 8 preset themes:

  • Basic, Forest, Ocean, Twilight

  • Spring, Summer, Midnight, Dusk

Click any theme to apply it instantly. You will see live changes in the mobile Preview panel on the right.

Step 6: Customize Widget style

General

By default, Gradient background is enabled. You can uncheck it for a flat color style.

Customize the color for Title of the bar, Icon/text before reaching and Progress bar color.

Final step: Preview and save

Check the Preview section on the right hand of the setting screen to see if you are satisfied with the widget style yet and make other necessary changes. Then, click Save the campaign and see how it looks on the storefront.

The Milestone Bar is one of the most effective tools in AOV Free Gift to gamify the shopping experience and increase conversions. By setting up the campaign logic and styling the widget visually, you create a seamless experience that turns small purchases into big wins for both your customers and your store.

🖼️