Cart drawer & cart page

Techno has a cart drawer that slides in from the side of any page, and a full cart page at /cart. Both show the same items and totals and update without reloading.

Cart drawer

The drawer opens when a shopper:

• Clicks the cart button in the header
• Adds a product to the cart from the product page, a Featured product section, a Kit, a product card's quick add button or its quick view

When the drawer opens after an add, screen readers hear "Item added to cart." once the drawer is open.

An add from quick view closes the quick view and opens the cart drawer in its place. When the shopper closes the cart drawer, keyboard focus goes back to the card's "Quick view" button.

If the menu or search drawer is already open when a shopper adds a product, the cart drawer stays closed rather than taking over the screen. So does a quick view whose content changed while the add was on its way: one the shopper opened for another card, or one where they chose another variant after pressing Add to cart. The item is still added and screen readers hear the same "Item added to cart." from the drawer that's open. The header count is updated behind the drawer, so it is already correct when the shopper closes it.

The drawer's header reads "Cart buffer [2]" with the item count. Each line shows the product image, title, variant, subscription plan, SKU, any line item properties, line discounts, unit price, a quantity control, a "Remove" button and the line price. A pre-order carries the property "Pre-order: Ships in March", with your pre-order note, or "Pre-order: Yes" (see Product page › Pre-orders).

Find these settings by opening the cart drawer in the theme editor: select Cart drawer in the sidebar. The drawer stays open while it's selected.

The drawer is on every page and can't be turned off. If JavaScript fails to load, the header's cart button opens the cart page instead.

Apps that add to or change the cart through Shopify's storefront actions update the drawer, the cart page and the header count in place, without reloading the page, and can open the drawer. See JavaScript components › Standard events and actions.

Cart page

The cart page shows the same lines in a panel, with the order summary and note beside them on wide screens and below them on narrower ones (860 px and under). On phones narrower than 480 px each line uses the drawer's smaller image, and under 360 px the quantity control, line price and "Remove" take a row of their own under the image, so they stay inside the line at any "Page margin".

The drawer and page settings are separate, so you can show the note in one place only.

Changing quantities

Shoppers change quantities with the − and + buttons or by typing a number. The cart updates as soon as a quantity changes: each − or + press is sent right away, and a typed number is sent when the shopper leaves the field or presses Enter. Keyboard focus stays where the shopper put it: on the − or + button they pressed, in the field after Enter, and on the line's + after typing a number and pressing Tab (− after Shift+Tab). A shopper who keeps tabbing before the cart has refreshed stays on the control they reached, such as the line's Remove, the next product's title or Checkout. A shopper who leaves the field without moving focus anywhere, by tapping Done on a phone's keyboard or clicking outside the cart, isn't moved either: focus doesn't jump to the first line's quantity or the drawer's Close button. If the line whose quantity is being typed is removed somewhere else while the cart refreshes, such as in another tab, focus moves to the drawer's Close button or, on the cart page, to the first product's name, where further typing changes nothing. Totals, discounts, the header count and the free dispatch message all refresh. Screen readers announce "Cart updated.", "Item removed." or "Item removed. Cart is empty."

If the cart can't make a change, for example a shopper asks for more than you have in stock, Shopify's explanation appears at the top of the cart lines and stays there until the shopper's next change. When Shopify makes part of the change, such as raising a line only as far as your stock allows ("Only 4 items were added to your cart due to availability."), the line, the totals and the header count show what the cart now holds, and keyboard focus stays where the shopper put it, as above. If a product was removed from the cart somewhere else, such as in another tab, and the shopper then changes its quantity, the cart shows what it now holds and says "This item is no longer in your cart." If it was the only product in the cart, the cart simply shows as empty.

For a B2B buyer, each line follows its variant's quantity rule: − and + step by the increment, − at the minimum removes the line, the rule shows under the variant, and a typed quantity the rule doesn't allow is put back with a message naming the product. Lines with volume pricing show their unit price, such as "$3.60 each". See B2B.

Coming back to the cart page with the browser's Back or Forward button shows the cart as it is now, so Checkout uses the current quantities. Safari on iPhone and iPad keeps the page as the shopper left it, so the theme loads it again; on any other page Safari reopens that way, the theme brings the header count and the cart drawer up to date.

If JavaScript fails to load, an "Update cart" button appears instead.

Order note

The note is saved to the cart when the shopper finishes editing and leaves the field, including by clicking a link or button elsewhere on the page, and it's attached to the order at checkout. A note still being typed when the shopper leaves the page another way, such as with the browser's Back button or by typing an address, may not be saved, and coming back to the page shows the note the cart holds. Find it on the order page in Shopify admin under Notes. The placeholder reads "Delivery instructions, PO number, anything we should know."

Summary

Discount codes are entered at checkout.

Free dispatch messages

Theme settings › Commerce › "Free dispatch over". It starts at 0, which hides every free dispatch message. If you offer free shipping, enter your real threshold in your store's currency. It's shown only to shoppers browsing in that currency. Set it back to 0 to hide the messages again.

When set, the cart summary shows one of:

The same amount appears in the header's Free dispatch note block and under the product page's add-to-cart button.

Recipes

Free shipping over an amount

• Settings › Shipping and delivery: add a free rate with a minimum order price condition, for example $150
• Theme settings › Commerce › "Free dispatch over": the same amount, for example 150
• Header › Add block: Free dispatch note

Note on the cart page only

• Cart drawer › "Show order note in the cart drawer": off
• Cart template › Cart › "Show order note on the cart page": on

Plain checkout wording

• Online Store › Themes › ⋯ › Edit default theme content: "Execute checkout" → "Check out", "Cart buffer" → "Cart"

See also

• Product page: add to cart
• Header & navigation: the Free dispatch note block
• Motion, effects & voice: editing theme text