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.
Last updated
Learn how to set up the Milestone bar for your Milestone rewards campaign to show customers how close they are to earning rewards.
Last updated
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.
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.
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.
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.
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.
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.
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.
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.
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.