Cart

This page covers the three forms of the cart (a drawer, a page and a popup notification), what a cart shows, and the cart settings: the free shipping goal, the order note, gift wrap, product suggestions and the terms checkbox.

Choose the cart type

1. Go to Online Store > Themes > Customize and open Theme settings.
2. Open Cart and choose Cart type: Drawer, Page or Popup notification.

The cart type decides what happens after a customer presses "Add to cart", on a product page or with a quick add button, and what the cart icon in the header does:

• Drawer (the default): the cart drawer opens with the product in it. The cart icon opens the drawer too. The drawer is a panel at the side of the screen, and a sheet at the bottom of the screen on phones.
• Page: the customer is taken to the cart page, with the product in it. The cart icon leads to the cart page too.
• Popup notification: a small panel titled "Added to your cart" shows the product that was just added, with its image, title, variant, subscription plan if there is one, and price, and three ways on: "View cart", "Check out" and "Continue shopping". The cart icon leads to the cart page.

The cart page exists with every cart type: the drawer and the notification both link to it. On the cart page itself neither the drawer nor the notification opens; a product added there, from the suggestions for example, appears in the page.

The other settings of the Cart group apply to the drawer and to the cart page alike. See the theme settings reference.

What the cart shows

The drawer and the cart page show the same parts: the free shipping goal, the products, gift wrap and the order note, product suggestions, the totals and the checkout button. In the drawer the totals and the checkout button stay in view at the bottom while the rest scrolls. On the cart page they sit in an order summary beside the products, and the suggestions come under both.

Cart lines

Each product in the cart shows:

• Its image and its title, both linked to the product.
• The product type or the vendor above the title. This follows Text above the title in Theme settings > Product cards.
• The chosen options, such as size and color.
• Line item properties, for example the recipient of a gift card or the fields an app adds to the product form. A property whose name starts with an underscore stays hidden, which is how apps keep internal values out of sight.
• The price of one item. When a discount applies, the original price is struck through beside it.
• The subscription plan, when the product was added with one.
• The unit price, such as the price per 100 ml, when the variant has one.
• Discounts on the line, with their name and amount.
• The line total. When a discount applies, the original total is struck through beside it.

Change a quantity or remove a product

Customers change a quantity with the minus and plus buttons or by typing a number, and remove a product with "Remove" or by typing 0. The cart updates at once, without a page reload: the totals, the free shipping goal and the number on the cart icon all follow.

Quantity rules from Shopify (a minimum, a maximum or steps) apply here as on the product page. If Shopify declines a change, for example because there is not enough stock, the line shows the quantity the cart now holds and the reason under it.

Free shipping goal

The goal is a line with a progress bar at the top of the cart: "You are $12.00 away from free shipping", then "Your order ships free" once the amount is reached. It shows in the drawer and on the cart page. It is off until you turn it on.

1. In Theme settings > Cart, turn on Show free shipping goal.
2. Enter the amount in Free shipping threshold, in your store's default currency. With 0 the goal does not show.

The goal compares the threshold with the cart's total after discounts.

The goal is a message only. It does not change what shipping costs, so make sure your shipping rates in the Shopify admin offer free shipping from the same amount.

Other currencies

You enter one amount, in your store's default currency. For a customer who shops in another currency, the theme converts the threshold with the exchange rate that Shopify uses for that currency, and shows the amount left in the customer's currency. The converted threshold is not rounded, so it can be an uneven number. If you set a fixed free shipping amount for a market that differs from the converted one, the message will not match it; in that case consider turning the goal off.

Order note

Show order note adds a row, "Add a note to your order", that opens a text field. The note is saved while the customer types and arrives with the order in the Shopify admin. The field starts open when the cart already has a note.

Gift wrap

Gift wrap product lets customers add gift wrapping with a checkbox.

1. In the Shopify admin, create a product for the gift wrap and give it a price.
2. In Theme settings > Cart, choose it in Gift wrap product.

The cart then shows a checkbox, "Add gift wrap", with the product's price. Checking it adds the product to the cart as a line of its own, and clearing it removes that line. The checkbox shows while the gift wrap product is available for sale.

Product suggestions

Show product suggestions adds a short list of products to a cart that has products in it. Each suggestion has a quick add button, and a product added from it goes into the cart in place.

