Skip to main content
The Cart drawer section controls the slide-out drawer that appears when customers add items to their cart or click the cart icon. It provides a quick view of cart contents without leaving the current page, streamlining the shopping experience and reducing friction in the purchase journey. Configure this section to customize drawer behavior, content, and appearance across your entire store.

​
What this section controls

This section controls cart drawer displays with the following capabilities:
  • Slide-out drawer interface for cart contents
  • Sticky checkout button toggle for scrolling behavior
  • Product card thumbnail aspect ratios (1:1, 3:4, 5:6)
  • Empty cart “Continue Shopping” button URL
  • Color scheme selection
  • Store-wide drawer appearance and behavior
  • Quick cart view without page navigation

​
Section settings

Enable Sticky checkout button to keep the checkout button fixed at the bottom of the cart drawer as users scroll through their cart items.Default: Enabled
Keep this enabled for better mobile user experience, ensuring the checkout button is always accessible even with many cart items.
Card media aspect ratio — Controls the shape of product thumbnail images displayed in the cart drawer.Available options:
  • 1:1 — Square images, ideal for lifestyle products
  • 3:4 (default) — Portrait format, best for apparel and accessories
  • 5:6 — Tall portrait, maximizes vertical space
Choose an aspect ratio that complements your product photography style.
Button URL — Set the destination for the “Continue Shopping” button displayed when the cart is empty (default: /collections/all).This typically links to your main collections page, homepage, or featured collection.
Empty cart title and description text are customized through theme translation files (locales), not in this section.
Select the color scheme for the cart drawer, controlling background, text, and button colors (default: scheme-1).

​
Best practices

Aspect ratio selection

Use 3:4 portrait for apparel to show product details clearly. Use 1:1 square for products with square photography or lifestyle items.

Sticky checkout

Keep the sticky checkout button enabled, especially if you expect customers to add multiple items. This ensures easy access to checkout.

Empty cart destination

Set the empty cart button to your most important collection or homepage to guide shoppers back to browsing.

Mobile testing

Test the cart drawer on mobile devices to ensure smooth sliding animations, responsive product images, and accessible buttons.

Color contrast

Choose a color scheme with sufficient contrast between background and text for readability, especially for cart totals and pricing.

Performance

The cart drawer updates dynamically. Ensure product images are optimized to maintain fast loading when items are added.

​
Cart drawer features

The cart drawer typically includes:
  • Product thumbnails — Visual representation of cart items with the selected aspect ratio
  • Product details — Title, variant information, and individual pricing
  • Quantity controls — Increase, decrease, or remove items
  • Cart subtotal — Running total of all items in the cart
  • Checkout button — Primary action to proceed to checkout (sticky when enabled)
  • Continue shopping — Link to close drawer and keep browsing
  • Empty state — Message and button shown when cart has no items

​
Common use cases

  • Quick cart updates — Allow customers to modify quantities without leaving product pages
  • Cross-device shopping — Provide consistent cart experience on desktop and mobile
  • Fast checkout flow — Enable one-click access to checkout from any page
  • Cart review — Let shoppers verify items before proceeding to checkout
  • Impulse purchases — Keep customers engaged while showing cart contents

​
Additional customization

Beyond this section, cart drawer behavior and content can be customized through:
  • Theme settings — Cart drawer opening behavior, animations, and global features
  • Translation files — Empty cart messaging, button labels, and informational text
  • Custom code — Advanced cart drawer modifications using the Custom liquid section or theme files

Cart counter

Configure the cart icon and item count display

Header

Manage header navigation where the cart icon appears