Masthead has two carts that share the same content: a cart drawer that slides in from the side
when a customer adds a product, and a full cart page at /cart. You choose which
one customers use, and both show the same items, totals and checkout button.
Drawer or page
In theme settings, under Cart, Cart type decides what happens when a customer adds a product or selects the cart icon:
- Drawer: the cart opens in a drawer over the current page. Customers see what they added and keep their place, which suits browsing.
- Page: customers are taken to the cart page. Choose this if you rely on apps that only work on the cart page.
The cart page exists either way, and the drawer is never shown on it.
What the cart shows
- Each item with its image, title, chosen options and price, a quantity control and a remove button. Subscription items show their plan, and items with extra details, such as a gift card's recipient, show those too.
- Discounts that apply to an item or to the whole cart, with the amount saved. Discount codes themselves are entered at checkout.
- An order note field, when Show order note field is on.
- The subtotal, with a line on taxes and shipping that follows your store's tax settings and links to your shipping policy when you have one.
- The checkout button. On the cart page, accelerated checkout buttons such as Shop Pay are offered as well.
An empty cart shows a short message and a link back to shopping.
Two optional extras are covered below: a free shipping bar, and recommended products in the drawer.
Free shipping bar
The free shipping bar shows customers how close they are to free shipping: a progress bar with a line such as "You're $20.00 away from free shipping", which changes to "You've got free shipping" once they reach the amount. It appears at the top of the cart drawer and the cart page, and updates as items are added or removed.
It is off by default. To turn it on:
- In theme settings, open Cart.
- Turn on Show free shipping bar.
- In Free shipping from, type the order value at which shipping becomes free, as a number without a currency symbol. For example, 100.
The bar does not create a shipping rate. It only shows a message. Set up the matching free shipping rate in your Shopify admin under Settings > Shipping and delivery, and keep the two amounts the same. Promising free shipping the checkout then charges for loses the sale.
Selling in more than one currency
You enter the amount once, in your store's main currency. For a customer paying in another currency, the theme converts it at the current exchange rate and shows it in their currency.
If you use Shopify Markets with price rounding, the free shipping rate you set for that market is usually a rounded figure, such as 90 euros, while the converted amount in the bar might be 92.40 euros. The bar and the checkout can then differ by a small amount. If you sell in several currencies, check the bar in each one against your shipping rates, and leave it off if they do not line up.
Recommended products in the cart drawer
At the bottom of the cart drawer, under the heading "You may also like", the theme can suggest a few products that go with the item added last. Each is shown small, with its image, name and price. A product with one variant has a button that adds it straight to the cart; a product with options links to its product page.
- Show recommended products turns the suggestions on or off. They are on by default.
- Heading changes the words above them.
- Products to show sets how many, from 2 to 4.
The suggestions come from Shopify's product recommendations, so they improve as your store gets orders, and you can choose them yourself in the Search & Discovery app. Products already in the cart are left out. They are loaded only after the drawer opens, so they never slow a page down. With nothing to suggest, the heading is hidden too. The cart page does not show them; add a Featured collection section there instead.
Cart settings
These are in theme settings under Cart. They apply to the drawer and the page alike, except the recommendations, which are in the drawer only.
| Setting | Options | What it does |
|---|---|---|
| Cart type | Drawer or Page. Default: Drawer. | Drawer opens the cart in a panel at the side of the page, so customers keep their place. Page uses the full cart page instead. |
| Drawer color scheme | Color scheme. | The color scheme of the cart drawer. The filter drawer, the size chart drawer, the quick view and the gift card page use it too. |
| Show order note field | On or off. Default: on. | Lets customers add a note to their order in the cart. |
| Show vendor | On or off. Default: off. | Shows each product's vendor in the cart. |
| Free shipping bar | ||
| Show free shipping bar | On or off. Default: off. | Shows a progress bar in the cart drawer and on the cart page: how much more to spend for free shipping, then a message once the amount is reached. Off by default. Turn it on only if you really offer free shipping from the amount below. |
| Free shipping from | Number. Default: 100. | The order value at which shipping becomes free, in your store's main currency, as a number without a symbol. For customers paying in another currency, the theme converts it at the current rate. See the note on currencies under the table. |
| Recommendations in the cart drawer | ||
| Show recommended products | On or off. Default: on. | Suggests products that go with the item added last, at the bottom of the cart drawer. They load only after the drawer opens, so they never slow the page. |
| Heading | Text. | The heading above the suggested products. |
| Products to show | 2 to 4. Default: 3. | The most products to suggest. |
The cart page
To edit the cart page, use the page selector at the top of the theme editor and choose Cart. Its main section, Cart, has a color scheme, and accepts app blocks, for apps that add something to the cart such as a gift note or a shipping estimate. You can add other sections below it, for example Recently viewed or a Featured collection.
| Setting | Options | What it does |
|---|---|---|
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
Tips
- Write a shipping policy in Settings > Policies, so the cart can link to it.
- Only turn on the free shipping bar for an offer that is really running. An invented offer costs trust.
- Turn off the order note if you never act on notes. An unread note disappoints the customer who wrote it.
- The drawer takes its colors from Drawer color scheme. The filter drawer, size chart drawer and quick view follow the same scheme, so they always match.