• In the drawer: up to three compact cards under "Pairs well with". By default they are the products that Shopify recommends for the first product in the cart. To choose them yourself, select the Cart drawer section in the theme editor and pick a collection in Suggestions collection. The drawer then shows the first products of that collection that are in stock and not already in the cart.
• On the cart page: up to four product cards under the cart, which Shopify recommends for the first product in the cart. Change the heading with Suggestions heading in the Cart section.

The list stays hidden when there is nothing to suggest.

Totals, discounts and taxes

• Discounts: a discount that Shopify has applied to the cart, such as an automatic discount, shows where it applies. A discount on one product shows on its line. A discount on the whole order shows in the totals as its own row, between "Subtotal" and "Total".
• Total: without an order discount there is one row, "Subtotal". The amount always shows the currency code, whatever Show currency codes in Theme settings > Currency format is set to.
• Taxes and shipping note: under the total, a line reads "Taxes included. Discounts and shipping calculated at checkout." or "Taxes, discounts and shipping calculated at checkout.", depending on whether your store's prices include tax.

Discount codes are entered at checkout

The cart has no field for discount codes, and this is deliberate: Shopify's requirements for themes do not allow one in the cart. Customers enter their code at checkout, where Shopify checks it and shows the new total. The note under the total tells them so.

Checkout

Terms checkbox

Ask customers to agree to terms adds a checkbox above the checkout button in the drawer and on the cart page: "I agree to the terms and conditions". Customers must check it before the checkout button works. Choose a page in Terms page to make the words a link to it.

While the checkbox is on, every way to checkout that would skip it is left out: the accelerated checkout buttons on the cart page, the dynamic checkout button of the Buy buttons block (on the product page, in the Featured product section and in the quick add window), and the checkout button of the popup notification, which offers only "View cart". Checkout then always starts from the cart, where the checkbox is.

Checkout button and accelerated checkout buttons

The "Check out" button shows in the drawer and on the cart page, and in the notification unless the terms checkbox is on.

Accelerated checkout buttons, such as Shop Pay, PayPal or Apple Pay, show on the cart page only, under the checkout button. They appear when your store's payment settings offer them and the terms checkbox is off. Shopify draws these buttons and decides which ones a customer sees; the theme does not restyle them. The drawer and the notification do not show them: the drawer has a "View cart" link that leads to the page.

Empty cart

An empty cart shows "Your cart is empty" and a "Continue shopping" button that leads to all products. You can add products under it:

• In the drawer: the first two products of the Suggestions collection, when one is chosen in the Cart drawer section.
• On the cart page: the first four products of the Collection for an empty cart, chosen in the Cart section.

These show whether Show product suggestions is on or off.

The cart page

To edit the cart page, open Cart from the template picker at the top of the theme editor. Its section, also named Cart, has the two settings above, a color scheme and the section spacing. See all Cart settings.

Assurance lines

Assurance blocks are short lines with an icon under the checkout buttons, such as "Secure checkout" or "Free returns within 30 days".

1. In the theme editor, open the cart page and select the Cart section.
2. Add an Assurance block.
3. Choose an Icon and enter the Text. A block without text does not show.

The lines show while the cart has products in it. The section takes five blocks at most: assurance lines, Custom Liquid blocks and app blocks together.

App blocks in the cart

The Cart section accepts app blocks, and a Custom Liquid block for an app snippet or your own code. They show in the order summary, under the assurance lines, while the cart has products in it. The cart drawer and the notification have no place for these blocks, so if an app must show in the cart, use the cart page: set Cart type to Page, or keep the drawer and rely on its "View cart" link.

What the cart page offers that the drawer does not

• Accelerated checkout buttons.
• Assurance lines.
• App blocks and Custom Liquid blocks.
• Suggestions as full product cards, with a heading that you can change, and up to four products for an empty cart.
• Its own color scheme. The drawer and the notification use Drawer and dialog color scheme from Theme settings > Colors.
• It works in a browser without JavaScript, with an "Update cart" button. The drawer and the notification need JavaScript; without it, the cart icon and the add to cart button lead to the cart page.

The drawer has one thing that the page does not: the Suggestions collection. See Cart drawer settings.