Reward Ladder
Reward Ladder shows a progress bar in the drawer toward a reward — free shipping, a free gift, or a discount — as the customer adds to their cart. It replaces PageFly's older Free Shipping Bar component, which is no longer available to add.
Because this component applies a real discount at checkout, read this whole page before you publish — not just the inspector's warning banners.
Before you start: this creates a real discount
The inspector shows two notices the first time you add Reward Ladder:
"This Reward ladder creates a real discount." Once you publish, the reward (and any free-gift limit) applies at checkout as soon as the cart qualifies — by default with no code required. Reward Ladder runs as a Shopify Function under the hood, the same mechanism Shopify's own native discounts use, so it applies at checkout even if the customer never opens the drawer.
"Permissions needed for Reward Ladder." Click Review permissions and approve the Shopify permission request. Reward Ladder can't apply anything at checkout until this is granted — it will preview correctly in the builder either way, which can be misleading if you don't grant permissions before publishing.
Discount behavior settings (in Configure)
Two settings in the Configure reward ladder dialog change how the discount actually behaves at checkout — easy to miss since they're not called out by either notice above:
"Combine with other discounts" (checked by default, in the Setup section). With this on, the ladder's reward can stack with other active discounts on the order (a discount code the customer enters, another app's automatic discount, etc.). Turn it off if you need the ladder's reward to be exclusive — for example, to stop a customer from combining a 10% ladder discount with a separate storewide sale.
Discount code (optional) — a per-tier field, available on Percent off and Fixed amount off tiers. Leave it blank and the tier applies automatically (matches the "no code needed" behavior described above). Fill it in and that tier instead becomes a discount the customer must enter the code for at checkout — the ladder still shows their progress toward it, but crossing the threshold alone won't apply it.
Publishing without granting permissions is the most common way to accidentally mislead customers. The progress bar will render correctly on your storefront — customers will see "Spend $12 more for free shipping" — but if permissions were never granted, nothing actually happens at checkout when they hit the threshold. Grant permissions before you publish, not after.
Configure the ladder
Variant — choose how the progress bar renders:
Rail (default)
Stepper
Segments
Ring
Tiers — under Current setup, click Configure to set your thresholds (up to 3 tiers per ladder). Each tier is measured either by cart total or item count, and unlocks one reward type: free shipping, a free gift, a percent discount, a fixed-amount discount, or a custom label. The example below stacks three item-count tiers: 3 items → free shipping, 5 items → 10% off, 8 items → a fixed-amount discount.
Display options:
Progress animation — Subtle slide, or None.
Node spacing — Proportional (tier positions reflect their thresholds) or Equal (evenly spaced regardless of threshold). Proportional is more honest to the customer when tiers are far apart in value; Equal reads cleaner visually when you only have 2-3 tiers.
Elements — click any part of the ladder to style it individually: headline & labels, progress track, savings line.
What it looks like with a real cart
The builder's live preview reflects real cart contents, so you can see the ladder progress as items are added. Here a 3-item, 3-tier ladder shows the first tier (free shipping) already unlocked, with "Spend 2 items more to unlock 10% off" guiding the customer toward the next one:
Once published — with the theme app embed on and permissions granted — customers see the same progress bar and node states on your actual storefront.
Turning it off
Both of these reliably stop the discount — publishing and unpublishing both re-check whether Reward Ladder is still part of your drawer, and end the discount the moment it isn't:
Remove the component and republish. Delete the Reward Ladder block from the drawer, then publish again. This is the right choice if you want to keep the rest of the drawer live.
Unpublish the drawer entirely. Use Unpublish Smart Cart (drawer actions menu, or the banner shown when the theme embed is off) if you want to stop everything the drawer does, not just Reward Ladder. See Publish and manage your drawer.
Turning off only the theme app embed does NOT stop the discount. The embed toggle only controls whether the drawer is visible on your storefront — it has no effect on the discount itself, which keeps applying at checkout regardless of the embed state. If you need the discount to actually stop, use one of the two methods above, not the embed toggle.
You can independently confirm a discount has stopped in Shopify Admin → Discounts — look for an automatic discount named "PageFly Smart Cart — Reward Ladder". Its status will show Expired once removed or unpublished (PageFly ends the discount rather than deleting it, so the entry stays visible in your discount list for your records).
Common issue: reward doesn't apply at checkout
If the progress bar shows correctly but the discount or free shipping isn't actually applied at checkout:
Go back to the Reward Ladder inspector and check whether the permissions banner is still showing. If it is, click Review permissions and approve the request, then republish the drawer.
Open Configure and check the tier that should have applied — if it has a Discount code set, crossing the threshold alone won't apply it; the customer needs to enter that code at checkout.
If another discount is active on the order and the reward still isn't showing, check whether "Combine with other discounts" is turned off — Shopify only applies one non-combining discount at a time, so an exclusive ladder reward can lose out to an exclusive discount code.
Last updated
Was this helpful?