Customize
Cart
Choose a cart drawer or a cart page, show progress toward free shipping, suggest products that go together and collect order notes.
Drawer or page
Go to Theme settings > Cart > Cart type.
- Drawer (default): the cart opens in a panel from the side of the screen when shoppers add a product or select the cart icon. Shoppers stay on the page they were browsing.
- Page: adding a product takes shoppers to the cart page, and the cart icon leads to the cart page.
The cart page at /cart is always available, whichever type you choose. In both, shoppers can change quantities and remove items without reloading, and see order discounts, the estimated total and a note about taxes and shipping.
Cart drawer section
The drawer is its own section, Cart drawer. Choose drawer or page, free shipping amount, cart note and suggestions in Theme settings > Cart. The section's own settings:
- Color scheme
- Colors of the drawer.
Free shipping progress
- Progress style
- Bar or Ring.
Reassurance
- Show delivery estimate
- Uses the delivery estimate settings in Theme settings. See Reassurance and delivery estimate.
- First text, First icon
- A short line with an icon.
- Second text, Second icon
- A second short line with an icon.
Checkout
- Show discount code field
- Lets shoppers enter a discount code in the cart.
- Show express checkout buttons
- Buttons such as Shop Pay and PayPal under the checkout button.
Empty cart
- Text
- The line under "Your cart is empty". Leave blank to use the default text.
- Featured collection
- Shown as a photo card when the cart is empty, to help shoppers find something.
- Featured collection label
- A small label on the featured collection card.
- Featured collection title
- Leave blank to use the collection title.
- Featured collection image
- Leave blank to use the collection image.
- All products image
- The photo on the card that leads to all products. Leave blank to use a product image.
Block: Link
Link rows shown in the empty cart, for example to your shipping and returns page. Up to 4 blocks.
- Icon
- One of the built-in icons.
- Text
- The link text.
- Link
- Where the row leads.
Cart page section
In the theme editor, choose Cart in the page selector to edit the Cart section. On wide screens, the cart is on the left and an order summary stays in view on the right.
- Show continue shopping link
- A link back to your products.
- Color scheme
- Colors of the page.
- Summary color scheme
- Colors of the order summary.
Free shipping progress
- Progress style
- Bar or Ring.
Reassurance
- Show delivery estimate, First text, First icon, Second text, Second icon
- Work the same as in the cart drawer.
Checkout
- Show discount code field
- Lets shoppers enter a discount code in the cart.
- Show express checkout buttons
- Buttons such as Shop Pay and PayPal under the checkout button.
Section padding
- Top padding, Bottom padding
- Space above and below the cart.
Free shipping progress
Set Theme settings > Cart > Free shipping threshold to the order amount that qualifies for free shipping, in your store's currency. For example, enter 75 for 75 dollars if your store currency is USD. Use 0 to hide the progress bar.
The cart then shows a message such as "$20.00 away from free shipping" with a bar or ring that fills as the cart grows, and "You've unlocked free shipping" once the cart total reaches the threshold. The cart total used is the amount after order discounts.
- Show confetti when free shipping is reached
- Plays a short confetti burst once when the cart reaches the threshold. Not played for visitors who prefer reduced motion.
The threshold only controls the message. To actually offer free shipping, create a free shipping rate with a minimum order price in Settings > Shipping and delivery, using the same amount.
You can also show the threshold in the announcement bar and in the header's Perks with the [free_shipping_threshold] placeholder. See Announcement bar and Header.
Multiple currencies
If you sell in several currencies with Shopify Markets, enter the threshold in your store's default currency. For shoppers browsing in another currency, the cart converts the threshold with the current exchange rate and shows the remaining amount in their currency.
Converted amounts follow the exchange rate, not your market's rounding or any fixed prices you set for that market. If you need an exact free shipping amount per market, set shipping rates per market and keep the meter as a guide.
The announcement bar placeholder is not converted. See the FAQ.
Reassurance and delivery estimate
The cart drawer and the cart page can show a row of short reassurance notes near the cart items:
- With Show delivery estimate on, an "Arrives" note with a date range. It is calculated from Theme settings > Delivery estimate, the same way as the Delivery estimate block on product pages.
- Up to two notes of your own, each with an icon: First text and Second text. Leave a text empty to hide that note.
Only write what your store actually offers, such as your real returns policy.
Discount codes and express checkout
With Show discount code field on, the cart shows a "Have a discount code?" link that opens a code field. Applied codes show as removable labels and the savings show in the totals. Shoppers can always enter codes at checkout, whether or not the field is shown.
With Show express checkout buttons on, buttons such as Shop Pay and PayPal appear under the checkout button, using the payment methods available on your store.
Complementary products
With Theme settings > Cart > Show complementary products on, the cart drawer and the cart page show a row of up to eight suggestions, under the Heading you choose (default: Pair it with).
- Suggestions are based on the first item in the cart, which is usually the product added most recently.
- They come from the complementary products you set in the Search and Discovery app. When that product has none, Shopify's automatic related product recommendations are used instead.
- Products already in the cart and sold out products are skipped.
- Single-variant products are added with one tap. For products with options, the add button opens a small picker over the photo for the last option, usually the size, and one tap on a value adds that variant without leaving the cart.
Set up complementary products
- Install the Search and Discovery app.
- In the app, open Product recommendations and select a product.
- Add products under Complementary products and save.
Order notes
Turn on Theme settings > Cart > Enable order notes to let shoppers add a note, such as gift wrapping instructions. In the drawer, the note field is in a collapsible row; on the cart page, it is always open. The note is saved as shoppers type and appears on the order in your admin.