How to show a free shipping bar in the Shopify cart drawer

The drawer is where the decision happens

A bar on the cart page still helps, but many sessions never open that page. They open a drawer, change quantity, and check out. The progress message has to follow the cart in that drawer, in the right currency, without a reload.

Two placements that work together

• A storefront bar (top or bottom of the page) so the offer is visible while they browse.
• A cart block so the same goal is visible next to the line items and checkout button.

Use the same threshold and copy in both. Two different numbers will look like a bug.

Set this up with ShipLift

ShipLift Progress Bar updates when the cart changes, including cart drawers, without editing theme code.

1. Set the goal, currency and messages in Rules & Targeting and Customize Design. Keep drawer copy short: “Add $12 more for free shipping” fits; a paragraph does not.
2. In the theme editor, switch on the Free Shipping Bar app embed so the sticky bar appears while they shop.
3. On the cart page, add the Tiered Progress Bar block if you want milestones (free shipping, then a discount, then a gift).
4. Add a cheap add-on product from a product page, open the drawer, and watch the remaining amount change. Remove the item: the bar should drop back.

Online Store 2.0 themes that support app embeds and app blocks are enough. You should not paste JavaScript into the theme.

If the drawer still shows the old amount

• Hard-refresh and try an incognito window. An old dismissed-bar flag can hide it.
• Confirm test mode is off for the live check, and on only while you preview.
• Confirm the shipping rate matches the bar. A live drawer and a wrong rate still fail at checkout. Why the bar does not match checkout.

ShipLift’s dashboard counts how often the bar was seen and how often the goal was reached. Use that after a week to see whether the drawer placement is doing any work.