Cart

6 min read

Cosmero has a cart drawer, which slides in from the side of the page, and a cart page. Both show the same cart lines, order summary, free shipping progress and “Complete your ritual” suggestions. Most of what you can change is in theme settings, under Cart, and applies to both.

Cart settings

Online Store → Themes → Customize → Theme settings → Cart

From your Shopify admin, go to Online Store → Themes, then select Customize on Cosmero.
Open Theme settings and select Cart.
Change the settings, then select Save.

Cart type: Drawer (the default) or Page. With Drawer, the cart link in the header opens the cart drawer, and so does adding a product to the cart. With Page, the cart link opens the cart page, and adding a product on its product page shows “Added to cart.” with a “View cart” link under the button. Without JavaScript, the cart link always opens the cart page.
Show order note: shows a field for an order note. In the drawer, it’s a row named “Add a note” that opens the field.
Show discount code field: lets customers apply discount codes in the cart. Applied codes show as pills that customers can remove, and a code that doesn’t apply shows a message. In the drawer, the field is in a row named “Add a discount code”.
Show accelerated checkout buttons: shows the express payment methods you have set up, such as Shop Pay, in the cart drawer and on the cart page.
Free shipping threshold: the amount the free shipping progress bar counts up to, in your store currency, such as 50. Leave it empty to hide the bar. See Free shipping progress.
Show “Complete your ritual”: shows complementary products for the newest item in the cart. See Complete your ritual.
Collection for empty cart: shows up to 4 products from this collection when the cart is empty.

Free shipping progress

The progress bar shows customers how far their cart is from free shipping, in the drawer and on the cart page. It uses real amounts only:

The goal is the Free shipping threshold you enter.
Progress is the cart’s total after discounts, the same amount as the “Estimated total” in the cart.
Below the threshold, the bar gives the exact amount left: “Spend … more for free shipping.” Once the total reaches the threshold, it says “You’ve unlocked free shipping.”
It’s hidden when the threshold is empty or 0, when the cart is empty, and when a customer shops in a currency other than your store currency. A converted threshold would only be an estimate, and could promise free shipping that checkout then charges for.

The bar only shows progress: it doesn’t change what checkout charges. Set up a matching shipping rate so the two agree.

In your Shopify admin, go to Settings → Shipping and delivery and add a shipping rate with a price of 0. Select Add conditions, choose Based on order price and enter your chosen amount, such as 50, as the minimum price.
In the theme editor, open Theme settings → Cart.
Enter the same amount in Free shipping threshold, then select Save.

Complete your ritual

Under the cart lines, “Complete your ritual” suggests products that go with the newest item in the cart: that product’s complementary products, leaving out products already in the cart. It stays hidden when the newest item has no complementary products, or when they’re all in the cart already. Show “Complete your ritual” in theme settings turns it on or off.

You set complementary products for each product in the Search & Discovery app or in the product’s Complementary products metafield. See Complementary products.

Two sections with the same name

Cosmero has two sections labeled Complete your ritual, one for each place the suggestions appear. Neither has settings or appears under Add section, and you don’t place them anywhere: the cart page and the cart drawer each load their own. They differ in layout and in when they load:

On the cart page: up to 4 product cards in a row, under the cart lines. They load as customers scroll near them.
In the cart drawer: up to 3 compact rows, each with a small image, the title, the price and a quick add button. They load when the drawer opens.

Both use the Product cards settings in Theme settings, so the quick add button follows Show quick add button.

Cart drawer

The drawer is the Cart drawer section. It has no settings and isn’t on any template: Cosmero adds it to every page except the cart page when Cart type is Drawer. Its colors come from Drawer color scheme, under Colors in theme settings.

From top to bottom, the drawer shows:

“Cart” with the number of items, then the free shipping bar;
the cart lines and “Complete your ritual”, which scroll;
the order summary, which stays at the bottom: the “Add a note” and “Add a discount code” rows, the “Estimated total”, the “Check out” button and the accelerated checkout buttons.

Cart page

The cart page uses the cart template, which has one section, Cart. The cart lines and “Complete your ritual” sit in one panel. The order summary sits in a second panel, beside the first on desktop, where it stays in view while customers scroll. It holds the free shipping bar, the order note, the discount code field, the totals and the checkout buttons. With an empty cart, a single panel shows the empty cart.

In the theme editor, open the drop-down menu at the top (it starts on Home page) and choose the cart template.
Select Cart in the sidebar.
Change the settings, then select Save.

Panel

Color scheme: the colors of the panel with the cart lines.
Summary color scheme: the colors of the order summary panel.
Panel style: Panel or Flush. Flush panels span the full page width with square corners.
Enable full width on mobile: on phones, the panels span the full screen width with square corners. Shown when Panel style is Panel.
Top padding and Bottom padding: the space above and below the panels, from 0 to 120 px.

What the cart shows

Each line shows the product image, the title, the chosen options, the selling plan when there is one, any line item properties, the unit price, the price with line discounts, a quantity field, “Remove” and the line total. Changing a quantity or removing a line updates every line and the totals right away.

The order summary shows:

the subtotal and order discounts, when an order discount applies, including automatic discounts;
the “Estimated total”, and “Due today” when part of the payment comes later, such as a pre-order deposit;
a line about taxes, and “Shipping calculated at checkout.” with a link to your shipping policy when you have one;
the “Check out” button, then the accelerated checkout buttons.

Empty cart

An empty cart shows “Your cart is empty” and a “Continue shopping” button that leads to all your products. When customer accounts are on, customers who aren’t logged in also get a link to log in. With Collection for empty cart set, up to 4 products from that collection show below, under the collection’s title.

Tips

Enter the same amount in Free shipping threshold as in your free shipping rate, and update both together when your offer changes.
Choose a collection for Collection for empty cart, such as your bestsellers or your sets, so an empty cart still shows customers where to start.