# Progress Bar

## Overview

Progress bars visually show customers their progress toward rewards like discounts or free shipping in an Offer Personalization or Offer Test. They can also be used in a Shipping Test. They motivate customers by showing "how close am I to unlocking this discount?" and help drive larger cart values.

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FubE9EJRhh3fw2GU0KSXY%2FScreenshot%202026-04-06%20at%2012.18.07%E2%80%AFPM.png?alt=media&#x26;token=2ff3c023-dc15-4dbb-9ef5-2662da483429" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="traffic-light-go" %}
**Before you start:**

* Progress Bars require a minimum purchase requirement (dollar amount or quantity) to function.&#x20;

  * This must be manually set for Amount off products, Amount off order, and Free gift offers.&#x20;

  <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-588fb252e20f2079078e8d72ef614363cd97d6d3%2FAmount%20off%20products%20-%20Offer%20settings%20-%20expanded.png?alt=media" alt=""><figcaption></figcaption></figure>

  * On Quantity discount, Threshold discount and Free shipping Offers, Progress bars are automatically available to use.
    {% endhint %}

## Configuration

### **Basic Setup**

* **Dynamic progress text (unlock prompt):** The sentence that will be rendered when there are discount tiers to unlock. It will render the next tier that the customer is eligible for. Ex. "Buy 2 additional packs to get 10% off" or "Spend $10 more to get free shipping".
* **Dynamic progress text (reward text):** The sentence that will render in place of the "Unlock Prompt" message when a user has unlocked all tiers. This will also render below the progress bar along with the "Unlock Prompt" message for each individual tier accomplishment. Ex. "Congrats! You've got 10% off!" or "You have unlocked free shipping!".
* **Breakpoint text:** The sentences that will show on hover of each tier breakpoint in the progress bar. Ex. "Buy 3 to get 10% off" or "Spend $50 to get free shipping."
* **Icons:** The icons shown at the breakpoint before and after it has been achieved.&#x20;

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-9f4901ee56d4567b553acb11efb6ef40a75a6247%2FQuantity%20button%20config.png?alt=media" alt=""><figcaption></figcaption></figure>

### **Dynamic Variables**

Use dynamic variables to populate progress bar text automatically — like the amount remaining or discount amount. Type two brackets or use the field menu on the right to insert them.

**Example Usage:** "Spend {Amount remaining} more to unlock {Discount amount} off!"

#### Discount Variables

* `{Amount remaining}`: Show remaining amount needed
* `{Discount amount}`: Display discount value

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FseN8wbj18mk38bSQMhwk%2FScreenshot%202026-04-06%20at%201.34.13%E2%80%AFPM.png?alt=media&#x26;token=afb39320-cfd6-4b6a-aebf-0a1d9e292f58" alt=""><figcaption></figcaption></figure>

### **Color & Style**

Styling options available include:

* **Bar style:** Choose from three bar style options.

  * **Checkpoint classic:** Best for multi-tier setups.

  <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FXMnq7PsDGqfTiRvWAaWQ%2FScreenshot%202026-04-06%20at%201.40.06%E2%80%AFPM.png?alt=media&#x26;token=7b8105e4-9808-4514-97f1-50415cba0732" alt=""><figcaption></figcaption></figure>

  * **Floating milestones:** Compact layouts with 2-3 tiers.

    <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2F2bzesdH2xSe6znfWlCHF%2FScreenshot%202026-04-06%20at%201.38.27%E2%80%AFPM.png?alt=media&#x26;token=f81c9f7c-9d3b-4f7c-a137-6224b3b61874" alt=""><figcaption></figcaption></figure>
  * **Minimal:** For single-tier setups like free shipping.

    <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FgQtOwGc5rmxF8uXrqD6A%2FScreenshot%202026-04-06%20at%201.40.28%E2%80%AFPM.png?alt=media&#x26;token=66b33bdf-3a89-4afc-9e4c-475d2028c42e" alt=""><figcaption></figcaption></figure>
* **Bar & Breakpoint appearance:** Control the thickness, corner radius and size of bar elements.
* **Colors:** Control the colors for all fields.
* **Typography:** Control the font sizes and styles for each text field.

