Cart and checkout

Cart drawer or cart page

Theme settings → Cart → Cart type:

• Drawer: adding to cart opens a panel beside the page. Customers can change quantities, remove items and check out without leaving the page. View bag opens the full cart page.
• Page: adding to cart takes the customer to the cart page.

The cart page exists with either choice, at /cart.

What the cart shows

For every line:

• the image, the title and each option, for example “Size: 36”
• the price, with the original price when it’s discounted
• the line total, and the unit price where there is one (for example per 100 ml)
• a subscription plan name, line-item properties and line discounts

For the whole cart:

• order discounts and their amounts
• the subtotal, with a note on whether taxes and duties are included or calculated at checkout
• your Cart message, the order note (with Enable order notes), the checkout button and accelerated checkout buttons

Changing a quantity updates every line and the totals at once, without reloading the page. If a customer asks for more than you have in stock, the cart shows Shopify’s stock message on that line and resets it to the quantity available. Without JavaScript, the cart still works through a standard update button.

Accelerated checkout

Buttons such as Shop Pay, Apple Pay and Google Pay appear automatically for the payment methods you’ve turned on in Settings → Payments. Turn them off by location:

• product page: Buy buttons → Show dynamic checkout buttons
• cart drawer: Bag drawer → Show accelerated checkout buttons
• cart page: Cart → Show accelerated checkout buttons

The buttons’ brand colors come from Shopify and the payment providers, and themes can’t change them.

Discounts

• Customers enter discount codes at checkout.
• Automatic discounts and discounts applied from a link appear in the cart with their names and amounts, on the line or on the whole order.

Checkout

Checkout is hosted by Shopify, and the theme doesn’t change it. Customize it in Settings → Checkout, including your logo and colors.

Cart drawer colors

Select the Bag drawer section in the editor sidebar to choose its Color scheme. Selecting it opens the drawer in the preview.