---
title: "Edit a Purchase Progress Bar"
slug: "edit-a-purchase-progress-bar"
description: "Insider One's Purchase Progress Bar element shows shoppers how much more to add to their cart for a reward, across up to four editable thresholds."
tags: ["free shipping", "web template"]
updated: 2026-09-02T18:07:15Z
published: 2026-09-02T18:07:15Z
canonical: "academy.insiderone.com/edit-a-purchase-progress-bar"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://academy.insiderone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit a Purchase Progress Bar

The Purchase Progress Bar shows visitors how close they are to a reward, such as free shipping, and how much more they need to add to their cart to earn it. The bar fills as the cart value grows, so visitors always see what is left to reach the next milestone.

You edit the element on the [**Design**](/v1/docs/design-a-web-template) tab of the template editor. The element has two pages:

- **Default State**, which visitors see while they are still working toward the reward.
- **Success State**, which they see once they reach it.

## How the Purchase Progress Bar works

Select **Purchase Progress Bar** in the **Elements** list to open its settings.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-SB7A0BYU.png)

From there, you can:

- Turn **Add Image**, **Progress Bar**, **Multiple Thresholds**, and **Show Title** on or off.
- Set **Number Of Thresholds** to choose how many milestones the bar shows. You can add up to four and customize each one separately.
- Enter a **Before Success Link**, the URL visitors go to when they click the bar before they reach the target threshold.

The link a click opens depends on where the visitor is in the journey. Clicks before the target threshold open the URL in **Before Success Link**. Clicks after the visitor reaches the threshold open the URL in **Success Link**, which you set in the **Success State**.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-9F7E1DWY.png)

To style the bar itself, select **Progress Bar** in the **Elements** list. The style settings include the color the bar turns once it fills, which is what makes progress readable at a glance.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-ZG2EFY2T.png)

## Customize each threshold

When **Multiple Thresholds** is on, every milestone appears in the **Elements** list as its own folder, from **Threshold 1** to **Threshold 4**, each with its own text element. Edit them one by one so the message matches the stage the visitor is at.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-35A5CKR9.png)

For each threshold, set the following:

- The remaining amount that triggers the threshold.
- The sentence visitors see when they reach it.
- The remaining amount they still need to reach the next one.

Use the **@Amount** placeholder to pull the remaining value into the copy, as in "You're only @Amount away from free shipping." The placeholder updates automatically, so you write the sentence once, and it stays accurate for every cart value.

## Edit the Success State

Select **Success State** in the **Pages** list to edit what visitors see after they pass the final threshold. This page holds the **Success Threshold**, the **Progress Bar**, and the text element that carries your reward message, for example, "You've earned free shipping for this purchase."

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-BC1RANFN.png)

Write that message, then add the **Success Link**, the URL visitors go to when they click the completed bar. A link to the cart or checkout page keeps the momentum going while the reward is fresh.

Once both states are ready, preview the template on the **Preview** tab to check every threshold message, then select **Save**.