{% hint style="success" %}
You can also customize the look of your progress bars in [**Global Styles**](https://docs.intelligems.io/general-features/global-styles) (left menu) to keep them consistent across all your offers. You can adjust bar styles, bar colors, text options, and set separate styles for desktop and mobile.&#x20;
{% endhint %}

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FjQxzLz7QzydwI5DoFaen%2FScreenshot%202026-04-06%20at%2011.22.09%E2%80%AFAM.png?alt=media&#x26;token=e0b595b9-efeb-44de-87d7-c262775e4add" alt=""><figcaption></figcaption></figure>

## Integrating the Progress Bar

Paste the following code snippet into your Shopify theme code, in the theme file that renders your cart in order to add a Progress Bar to a Test or Personalization. This file may be called something like `cart.liquid`, `slideout-cart.liquid`, etc. We recommend adding this code snippet at the top of the section that relates to your cart:

```html
<ig-progress-bar></ig-progress-bar>
```

<details>

<summary>Not sure where to add the above snippet? Use our Claude prompt here! </summary>

Instead of guessing which file to edit in your Shopify theme, you can give Claude AI access to your live store. Claude then inspects the actual cart HTML structure in real time, identifies your theme and version, and tells you the exact file and location to paste the Intelligems snippet.

This works for any Shopify theme — Horizon, Dawn, Debut, Prestige, Impulse, Empire, custom themes, etc.

#### Prerequisites

1. A [Claude.ai](http://claude.ai) account (Pro plan recommended — needed for browser extension access)
2. The Claude browser extension installed in Chrome
3. Access to your Shopify store (you need to be able to open the storefront in a browser tab)

#### Step-by-Step: How to Use Claude to Find Your Snippet Location

1. Open the **Claude extension** in your Chrome browser by clicking the Claude icon in your browser toolbar.
2. Copy the prompt in 2b (including i-v) below and paste it into Claude.
   1. Use the prompt below verbatim. Do not modify it. It is engineered to give Claude all the context it needs to inspect your store and return a precise, actionable answer.
   2. **Prompt:** You are a senior Shopify developer and Intelligems integration specialist. I have my Shopify storefront open in this browser tab. Please do the following:
      1. Inspect the current page using developer tools. Run JavaScript to detect: the Shopify theme name and version (from window\.Shopify.theme), the cart drawer structure (look for cart-drawer-component, cart-drawer, or equivalent custom elements), and the full parent-child DOM hierarchy of the cart — specifically the container that holds the cart header/title at the top, the scrollable items list in the middle, and the totals/checkout area at the bottom.
      2. Based on what you find, identify the exact Shopify Liquid file that renders the cart (e.g. sections/header.liquid, sections/cart-drawer.liquid, snippets/cart.liquid, etc.).
      3. Tell me exactly where inside that file I should paste this snippet: \<ig-progress-bar>\</ig-progress-bar>
      4. CRITICAL placement requirement: The snippet must appear at the TOP of the cart drawer — directly below the cart title/header and ABOVE the list of cart items. Do NOT place it near the totals, subtotal, or checkout button area at the bottom. The goal is for the progress bar to be the first thing a shopper sees when the cart opens.
      5. Be specific: name the file, describe what CSS class or HTML element to search for in that file, and whether to paste the snippet before or after it. Also explain why that location is optimal. If you see anything that might cause issues (e.g. existing progress bars, conflicting elements), flag it.
3. Hit Enter and wait. Claude will inspect your live store DOM, detect your theme name and version, identify the cart structure, and output the exact file name and placement.
4. Go to Shopify Admin → Online Store → Themes → ··· → Edit code. Open the file Claude named, find the exact line it mentioned, and paste the snippet there.
5. Save the file and reload your store. While previewing a test or personalization that has a progress bar, add a product to the cart and verify the progress bar appears in the cart drawer.

</details>

If you already have a progress bar in your cart, remember to comment the existing progress bar out to avoid showing two!

{% hint style="warning" icon="triangle-exclamation" %}
**Heads up:** If your theme uses `<ig-volume-progress-bar-widget></ig-volume-progress-bar-widget>` or `<ig-shipping-progress-container></ig-shipping-progress-container>`, those snippets still work — no changes needed. We've since updated to a single unified snippet to streamline installation.
{% endhint %}

#### Integrating with Rebuy Carts

If you use Rebuy for your slide out cart, you'll need to follow these steps to add the Offer progress bar.

1. Create a Rebuy custom smart cart template. Follow [this](https://help.rebuyengine.com/en/articles/6120362-how-to-use-a-custom-template-with-smart-cart) article for instructions.
2. Edit the template to replace the Rebuy progress bar with the Intelligems progress bar snippet. See above.