> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/cart-drawer/components/reward-ladder.md). # 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

Reward Ladder inspector, showing the permissions and discount notices

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)

Configure reward ladder — Setup section, showing "Combine with other discounts"

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. {% hint style="danger" %} **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. {% endhint %} ### 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:

Reward Ladder in the builder's live preview, showing 3 tiers — free shipping unlocked, 10% off and a fixed-amount discount still ahead

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](/cart-drawer/publish-and-manage-your-drawer.md). {% hint style="danger" %} **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. {% endhint %} 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: 1. 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. 2. 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. 3. 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.pagefly.io/cart-drawer/components/reward-ladder.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.