Cart Drawer

---

The Cart Drawer slides in from the side when a customer adds a product to the cart. Instead of sending them straight to checkout, it shows the cart contents together with offers, savings and trust signals, without interrupting the shopping flow. Optimizing this section is one of the most effective ways to reduce cart abandonment and increase order value.

Where To Find It

1. Open the theme editor.
2. The Cart Drawer lives in the Overlay area of the sidebar (section Cart Drawer).
3. Click it to edit the section settings, or click Add block to add drawer blocks.

In the theme editor the drawer stays open while you edit it or one of its blocks, so you can see every change immediately without re-opening the cart.

Section Settings

• Colors: Use color scheme or Custom (Drawer background, Drawer text color).
• Drawer padding: theme default or a custom value.
• Heading & text sizes, Font family, Item title size, Cart text typography.
• Trust Icons (global): alignment, icons per row (desktop/mobile), typography and spacing for all Trust Icons blocks in the drawer.
• Enable payment icons: shows the payment method logos.
• Enable cart notes: shows the Note block.
• Show vendor: shows the product vendor on cart items.

Blocks

Reserved (urgency timer)

• Minute timer: countdown such as "Your cart is reserved for 10 minutes".

Best practice: keep it between 5 and 15 minutes, and only use it if it reflects a real reservation.

Shipping Goal

Shows the rewards progress bar (Free Shipping, Discount, Free Gift). The block has no settings of its own: all milestones are configured in Theme settings → Cart → Shipping Bar, and the same bar appears on the cart page. See the article Cart Shipping Goals for details.

Cart Items

Lists the products in the cart with image, title, quantity selector and price. No settings.

Free gifts unlocked by the shipping bar are shown with the price "Free" (translated into the store language) and have no quantity selector. Gifts that are not unlocked yet are hidden.

Gift

A separate gift offer with its own unlock rule:

• Gift rule type: Price or Quantity.
• Gift rule (price): minimum cart total to unlock (e.g. 100). Gift rule (quantity): minimum number of items.
• Gift image, Gift pre-fix, Gift title, Gift unlocked message.
• Gift product: the product added as a gift.
• Gift text price: e.g. "Free".
• Cards Settings: container styling (no card, card, shadow), border/shadow and corner radius.

Best practice: set the threshold above your current average order value, with enough margin to cover the cost of the gift.

Discount

Lets customers enter a discount code directly in the drawer.

• The code is applied via Shopify's Cart API: totals update immediately and the code is carried into checkout automatically.
• Each applied code appears as a removable tag with its value (e.g. "SOMMER10 -10%", or the amount for fixed discounts). The x on a tag removes just that code. The input stays visible, so customers can stack several combinable codes.
• Invalid or non-applicable codes show a translated error message.
• The discount tags work together with the savings rows of the Summary block: tags show which codes are applied, the summary shows the resulting savings.

Note

• Title note: e.g. "Order special instructions". Only shown when Enable cart notes is on.

Summary

Shows the savings breakdown above the subtotal. Rows appear only when they apply, and amounts are shown as negative values:

• Promo code (CODE): total of applied discount codes, with the code name in brackets (just "Promo code" if no name is available).
• Sale savings: savings from compare-at prices (sale prices).
• Total savings: promo and sale savings combined. Only shown when both apply.
• Subtotal: the cart total.

The row labels are translated and can be edited under Edit default theme content (sections.cart.promo_code, promo_code_with_code, sale_savings, total_savings).

Policy

• Text policy: checkbox text for terms and privacy consent (e.g. "By checking this box, you agree to our Privacy Policy and Terms of Service."). Checkout is only possible when the box is ticked.

Checkout Button

• Text button (e.g. "Checkout securely"), Button corner radius, Button background, Button text color.
• Icon / Google icon or class (icon): icon on the button (default shopping_bag).

Video

• Video type: Upload video file (MP4) or YouTube/Vimeo link. Good for a short testimonial or product demo.

Addons (cross-sells)

• Select addon product 1–3 with optional Custom title 1–3 (e.g. "Complete your routine").

Trust Icons: Grid and Trust Icons: Row

Highlight trust signals such as Secure Payments, Fast Shipping or Money-back Guarantee. Add one block per icon.

• Icon (image) or Google icon (material-icons symbol), Title under icon, Text under icon.
• Colors: Stroke item color, Background item color, Google icon color.
• Content alignment:
  • Grid: Alignment (left, center, right) of icon and text within the grid item.
  • Row: Vertical alignment (top, middle, bottom), Text alignment (title and description only) and Block alignment (the icon and text group within the row).
• Spacing: Vertical spacing / Horizontal spacing (desktop and mobile) and Icon to text gap (desktop and mobile).
• Advanced → Custom CSS: CSS applied to this single item, e.g. background: #f7f7f7; border-radius: 8px;.

Best practice: pick the 3–4 trust signals your audience cares about most.

Best Practices

• Always show the shipping/rewards progress bar: it motivates larger carts.
• Use trust icons to reduce checkout anxiety.
• Keep the checkout button large, high-contrast and clearly worded.
• Add 1–3 relevant addons, not more.
• Check the drawer on mobile: it should stay simple and scannable.