Cart drawer

The Cart drawer is the side-cart experience for adding, reviewing, and checking out products while a shopper remains on the current page.

Add or open this feature

The drawer itself is part of the Overlay group and is present once in the current saved group order. Its primary switch is global:

1. In Shopify, open Online Store > Themes > Customize.
2. Open Theme settings > Cart.
3. Configure Enable cart drawer.

Enable cart drawer

When enabled, cart links open the side drawer. When disabled, cart links go directly to the cart page. Use the drawer for a quick review flow; use the cart page when the store needs a full-page cart experience or when the drawer would compete with complex cart content.

Theme settings > Cart

Cart icon

Choose the icon shown for the cart action:

• Shopping basket
• Tote bag
• Shopping cart

Choose one icon and keep it consistent with the product language used in the rest of the store.

Empty cart button link

Sets the destination of the button shown when the cart is empty. If you leave it blank, Strata uses the all-products collection as the fallback destination.

Free shipping minimum amount

Sets the order amount used by the free-shipping progress message. Leave the field blank or enter 0 to hide the bar. The bar is shown only to shoppers using the store currency, so check localization and market settings before treating it as a universal promise.

What shoppers can do

When the cart contains products, the drawer shows line items with product media, variant details, prices, quantity controls, discounts when present, and the order total. Shoppers can:

• change quantities, including reducing a line to zero;
• open a product from its line item;
• review cart-level and line-level discounts;
• expand the order-note field;
• view the cart page or continue to checkout.

The drawer can also request product recommendations based on the cart. Recommendations depend on Shopify's available product data and are not a fixed merchant-authored list in the drawer settings.

When the cart is empty, the drawer shows the empty-cart message and the destination configured by Empty cart button link.

Drawer state matrix

The last two rows are global Theme settings. They affect shared overlay surfaces, not only the cart.

Desktop and mobile behavior

The cart is presented as an overlay drawer on desktop and mobile, with the available width adapting to the viewport. Check the empty state, a multi-line cart, a quantity update, and the checkout action at both sizes after final browser acceptance.

Accessibility and motion

The drawer has a labelled title, a close action, quantity controls, and a focus-managed overlay. Keep product titles and variant information meaningful, and test the full quantity-to-checkout path with keyboard navigation. Use Reduce drawer animation or the global reduced-motion setting when the storefront should minimize movement.

Common issues

• Cart opens a page instead of a drawer: check Enable cart drawer in Theme settings > Cart.
• The shipping message is missing: check that Free shipping minimum amount is not blank or 0, and confirm the shopper is using the store currency.
• The empty-cart button goes to an unexpected place: review Empty cart button link; blank uses the all-products collection fallback.
• Recommendations are empty: check the cart product and Shopify recommendation data; the drawer does not guarantee a recommendation for every product.

Related guides

• Cart settings
• Search drawer
• Product information

Version note

This guide follows the current Cart drawer section and global Cart settings. Final interaction evidence is pending accepted desktop and mobile cart QA.