The Cart page section is the cart page at /cart. The editor names it Cart, the same name as the cart drawer, so this article covers the Cart section you see when you select the cart template at the top of the editor. The cart drawer that slides in from the side has its own article, Cart drawer section. The section comes with the cart template and can't be added to other pages.
Customers reach the cart page from the cart icon in the header when Cart type is Page in Cart settings, and after adding a product when After add to cart is Go to cart page. The page also opens at /cart with either cart type.
On a computer, the items fill the left column. The right column holds the subtotal, the tax line and the Check Out button, and stays in view while customers scroll. On screens narrower than 1000 px, it follows the items. The free shipping progress bar, the order note, the discount code, gift wrap and the terms checkbox in that column come from Cart settings, and they appear in the cart drawer too.
On this page, the discount code and the order note are two rows at the top of the order summary, Discount code and Order note. Clicking a row opens its field in place, under the row. A closed row shows what it holds: the applied codes with the amount each one saves, or the start of the note. The note is saved when the customer clicks outside the field.
Layout
Alignment places the heading and the breadcrumbs at the left, the default, in the center or at the right. Padding top, Padding bottom, Margin top and Margin bottom set the space around the section. Section layout settings describes them.
Page header
Setting
What it does
Heading
Replaces the heading Your Cart. Leave it empty to keep it. The number of items in the cart shows in small type after the heading.
Breadcrumbs
A trail with Home, Collections and Your Cart. Above heading is the default. Below heading puts it under the heading. Hidden removes it.
Description
A paragraph under the heading.
Empty state
What the page shows when the cart is empty, in place of the items: a large heading, a short message and a button.
Setting
What it does
Heading
The default is Your cart is currently empty.
Message
The paragraph under the heading.
Button label and Button link
The button under the message. The default label is Start shopping. Leave the link empty to send customers to all your products.
If you clear the Heading, Message or Button label field, the page shows the theme's default wording. A cleared Heading shows Your cart is empty. The cart drawer's empty state has separate settings in the Cart drawer section.
Presentation
Show vendor on line items shows each product's vendor on its line in the cart. It is off by default.
Product carousel block
A row of product cards under the Check Out button, in the right column. The section holds one at most, and the cart template comes with one.
When the cart is empty, the row shows under the empty state message instead, with larger cards across the page, but only when Collection has a collection. Without one, there is no cart item to base suggestions on, so the empty cart shows no row.
Setting
What it does
Heading
The heading above the row. The default is You may also like.
Collection
Shows products from this collection, leaving out the ones already in the cart. Leave it empty to show products that Shopify relates to the first item in the cart.
Maximum products
How many products show, from 2 to 10. The default is 6.
The Cart page section is the cart page at
/cart. The editor names it Cart, the same name as the cart drawer, so this article covers the Cart section you see when you select the cart template at the top of the editor. The cart drawer that slides in from the side has its own article, Cart drawer section. The section comes with the cart template and can't be added to other pages.Customers reach the cart page from the cart icon in the header when Cart type is Page in Cart settings, and after adding a product when After add to cart is Go to cart page. The page also opens at
/cartwith either cart type.On a computer, the items fill the left column. The right column holds the subtotal, the tax line and the Check Out button, and stays in view while customers scroll. On screens narrower than 1000 px, it follows the items. The free shipping progress bar, the order note, the discount code, gift wrap and the terms checkbox in that column come from Cart settings, and they appear in the cart drawer too.
On this page, the discount code and the order note are two rows at the top of the order summary, Discount code and Order note. Clicking a row opens its field in place, under the row. A closed row shows what it holds: the applied codes with the amount each one saves, or the start of the note. The note is saved when the customer clicks outside the field.
Layout
Alignment places the heading and the breadcrumbs at the left, the default, in the center or at the right. Padding top, Padding bottom, Margin top and Margin bottom set the space around the section. Section layout settings describes them.
Page header
Empty state
What the page shows when the cart is empty, in place of the items: a large heading, a short message and a button.
If you clear the Heading, Message or Button label field, the page shows the theme's default wording. A cleared Heading shows Your cart is empty. The cart drawer's empty state has separate settings in the Cart drawer section.
Presentation
Show vendor on line items shows each product's vendor on its line in the cart. It is off by default.
Product carousel block
A row of product cards under the Check Out button, in the right column. The section holds one at most, and the cart template comes with one.
When the cart is empty, the row shows under the empty state message instead, with larger cards across the page, but only when Collection has a collection. Without one, there is no cart item to base suggestions on, so the empty cart shows no row.
Recommend products in the cart covers the same row in the cart drawer.