Cart Drawer CRO: Why a Free-Shipping Progress Bar Works

A teardown of our highest-ROI cart test: replacing a slow app drawer with a 2.1kb custom Liquid cart featuring a dynamic free-shipping threshold bar.

A DTC apparel brand came to us with a familiar profile: strong traffic, a healthy add-to-cart rate, and most mobile carts abandoned before checkout. Session recordings showed why. Their app-based cart drawer took over two seconds to open, and the checkout button sat below the fold on smaller phones.

The hypothesis

A sub-200ms custom drawer with a dynamic free-shipping threshold bar and a one-tap upsell will increase average order value and completed checkouts, lifting revenue per visitor.

What we built

• A custom Liquid + vanilla JS cart drawer, 2.1kb total, opening in under 200ms using the native Shopify cart AJAX API.
• A free-shipping progress bar: "You are $12 away from free shipping" with an animated fill that updates live as items are added.
• One-tap upsell: a single, contextually matched accessory under the cart items, add with one tap, no page reload.
• Checkout button pinned to the drawer footer, always visible regardless of cart length or screen size.

Why the free-shipping bar works

It converts a cost objection into a game. Shoppers under the threshold add items to "win" free shipping. That is the AOV lift. Shoppers over it get a small dopamine confirmation that they are getting a deal, which supports checkout completion. The mechanic only works when the bar updates instantly; a laggy bar reads as broken math next to a payment button.

The result, validated properly

We ran a 50/50 split via Convert Experiences with GA4 revenue validation on both arms, and let it run to its pre-agreed stopping condition rather than stopping the first day it looked good. The outcome figures are not published here: we release those only with the client’s permission and alongside the sample size, duration and guardrail metrics that make them readable. The winning drawer was hardcoded into the theme as documented Liquid, removing the test-script overhead entirely. The learning now informs every cart we design.

The cart drawer is the highest-intent real estate on your entire store. Treating it as an app-store afterthought is the most expensive default on Shopify.