Section: Cart Drawer

Everything you'll need to know on how to setup your Cart Drawer section.

The Cart Drawer is the slide-in panel that appears when a visitor clicks the cart icon — letting them review and update their cart without leaving the page. Built around 4 modular blocks: cart items, a milestone-driven promo banner (free shipping, free gift, discount unlocks), upsell options (recommended products, gift wrap, order note, shipping calculator, delivery date, discount code), and a footer with payment icons.

The Cart Drawer is a system section. It's already in place — visitors trigger it by clicking the cart icon in the header. Edit it from any page in the theme editor.

1) In the theme editor, find Cart Drawer in the section list (usually at the bottom under the global sections).

2) The right sidebar opens with the section's color scheme and the 4 default blocks.

Color scheme for the entire drawer panel. Pick from the schemes set up in Theme Settings → Colors.

The Cart Drawer supports 4 block types, each limit: 1. They render in the order you arrange them. Drag and drop to reorder.

Displays the list of products in the cart with thumbnails, titles, variants, quantity selectors, and remove buttons. Has just one setting: Color scheme — to make this block stand out from the rest of the drawer if you want.

Displays a milestone progress bar at the top of the drawer that motivates visitors to add more to unlock perks. Supports up to 4 progressive milestones, each with a threshold (cart total in your shop currency), a type (Free shipping / Free gift / Discount code), an icon, and progress + unlocked messages.

Heading text shown at the top of the promo banner. Default: LAST CHANCE TO SAVE. Use it to give visitors context (e.g. Free shipping & gifts!).

Subtext below the title. Default reminds visitors of the promotional thresholds.

Color scheme for the promo banner block specifically. Pick a different scheme from the drawer to make it visually distinct.

The first reward tier. Configure: Enable (toggle on/off), Threshold (cart total in your shop currency to unlock — e.g. 25), Type (Free shipping / Free gift / Discount code), Icon (Shipping / Gift / Percent), Progress message (e.g. Add [amount] more for free shipping! — use [amount] as a placeholder for the remaining total), Unlocked message (e.g. 🎉 Free shipping unlocked!), Free gift product (when Type is Free gift), and Discount code (when Type is Discount code).

The second reward tier. Same fields as Milestone 1 — typically a higher threshold (e.g. 50) for a free gift.

The third reward tier. Default: 75 threshold for a discount code. Same fields as Milestone 1.

The fourth reward tier. Off by default — enable to add a fourth tier (e.g. 100 threshold for an extra gift).

Bundles together several optional cart enhancers: recommended products, order note, gift wrap, shipping calculator, delivery date picker, and discount code input. Toggle each independently.

Tick this box to display a horizontal carousel of recommended products inside the drawer. Visitors can add items without leaving the cart.

Heading shown above the upsell carousel. Default: Recommended products. Customize for tone — e.g. You might also love, Pairs perfectly with…

The list of products to recommend (up to 10). Pick specific products. If left empty, the section falls back to Shopify's automatic recommendations.

Number of upsell products to show in the carousel (2–10). Default: 4.

Tick this box to show variant options on upsell products with multiple variants. Visitors pick the variant before adding to cart.

Label on the Add button under each upsell product. Default: ADD. Keep it short.

Tick this box to display a textarea where customers can add a note to their order. The note is included with the order in your admin.

Label shown above the note field. Default: ADD A NOTE TO YOUR ORDER.

Placeholder text inside the note textarea before the visitor types.

Tick this box to display a gift wrap toggle. Adds a gift wrap product (a hidden Shopify product you create in advance) to the cart when ticked.

Label shown next to the gift wrap toggle. Default: ADD GIFT WRAPPING.

The product added to the cart when gift wrap is ticked. Create a product called Gift wrap in your admin (any price) and tag it with gift-wrap so it doesn't appear in collection views.

Optional image shown next to the gift wrap toggle (e.g. a photo of wrapped boxes).

Tick this box to display the gift wrap product description below the toggle. Useful when the wrapping has multiple variants or special details.

Tick this box to display a shipping rate calculator (visitor enters country/zip, sees estimated rates). Helps reduce checkout abandonment from shipping surprises.

Label for the calculator section. Default: CALCULATE SHIPPING RATES.

Tick this box to display a date picker so visitors can request a delivery date. Date is saved as an order note.

Label above the date picker. Default: SELECT DELIVERY DATE.

Optional note shown below the picker. Default: We'll do our best to deliver on your preferred date. Useful for setting expectations.

Tick this box to display a discount code input field inside the drawer. Visitors enter a code and see the discount applied before reaching checkout.

Label above the discount code input. Default: APPLY A DISCOUNT CODE.

The bottom area with subtotal, tax/secure notes, payment icons, and the Checkout button.

Tick this box to display a small reminder about taxes and shipping. Default: on.

The tax note copy. Default: Taxes & Shipping calculated at checkout.

Tick this box to display a row of up to 6 payment provider icons under the checkout button. Builds trust at the moment of decision.

Upload up to 6 payment icons (Visa, Mastercard, PayPal, Apple Pay, etc.). The drawer shows whichever ones you upload. Recommended: 60 × 40 px, transparent PNG.

Tick this box to display a secure-checkout reassurance note. Default: on.

The secure-checkout copy. Default: 100% secure and protected payments.

The bar fills based on the visitor's current cart total relative to your milestone thresholds. As they add items, the bar progresses and the next milestone's progress message updates dynamically (using the [amount] placeholder for the remaining total). When a threshold is met, the unlocked message appears and the next milestone becomes the goal.

Create a regular product in your admin (e.g. Gift wrap, $5). Tag it with gift-wrap so it's hidden from collection views. Pick it in the Gift wrap product field. When visitors tick the gift wrap toggle, the product is added to the cart.

Check that Show upsell products is on. If you've left Upsell product list empty, the section falls back to Shopify's automatic recommendations — those require enough order history to populate. If you have specific products you always want to upsell, add them to the list manually.

The Cart Drawer is the slide-in panel triggered by clicking the cart icon — fastest UX, never leaves the page. The Cart page is the full-page version at /cart — more space, sometimes preferred for desktop. Both share the same blocks. Most stores use just the drawer; the cart page acts as a fallback.

Yes — remove the Promo banner block entirely. The drawer renders without a progress bar at the top. Or untick all milestone Enable toggles inside the block to keep the section but hide the bar.