How to Configure Cart Drawer Behaviour and Footer

Cart Drawer Behaviour & Footer Settings

Beyond colours and rewards, the cart drawer has a handful of behaviour and footer settings that control how it opens, the empty-cart experience, the order note, the subtotal, the checkout button, accelerated checkout, and payment icons. This article is a tour of those.


Opening behaviour & position

In the Settings section:

  • Position — slide the drawer in from the left or right.
  • Open on add to cart — auto-open the drawer on every add (on), or only open it when the customer clicks the cart icon (off).
  • Cart title — the heading at the top of the drawer. Use {item_count}  to show a live count, e.g. Your cart (3).

Empty-cart state & "Continue Shopping" URL

Empty-cart settings — message, icon, and button URL
Empty-cart settings — message, icon, and button URL

Still in Settings, the empty-cart area is what customers see when their cart has nothing in it:

  • Message — a short line (rich text).
  • Icon — upload an icon and set its size and colour.
  • Show button — toggle a call-to-action button on.
  • Button text — e.g. Continue shopping.
  • Button URL — where the button sends them. This is where you point "Continue Shopping" at a specific collection (e.g. collections/new ) instead of the homepage.

Looking for where to change the Continue-Shopping destination? It's the Button URL here — a common one to miss.


Order note

Open the Order note section:

  • Toggle the note on.
  • Set the header textfield label, and button text.

The order note lets customers leave a message with their order (gift notes, delivery instructions). If you want it more prominent or always-expanded, see the styling options or contact us — placement tweaks can be done with custom CSS.


Subtotal

Open the Subtotal section:

  • Toggle the subtotal row on.
  • Set the Subtotal label.

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


Checkout button

Open the Checkout button section:

  • Set the button text. Use {price}  to include the live cart total, e.g. Checkout • {price}.
  • Style colour, shape, and text on the Design sub-tab — see Styling the cart drawer.

Accelerated (express) checkout

Accelerated checkout settings
Accelerated checkout settings

Open the Accelerated checkout section:

  • Toggle it on to show express buttons (Apple Pay, Google Pay, Shop Pay, PayPal, etc.).
  • Set the button height for desktop and mobile.

Which buttons appear is controlled by Shopify, not the app. They're detected automatically from your Shopify Payments settings — enable/disable specific wallets there. If no buttons show, see Troubleshooting.


Payment icons

Open the Payment icons section:

  • Toggle the icons on.
  • Select which payment icons to display, and set the icon size.

These are static trust icons (Visa, Mastercard, etc.), separate from the live accelerated-checkout buttons above.


Reordering sections

The drawer's sections (announcement bar, spend tiers, line items, upsells, subtotal, checkout, etc.) can be reordered in the editor so the drawer is laid out the way you want, top to bottom.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us