Cart Page
The Cart Page is where your customers review what they have added before checking out. It shows each product with its image, name, selected options, and price. Customers can change quantities, remove items, apply a discount code, add a note to their order, and proceed to checkout — all from one place.
Section Settings
General
- Color Scheme — Choose a color scheme that matches the rest of your store. This controls the background, text, and border colors across the entire cart page.
- Padding Top / Padding Bottom — Controls the space above and below the cart section. You only need to set the desktop value; the theme handles the rest automatically.
Gift Box
- Enable Gift Box — Turns on a gift upsell button inside the order summary. When a customer clicks it, a pre-selected product is added to their order.
- Gift Product — The product that appears as the gift offer. Only set this after turning on Enable Gift Box. Make sure the product you pick is in stock, otherwise the button will not appear.
What Customers Can Do
- Adjust quantities — Customers can increase or decrease the quantity of any item directly from the cart.
- Remove items — Each item has a remove button. Removing an item updates the cart immediately.
- Add a note — An optional note field lets customers leave a message for your store. The note is attached to the order and visible in your Shopify Admin.
- Apply a discount code — Customers can enter a discount code and apply it directly from the cart. If the code is valid it is shown as a tag they can remove. Multiple codes can be applied at once.
- Proceed to checkout — The checkout button takes customers to Shopify's checkout with their cart and any discount codes already applied.
Order Summary
The right side of the cart page shows a running total of the order. It includes the subtotal, any discounts that have been applied, and the final total. Taxes and shipping are calculated at Shopify's checkout.
If your Shopify plan supports express checkout options like Shop Pay or PayPal, those buttons appear below the main checkout button automatically.
Empty Cart
When the cart has no items, the page shows a short message and a button that takes customers back to your store to continue shopping.
Cart Drawer
The Cart Drawer is a slide-in panel that opens from the right side of the screen when a customer clicks the cart icon. It gives customers a quick look at their cart without leaving the page they are on. It has the same features as the Cart Page — quantity controls, discount codes, a note field, and checkout — but in a compact panel so shopping is not interrupted.
How to Open the Drawer
The drawer opens when a customer clicks the cart icon in your header. Clicking the icon again, clicking the X button inside the drawer, or clicking the dimmed area behind the drawer will close it.
You can also set the drawer to open automatically every time a product is added to the cart. This is controlled by the Cart Drawer Auto Open setting in your global theme settings.
What Customers Can Do
- Adjust quantities — Same as the Cart Page. Customers can increase or decrease quantities directly inside the drawer.
- Remove items — The trash icon next to each item removes it from the cart.
- Add a note — An expandable section lets customers type a note for your store. Clicking Save sends the note without closing the drawer.
- Apply a discount code — Customers can enter and apply discount codes from inside the drawer. Applied codes show as removable tags. Multiple codes are supported.
- View cart — A button at the bottom of the drawer takes customers to the full Cart Page.
- Checkout — The checkout button submits the cart and takes customers to Shopify's checkout. Any active discount codes go with them automatically.
Order Totals
The bottom of the drawer shows the subtotal, any applied discounts, and the final total. A note reminds customers that taxes and shipping are calculated at checkout.
Gift Button
If you have set up a Gift Product in the Cart Page settings, the same gift upsell button appears inside the drawer as well. To enable the gift card, you will have to go to the "header" and make sure you have enabled it.
- Enable cart drawer gift box
- Cart drawer gift product added
No extra setup is needed — it reads the setting you have already configured there.
Empty Cart
When the cart is empty, the drawer shows a short message and a Continue Shopping button. The checkout button is not available in this state.
Settings
The Cart Drawer does not have its own section in the Theme Editor. Its color scheme and gift product are controlled by the Cart Page section settings. The auto-open behavior is controlled by your global Theme Settings.
Accessibility
The cart drawer is built with accessibility in mind. When the drawer opens, keyboard focus moves into it automatically and is trapped inside — Tab and Shift+Tab cycle through the drawer's interactive elements without reaching the page behind it. When the drawer closes, focus returns to the element that opened it (usually the cart icon). Screen readers are notified of cart updates through a live region that announces the new item count whenever it changes.