Rewards & progress bars
Build a spend-threshold reward tracker in the Llama Cart — free-shipping bars, milestone tiers, icons, tooltips, and visibility rules.
Rewards are the spend-threshold tracker inside the Llama Cart. They show shoppers how close they are to a perk — free shipping, a free gift, or a discount — and nudge them to add a little more to qualify. You configure everything from Content > Rewards in the Customizer.
This guide covers the layouts, colors, reward tiers, dynamic copy, icons, tooltips, visibility rules, and the subtotal exclusions — plus the edge cases that trip merchants up.
What rewards do
A reward is a spend goal. You set a minimum cart subtotal (for example $75), write the message shown before the shopper reaches it, and the message shown after. The cart renders a progress bar that fills as the cart subtotal climbs toward the goal. Stack several goals and the bar becomes a milestone tracker with markers for each tier.
Rewards are off by default. A new Llama Cart ships with the Rewards block hidden, so nothing appears on the storefront until you enable it. Turn it on with the Free Shipping toggle at the top of the Content > Rewards tab.
A few things to keep in mind before you start:
- The bar is a visual tracker only. Showing a free-shipping reward does not create a free-shipping discount in Shopify — see Edge cases.
- Progress is measured against the cart subtotal, in the shopper's active currency.
- Reward thresholds are entered per currency, so each market you sell in needs its own amount.
Layout
Open Content > Rewards and pick a Layout type. There are two options.
| Layout | What it renders | Notes |
|---|---|---|
| Progress | A horizontal progress bar that fills toward the next unmet tier. With more than one tier, milestone markers are positioned along the bar. | Default. Supports multiple tiers, icons, and tooltips. |
| Collapsable | An accordion-style block that shows only the first reward. | Use only if you have a single reward and want a compact, expandable presentation. |
The Collapsable layout displays only the first reward tier — every other tier you add is ignored on the storefront. If you are running multiple milestones (for example free shipping at $50 and a free gift at $100), keep the layout on Progress or shoppers will never see the higher tiers.
Layout differences between cart versions
The Layout type dropdown only appears on the Classic (v1) cart. The Modern (v2) cart always uses the Progress layout, so the dropdown is hidden there — there is no Collapsable option on v2.
Text positioning
The Text positioning dropdown controls where the reward message sits relative to the bar:
| Value | Effect |
|---|---|
| Top | Message renders above the progress bar. |
| Bottom | Message renders below the progress bar. Default. |
The Text positioning dropdown is hidden when the layout is Collapsable — the accordion presentation manages its own text placement, so the setting does not apply.
Colors & spacing
The Rewards tab exposes a small set of style controls. Most are number inputs or color pickers with sensible defaults.
| Setting | Default | Range / type | What it does |
|---|---|---|---|
| Progressbar color | #000000 | Color picker | The fill (success) color of the progress bar as it advances. |
| Collapsable background color | #000000 | Color picker | Background color of the Collapsable accordion. Classic (v1) only — hidden on the Modern (v2) cart. |
| Margin top (px) | 12 | Number, 0–10000 | Space above the rewards block. |
| Margin bottom (px) | 8 | Number, 0–10000 | Space below the rewards block. |
Collapsable background color is hidden on the Modern (v2) cart because v2 never uses the Collapsable layout. You will only see this control on Classic (v1).
Adding milestones (reward tiers)
Each reward row is one spend goal. Add a row, open it, and fill in the fields below. Add more rows to build a multi-tier bar.
Add a reward
In Content > Rewards, add a new reward. It opens with the default copy and the Free Shipping name pre-filled, ready to edit.
Name the reward
Set the Reward short name (for example Free Shipping, Free Gift, or 10% Off). This is your internal label for the tier.
Set the threshold per currency
In Threshold amount, type the minimum spend (for example 75) and pick the currency (for example USD). The amount is stored as a map of currency to value — one entry per currency. Repeat for every currency you sell in. A tier with no amount for the shopper's active currency simply never qualifies for that shopper.
Write the progress text
In Text before achieving reward (Progress), write the message shown while the shopper is still below the threshold. Use the {{ difference }} placeholder to show how much more they need to spend.
Write the congratulations text
In Text after achieving reward (Congratulations), write the message shown once the threshold is met.
Why each currency needs its own amount
The threshold is a {currencyCode: value} map, not a single number. A $75 US goal is not the same as a €75 or £75 goal, and the app does not convert between them. When a shopper's cart is in a currency you have not set an amount for, that tier has no threshold to compare against and will not qualify — so always add an entry for each currency/market you support.
Stacking multiple tiers
Add several rewards to build a milestone bar — for example free shipping at 50 and a free gift at 100. Rewards are auto-sorted ascending by amount, regardless of the order you create them. The bar always fills toward the next unmet tier, and the markers sit along the bar in spend order. The highest tier defines the full width of the bar.
Dynamic placeholders
Reward text is rich text and supports two placeholders that are interpolated at render time:
| Placeholder | Replaced with |
|---|---|
{{ amount }} | The tier's threshold amount, formatted in the shopper's currency. |
{{ difference }} | The remaining spend needed to reach the tier, formatted in the shopper's currency. |
The default copy on a new reward is:
- Progress text:
You are {{ difference }} away from free shipping! - Congratulations text:
Congrats! You've unlocked free shipping! 🎉
Reward text inherits the cart's font scale — there is no hardcoded font size on the message. It picks up the secondary text size from your Llama Cart styles, so the copy stays consistent with the rest of the drawer across Classic (v1) and Modern (v2).
Icons
Each reward can show an icon at its milestone marker.
Turn on the icon
In the reward row, enable Show Reward icon. This is off by default.
Pick an icon source
Choose from the Icon dropdown:
| Icon source | Renders |
|---|---|
| Free Shipping | Built-in shipping icon. |
| Free Product | Built-in product icon. |
| Discount | Built-in discount icon. |
| Custom | Your own image (see below). |
For Custom, supply an image URL
When the source is Custom, an Icon URL field appears. Paste a direct image URL (up to 200 characters), for example a https://cdn.shopify.com/... link. The image shows at that tier's milestone marker on the bar.
Tooltip
Enable Show Tooltip on Reward hover on a reward to attach a hover tooltip to its marker. It is off by default.
When enabled, the tooltip also appears automatically once the shopper reaches that threshold — it surfaces on the highest tier the shopper has qualified for, confirming the unlocked reward without requiring a hover.
Visibility rules
You can restrict an individual reward tier so only some shoppers see it. These controls live in the Visibility settings section of each reward row.
Customer tags
Add one or more Customer tags to a reward and only logged-in customers carrying those tags will see that tier. This is how you build a VIP or wholesale-only reward.
Customer-tag gating requires the shopper to be logged in. A guest (not signed in) cannot match any tag, so a tag-gated tier is hidden from anonymous visitors. If a tier seems to be missing for a customer, confirm they are signed in and actually carry the tag.
Markets
Each reward can also be restricted to specific Markets, so a tier only shows in the markets you choose. Leave it unset to show the tier in every market.
Per-reward Markets interact with market-based cart configs. If you run a separate Llama Cart configuration for a market, that config's reward settings apply to shoppers in that market — set the right thresholds and currency amounts inside the configuration that actually serves each market.
Subtotal exclusions
By default the bar measures progress against the full cart subtotal. You can carve specific items out of that calculation so they don't count toward the goal.
Enable exclusions
Turn on Exclude products/collections from rewards amount calculation at the bottom of the Rewards tab.
Choose how to exclude
Pick Exclude by — Specific products or Specific collections.
Select what to exclude
Use the product picker or collection picker to choose the items whose value should not count toward the reward progress.
Excluded items — along with gift and free items — do not count toward the bar. A shopper can have items in the cart and still see $0 of progress if everything they've added is excluded. This is expected: it stops a free gift or a gift-card purchase from artificially advancing the shopper toward another reward.
Edge cases & gotchas
Example recipes
Goal: a single free-shipping bar at $75.
- In Content > Rewards, enable the Free Shipping toggle.
- Keep Layout type on Progress.
- In the reward row, set Reward short name to
Free Shipping. - Set Threshold amount to
75and currencyUSD(add other currencies as needed). - Progress text:
You are {{ difference }} away from free shipping! - Congratulations text:
Congrats! You've unlocked free shipping! 🎉 - Set up a matching free-shipping rate or discount in Shopify so the perk is real.
Goal: free shipping at $50, a free gift at $100.
- Keep Layout type on Progress (Collapsable would hide the second tier).
- Tier 1 — name
Free Shipping, threshold50/USD. - Tier 2 — name
Free Gift, threshold100/USD. - The app auto-sorts the tiers ascending, so the bar fills toward
$50first, then$100. - Optionally enable Show Reward icon on each tier (Free Shipping icon, Free Product icon) and Show Tooltip on Reward hover for clarity.
- Back the gift tier with a Gift with Purchase offer so the reward is delivered.
Goal: a reward only your VIP customers see.
- Add a reward tier and set its name and threshold as usual.
- In Visibility settings, add the VIP Customer tag (for example
vip). - Only signed-in customers carrying that tag will see the tier; guests and untagged customers won't.
- Confirm your VIP customers are actually tagged in Shopify and are logged in when shopping.
Goal: don't let gift-card purchases advance the reward bar.
- At the bottom of the Rewards tab, enable Exclude products/collections from rewards amount calculation.
- Set Exclude by to Specific collections.
- Pick your gift-card collection in the collection picker.
- Now a cart containing only gift cards shows
$0of progress, and gift-card value won't push shoppers toward free shipping.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Nothing appears on the storefront | Rewards block is hidden | Enable the Free Shipping toggle in Content > Rewards. |
| Only one tier shows despite adding several | Layout is Collapsable | Switch Layout type to Progress. |
| Bar shows no progress with items in the cart | Items are excluded, free, or gifts | Check the exclusion list; excluded and free items don't count. |
| Tier is invisible to some shoppers | No threshold set for their currency, or tag gating | Add the currency's amount; confirm the customer is logged in and tagged. |
| Shopper unlocked the bar but didn't get free shipping | The bar is visual only | Create the matching Shopify shipping rate or discount. |
Related
Express payments setup
Add accelerated checkout buttons (PayPal, Apple Pay, Shop Pay, and more) to the Llama Cart, including the required theme snippet and styling controls.
Custom HTML & rich text blocks
Inject your own content into the Llama Cart with Custom HTML and Custom Text blocks — placement, limits, the built-in taxes note, styling, and recipes.