# Milestone bar

{% hint style="success" %}

#### 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.
{% endhint %}

### 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

{% hint style="info" %}
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.
{% endhint %}

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FADBM4oYQZ3QY9dS7EKTq%2Fimage.png?alt=media&#x26;token=fa63e43f-5c95-419d-b4e2-1b2208835fd1" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
**Recommended variable:**

* `{{nearest_reward}}` – auto-fills the reward name from the highest milestone achieved.
  {% endhint %}

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

{% hint style="success" %}
**Recommended variables:**

* `{{item_left}}` or `{{amount_left}}` – shows what’s remaining

* `{{nearest_reward}}` – shows the reward name of the *next milestone*
  {% endhint %}

* 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”).

{% hint style="success" %}
Be specific and keep it short — shoppers should recognize rewards instantly.
{% endhint %}

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2Fig9yN4gCod035SrVEP8Q%2Fimage.png?alt=media&#x26;token=63a7b26d-28be-499a-b65c-0a87b5d22025" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2Fiezd9ix1H4e7IomBzgnM%2Fimage.png?alt=media&#x26;token=235d3e21-69e6-489b-a043-a443c2b92eb2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FshOTCD3RUY2iBA6he5V7%2Fimage.png?alt=media&#x26;token=bc80828e-45be-4d0e-94a1-b348d349a7c0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FmA39UG7LksfLAh7XyHR9%2Fimage.png?alt=media&#x26;token=9fa67d62-aeed-46cd-b90d-da679dbdfcea" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1289686769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMo81Ak7Ig0Z6bLRmWpSA%2Fuploads%2FpcgwrS9WxuXoUTRXiACJ%2Fimage.png?alt=media&#x26;token=86bd538f-d81e-4663-b152-2ce37a1acca8" alt=""><figcaption></figcaption></figure>

#### 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 S**ave** 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.