How to Configure Cart Drawer Behaviour and Footer

A tour of the settings that control how the drawer opens, the header, the empty cart, the order note, the subtotal, the checkout button, accelerated checkout and payment icons.

Position and opening

Open Settings. The Position card at the top sets the side the drawer slides from, its width and corners, separately for desktop and mobile. It also holds Open cart drawer on add to cart:

• Ticked: the drawer opens every time a customer adds a product.
• Unticked: it opens only from the cart icon. Adds happen in the background.

Full details: Cart Drawer Position and Size.

Header

In Settings, the Header card:

• The first field is the cart title, the heading at the top of the drawer. Use {item_count} for a live count, like Your cart (3).
• Show image: adds your logo to the left of the title. Pick the image and set its size.

Empty cart and the "Continue shopping" link

In Settings, the Empty cart card sets what customers see when the cart is empty:

• Message: a short line of text.
• Icon: upload an icon and set its size and colour.
• Show button: adds a button under the message.
• Button text: like Continue shopping.
• URL: where the button goes. Point it at a collection, like /collections/new, instead of the homepage.

You can also show the spend tier bar and an upsell in the empty cart. See Spend Tiers and Cart Upsells: Multiple Offers, Sub-triggers and Troubleshooting.

Order note

Open Order note and switch it on. Then set:

• Text and Field label text.
• Make the note field collapsable: the field stays closed until the customer opens it.
• Make the note a required field to checkout: customers can't check out with an empty note. Set the Validation message they see. Tell customers in the note text that it's required.

Subtotal

Open Subtotal and switch it on. Then set:

• The subtotal label text.
• Show Total strike through price to highlight savings: shows the total before discounts crossed out next to the subtotal.
• The text style of the label, the amount and the crossed-out price.

To add a line like "Taxes and shipping calculated at checkout", use a Custom HTML block.

Checkout button

Open Checkout button:

• Set the button text. Use {price} for the live cart total, like Checkout • {price}.
• Choose what the button does: Go to checkout or Go to cart page.
• Colours, border, Corner radius and spacing are on the Design tab.

Require agreement before checkout

Switch on Require agreement before checkout to add a checkbox above the button, like "I agree to the terms of service".

• Write the checkbox text and add links to your policies.
• Disable checkout button until checked: the button stays greyed out until the box is ticked.
• When that's off, the button stays clickable and customers who haven't ticked the box see your Validation message.

Accelerated checkout

Open Accelerated checkout and switch it on to show express buttons (such as Apple Pay, Google Pay and Shop Pay). Set the button height for Desktop and Mobile (default 42px).

Shopify decides which buttons appear, based on your Shopify Payments settings. If none show, see Express Checkout Buttons Not Showing.

Payment icons

Open Payment icons, switch them on, choose which icons to show, drag them into order and set the Icon size (default 40px). These are static trust icons (Visa, Mastercard and others), separate from the express buttons.

Checkout button: common questions

Reordering sections

Drag sections in the left menu to change their order in the drawer, top to bottom.