Cart
The cart exists in two places: a drawer that slides in when something is added, and a full cart page. Both read the same settings, so what you turn on appears in both.
Drawer or page
Cart type is under Theme settings → Cart.
| Type | What happens on Add to cart |
|---|---|
| Drawer | A panel slides in. The shopper stays on the page they were on. |
| Page | The browser goes to /cart |
| Message | A small confirmation appears, nothing else moves |
Drawer is the default and suits most stores. Page suits a store where the cart does real work — a long shipping estimator, a lot of upsell — because a drawer that needs scrolling is worse than a page.
What can go in it
Each is a toggle, and each is off in some stores for good reason.
- Order note. A free text field. Worth having if you take engraving or delivery instructions, otherwise it is a box people ignore.
- Gift wrapping. A checkbox and optional message field. See below — it's involved enough to need its own section.
- Shipping estimator. Country, province, postcode, and a rate. Reduces the surprise at checkout, and adds a step before it.
- Discount code field. Worth thinking about. A visible discount box sends some shoppers off to search for a code and not come back. Stores that email codes usually want it; stores that rarely discount usually do not.
- Free shipping progress. A bar showing how much more to spend. Set the threshold to match your actual shipping rules — a bar that says £12 to go while checkout charges postage anyway is worse than no bar.
- Trust icons, recommendations, a countdown. All optional, all add height. In a drawer, height is the thing you are short of.
Gift wrapping
Lets a customer request gift wrapping, with an optional message. Off by default.
Turning it on: tick Show gift wrapping on the Cart page section, the Cart drawer section, or both — separate toggles, so you can offer it in one place and not the other.
How it's stored: as cart attributes, not as a product. That means it shows in the cart, on the order in your admin, and in the confirmation email — but not inside checkout's own screens, since Shopify doesn't let themes add anything there. It's always free; charging for wrapping means creating an actual product with its own price and tax behaviour, which is a merchant decision the theme can't make for you.
Editable text: heading, helper line, message field label and placeholder, and the Save/Saved labels are all section settings, in your own words.
How the message field behaves: type a message, click Save. It confirms, then collapses into a summary line with an Edit link, so returning to the cart later shows what was written rather than an empty-looking box. Unticking the checkbox clears both the wrapping choice and the message.
To see exactly what reaches the order, place a test order with wrapping and a message on, then check Additional details on the order in your admin.
Pre-order
Lets a product be sold before it's back in stock, with the button, a cart badge, and the order itself all reflecting that it's a pre-order. This is separate from the Pre-order product template described in Alternate templates — the template shapes the product page's content (shipping month, charge timing, cancellation), while this is what happens to the button and the order once that product is added to the cart.
What changes on the product page: the Add to cart button reads Pre-order, and a note appears underneath — a generic line by default, or your own per product via the custom.preorder_note metafield (e.g. "Ships mid-October").
What changes in the cart: a PRE-ORDER badge next to the line item, with the ship note beneath it.
What changes at checkout and in the order: the pre-order status travels as a line item property — the one mechanism a theme has for reaching past its own boundary into checkout — so it appears on the checkout summary, the confirmation email, and the order in admin, matching what the cart shows.
Triggering it: assigning the product the Pre-order template is the main way. A product can also become a pre-order automatically without changing its template, if a variant has inventory tracking on, is set to continue selling when out of stock, and its quantity is at or below zero — which covers a product selling through to backorder without you switching templates.
Pre-order only marks a line, not the order — if a customer buys a pre-order item alongside in-stock ones, Shopify still ships them together as one order. Splitting a shipment needs a dedicated app.
Quick Add
The button on a product card. What it does depends on the product.
- One variant — adds straight to the cart.
- Several variants — opens a drawer to choose. The options scroll and Add to cart stays pinned at the bottom, so a product with forty colours is still usable.
Quick Add can be switched off per template. It's off on the pre-order collection template, because a pre-order should be read before it's bought.
Cart page only
The full page has room for things the drawer does not.
- Cross-sell row. Products under the cart contents.
- Share cart. A link that recreates the cart for someone else. Useful for wishlists and for a shopper deciding with someone.
- Trust strip. The same component as elsewhere in the theme.
Notes
The drawer traps focus while open, closes on Escape, and returns focus to whatever opened it. Nothing to configure — worth knowing if you're testing with a keyboard.
Cart contents survive between the drawer and the page. They are the same cart, displayed twice.
Common questions
Why doesn't gift wrapping show up during checkout? Cart attributes surface in the cart, the order, and the confirmation email, but not inside checkout's own screens — a Shopify platform limit, not a setting to change.
A pre-order product still says "Add to cart." Check the product's template is actually set to Pre-order — that's what the theme keys off first. If you're relying on the automatic inventory path instead, confirm "continue selling when out of stock" is on for that variant.
The free shipping bar shows the wrong number. It's under Theme settings → Cart, not the individual Cart page or Cart drawer sections.