The Cart drawer section sets what customers see in the cart that slides in from the right side of the screen. In the editor it is the Cart section under Overlays in the sidebar. The cart page has its own Cart section, described in Cart page section. Select Cart under Overlays to open the drawer in the preview while you edit it.
The drawer is used only when Cart type is Drawer in Cart settings, as it is by default. With Page, the cart icon goes to the cart page instead. After add to cart in the same settings decides whether the drawer opens on its own when a customer adds a product.
With products in it, the drawer shows its title with the number of items, each product with its photo, options, price and quantity, the product carousel when you add one, and a summary with the subtotal and the checkout button. The summary has a button that opens a panel for discount codes, and one for an order note when Enable cart note is on in Cart settings. Cart settings can also add a free shipping progress bar, gift wrapping and a terms checkbox. Show a free shipping progress bar, Offer gift wrapping in the cart and Ask customers to agree to terms before checkout explain each one.
With two products in the cart, the drawer covers the right part of the page from top to bottom.
On screens narrower than 1000 px, the drawer slides up from the bottom of the screen, and customers can swipe it down to close it.
Empty state
These settings fill the drawer when the cart is empty.
Setting
What it does
Heading and Message
The title and the paragraph. Leave either empty to use the theme's default wording.
Button label and Button link
The button under the message. Leave the link empty to send customers to the page with all your products.
Popular collections heading
The heading over a list of collection links. You pick those collections in Popular collections in Cart settings. With none picked, the list does not show.
Presentation
Setting
What it does
Show separator lines
Has no visible effect. The items show without lines between them whether it is on or off.
Show vendor on line items
Shows each product's vendor in small text under its name, before its options. Off by default.
Blocks
Product carousel
A row of suggested products under the cart items. The drawer holds one.
Setting
What it does
Heading
The title over the row.
Collection
The products to suggest. Products already in the cart are left out. Leave it empty to suggest products related to the first product in the cart. Then the empty cart shows no carousel.
Maximum products
From 2 to 10, default 6.
With a collection picked, the carousel also shows in the empty cart. Recommend products in the cart explains both choices.
Quick discount
A ready-made discount code in the drawer's discount panel. Customers open the panel with the discount button in the cart summary. Clicking a code puts it in the discount field, and the customer then applies it. The same codes also show in the Discount code row on the cart page.
Setting
What it does
Label
The code as customers see it. A block with an empty label does not show.
Discount code
The code that goes in the field. It must be a discount code that exists in your Shopify admin, under Discounts. Leave it empty to use the label as the code.
Description
A line beside the code, such as 10% off your first order. Leave it empty to repeat the label.
The Cart drawer section sets what customers see in the cart that slides in from the right side of the screen. In the editor it is the Cart section under Overlays in the sidebar. The cart page has its own Cart section, described in Cart page section. Select Cart under Overlays to open the drawer in the preview while you edit it.
The drawer is used only when Cart type is Drawer in Cart settings, as it is by default. With Page, the cart icon goes to the cart page instead. After add to cart in the same settings decides whether the drawer opens on its own when a customer adds a product.
With products in it, the drawer shows its title with the number of items, each product with its photo, options, price and quantity, the product carousel when you add one, and a summary with the subtotal and the checkout button. The summary has a button that opens a panel for discount codes, and one for an order note when Enable cart note is on in Cart settings. Cart settings can also add a free shipping progress bar, gift wrapping and a terms checkbox. Show a free shipping progress bar, Offer gift wrapping in the cart and Ask customers to agree to terms before checkout explain each one.
With two products in the cart, the drawer covers the right part of the page from top to bottom.
On screens narrower than 1000 px, the drawer slides up from the bottom of the screen, and customers can swipe it down to close it.
Empty state
These settings fill the drawer when the cart is empty.
Setting
What it does
Heading and Message
The title and the paragraph. Leave either empty to use the theme's default wording.
Button label and Button link
The button under the message. Leave the link empty to send customers to the page with all your products.
Popular collections heading
The heading over a list of collection links. You pick those collections in Popular collections in Cart settings. With none picked, the list does not show.
Presentation
Setting
What it does
Show separator lines
Has no visible effect. The items show without lines between them whether it is on or off.
Show vendor on line items
Shows each product's vendor in small text under its name, before its options. Off by default.
Blocks
Product carousel
A row of suggested products under the cart items. The drawer holds one.
Setting
What it does
Heading
The title over the row.
Collection
The products to suggest. Products already in the cart are left out. Leave it empty to suggest products related to the first product in the cart. Then the empty cart shows no carousel.
Maximum products
From 2 to 10, default 6.
With a collection picked, the carousel also shows in the empty cart. Recommend products in the cart explains both choices.
Quick discount
A ready-made discount code in the drawer's discount panel. Customers open the panel with the discount button in the cart summary. Clicking a code puts it in the discount field, and the customer then applies it. The same codes also show in the Discount code row on the cart page.
Setting
What it does
Label
The code as customers see it. A block with an empty label does not show.
Discount code
The code that goes in the field. It must be a discount code that exists in your Shopify admin, under Discounts. Leave it empty to use the label as the code.
Description
A line beside the code, such as
10% off your first order. Leave it empty to repeat the label.Show discount codes in the cart drawer shows how to create a code and add it here.