Cart drawer
A slide-in panel that opens when a customer adds a product to the cart or clicks the cart icon. It is built from two blocks — Content and Summary — below a title shown by the section. These two zones cannot be reordered, but you can toggle and arrange the blocks inside each one.
Structure
Content Block — The scrollable body. Holds the cart items list and optional feature blocks.
Summary Block — Sticks to the bottom of the drawer. Always includes the subtotal and checkout button, with optional feature blocks above it.
Settings
Mobile layout
How the drawer opens on phones — a sheet from the bottom, or a drawer from the side.
Show cart count
Adds the number of items next to the cart title — for example, Cart (3). The title text comes from Theme Settings → Cart.
Content Block
The scrollable body. Its own setting is the Gap (Desktop / Mobile) between the blocks inside it. The Content Block also accepts app blocks, so features from your apps can sit alongside the built-in ones.
Free shipping progress
A progress bar showing how close the customer is to qualifying for free shipping. The amount and message text are set in Theme Settings → Cart. See Free shipping bar for matching it to a real shipping rate.
Alignment
Aligns the bar text left, center, or right.
Size
Sets the size of the bar text.
Color
Sets the color of the bar text.
Padding
Space above and below the bar.
Cart items
The list of products currently in the cart. Like the other feature blocks, it can be reordered, removed, and added back at any time.
Show dividers
Adds a line between each product.
Show vendor
Shows the product vendor under the title.
Gap — Desktop / Mobile
Space between products.
Padding
Space above and below the list.
Quick edit lets customers change variant options right inside the drawer, without opening the product page. See Quick edit for what the panel shows.
Enable quick edit
Turns on editing variants inside the drawer.
Show product media
Shows the product image in the quick edit panel.
Show badges
Shows product badges in the quick edit panel.
Show quantity selector
Adds a quantity control to the quick edit panel.
Discount code
A panel where customers can enter a discount code. It opens from the bottom when tapped.
Heading font
Font used for the panel label.
Font size
Size of the label text.
Letter spacing
Space between the letters of the label.
Text case
Keep the label as typed (Original) or set it in Uppercase.
Shipping estimator
A panel where customers can estimate shipping by entering their address. It opens from the bottom when tapped.
Heading font
Font used for the panel label.
Font size
Size of the label text.
Letter spacing
Space between the letters of the label.
Text case
Keep the label as typed (Original) or set it in Uppercase.
Order note
A panel where customers can add a note to their order. The note is saved to the order in Shopify Admin → Orders.
Heading font
Font used for the panel label.
Font size
Size of the label text.
Letter spacing
Space between the letters of the label.
Text case
Keep the label as typed (Original) or set it in Uppercase.
Recommended products
A scrollable row of products suggested from the first item in the cart. It always contains two blocks: a Heading for the row title, and a Product list that controls which products appear and how the row behaves. The Heading can play an entrance animation when block animations are enabled in theme settings.
Gap — Desktop / Mobile
Space between the heading and the products.
Padding
Space above and below the block.
Product list
Type
Where the suggestions come from — Shopify's automatic related products, or complementary products you pair in the Search & Discovery app.
Products
A fallback list shown when no recommendations are available.
Max products
How many products the row shows.
Gap — Desktop / Mobile
Space between the products.
Style
Look of the navigation arrows.
Icon
Shape of the navigation arrows.
Auto-rotate slides
Advances the row on its own.
Pause on hover
Stops the timer while the cursor is over the row. Shown when Auto-rotate slides is on.
Speed
How long each product stays before advancing. Shown when Auto-rotate slides is on.
Summary Block
The sticky bottom zone. The Discount code, Shipping estimator, and Order note blocks can also go here — see Content Block above.
Gap — Desktop / Mobile
Space between the blocks inside the zone.
Type
Inherit keeps the drawer's own colors and lifts the zone with a soft shadow. Color scheme paints the zone with a scheme of its own instead.
Color scheme
The scheme used for the zone. Available when Type is Color scheme.
Order summary
Always sits at the bottom of the Summary Block. Holds the subtotal, checkout button, and a few optional extras.
Show tax and shipping notice
Shows a "Taxes and shipping calculated at checkout" line under the subtotal.
Show view cart button
Adds a second button linking to the full Cart page.
Show accelerated buttons
Shows express checkout options such as Shop Pay, Apple Pay, and Google Pay when available.
Show payment icons
Shows accepted payment method icons below the buttons.
Icon width
Size of each payment icon.
Text case
Under Typography. Keep the subtotal row as typed (Original) or set it in Uppercase.
Last updated