# Shipping Progress Bar Integration
## Overview
Progress bars visually show customers their progress toward rewards like free shipping in an shipping threshold test. They motivate customers by showing "how close am I to unlocking this benefit?" and help drive larger cart values.
{% hint style="warning" icon="traffic-light-go" %}
**Before you start:**
* You'll need the Intelligems JavaScript snippet added to your theme to render the Intelligems shipping progress bar. If you haven't done so, see our integration guide [here](https://docs.intelligems.io/getting-started/adding-intelligems-script-to-your-theme).
* Progress Bars require a threshold rate to function.
{% endhint %}
## Configuration
#### Basic Setup
* **Dynamic progress text (unlock prompt):** The sentence that will be rendered when the threshold has not yet been met. Ex. "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 met the threshold. Ex. "You have unlocked free shipping!".
#### Color & Style
Styling options available include:
* **Bar style:** Choose from three bar style options.
* **Checkpoint classic:** Best for multi-tier setups.
* **Floating milestones:** Compact layouts with 2-3 tiers.
* **Minimal:** For single-tier setups like free shipping.
* **Bar 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.
## 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:
```liquid
```
Not sure where to add the above snippet? Use our Claude prompt here!
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: \\
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.
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 `` or ``, 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.
## Using the Progress Bar With Your Existing Shopify Rates
You can use the Intelligems Shipping Progress Bar with your existing Shopify rates using an Intelligems Offer. You'll simply add the code snippet above to your Shopify theme and configure the visual appearance of the progress bar in the Intelligems app. Then in the Intelligems app, create a new free shipping offer, ensure you opt for the offer to be "powered by Shopify", and save your offer.
