All docs

Guides

Cart

Name your cart, set up the cart drawer and cart page, and choose accelerated checkout, free shipping progress and tax labels.

Propel has two carts that share the same contents: a cart drawer that slides in from the side, and a full cart page. Their shared options are in Online Store > Themes > Customize > Theme settings > Cart and checkout. Each also has its own sections in the theme editor.

Cart and checkout settings

SettingDefaultWhat it does
Cart nameBagWhat your store calls the cart, for example Cart, Bag or Basket. Used in headings, buttons and messages.
Cart name in sentencesbagThe same word as it reads mid-sentence, for example bag in "Add to bag".
Show accelerated checkout buttons on the cart pageOnShows express payment buttons such as Shop Pay or PayPal in the cart drawer and on the cart page. Which buttons appear depends on your payment settings.
Enable free shipping progress barOffShows how much more a shopper needs to spend for free shipping, in the cart drawer, cart page and announcement bar.
Free shipping threshold50The order amount for free shipping, in your store currency, from 0 to 500. 100 means 100 of your store currency.

When you change Cart name, also change Cart name in sentences so the two match. To show the cart name in other languages, translate both settings in Translate & Adapt.

Free shipping progress bar

When Enable free shipping progress bar is on, the cart shows a bar and a message:

  • "$20.00 to go for free delivery." while the shopper is below the threshold;
  • "Almost there: you're close to free delivery." when they are within a tenth of it;
  • "Your order ships free." once they reach it.

Keep in mind:

  • The bar only displays a message. Set up the free shipping rate itself in Settings > Shipping and delivery in your Shopify admin, using the same amount.
  • The threshold is in your store currency, so the bar shows only to shoppers paying in that currency. Shoppers paying in another currency don't see it.
  • The bar measures the cart total, after discounts.

The announcement bar can show the same message with a Delivery threshold block. See Header and menus.

Tax label

Tax label is in Theme settings > Product display. It adds an "incl. tax" or "excl. tax" note to prices on the product page, product cards and the cart.

OptionIn the cart
AutomaticFollows your tax settings: "incl. tax" when your prices include tax, "excl. tax" when they don't.
Show incl. taxAlways shows "incl. tax".
Show excl. taxAlways shows "excl. tax".
Hide tax labelShows no note.

On the cart page, the note follows "Taxes calculated at checkout". The cart drawer shows "Shipping & taxes calculated at checkout".

What the cart shows

Both carts show the order Total, with the shipping and tax note under it.

  • The Subtotal line shows above the Total only when a cart discount makes them differ.
  • Discounts applied to the whole cart, such as automatic discounts, are listed by name with their amount.
  • A You save line adds up the shopper's savings: discounts, sale prices (from compare-at prices) and subscription savings.
  • Shoppers enter discount codes at checkout.

Both carts also have an Order note field. The note is saved with the order, including when the shopper pays with an accelerated checkout button.

Cart drawer

The cart drawer opens when a shopper selects the cart in the header or adds a product. It shows the items, the free shipping progress bar, the Total, a link to the cart page, the order note, the Checkout button and any accelerated checkout buttons.

To edit it, select Cart drawer in the theme editor.

SettingDefaultWhat it does
Mobile presentationBottom sheetOn phones, Bottom sheet opens the cart over the lower 70% of the screen. Full screen fills the whole screen. Propel's default setup uses Full screen.
EyebrowEmptySmall text above the cart heading. Leave blank to hide it.

Cart page

The cart page is built from three sections. To edit them, choose Cart from the page menu at the top of the theme editor.

Cart main

The list of items, with quantities, an update button and the order note.

SettingDefaultWhat it does
Items eyebrowYour itemsSmall text above the list of items. Leave blank to hide it.

Cart summary + actions

The order summary, free shipping progress bar, Checkout button and accelerated checkout buttons.

SettingDefaultWhat it does
Left footer link labelContinue shoppingA link below the order summary. It shows only when both a label and a URL are set.
Left footer link URLEmptyWhere the link goes.
EyebrowEmptySmall text above the order summary heading. Leave blank to hide it.

You can also add Custom Liquid blocks and app blocks to this section.

Cart upsell

A "You may also like" row of products under the cart. Shopify's product recommendations choose the products, based on the first product in the cart. The row shows only when the cart has items.

SettingDefaultWhat it does
Enable carouselOnOn shows the products in a sliding row. Off shows them in a grid.
Show carousel arrowsOnOnly used when Enable carousel is on.
Show carousel dotsOnOnly used when Enable carousel is on.
Max number of products2From 1 to 8. Fewer may show if Shopify finds fewer related products.

Accelerated checkout

Accelerated checkout buttons, such as Shop Pay, Apple Pay or PayPal, let shoppers skip the cart and pay in fewer steps. Which buttons appear depends on the payment methods you turn on in Settings > Payments.

  • In the cart: turn them on or off with Show accelerated checkout buttons on the cart page. The setting covers both the cart drawer and the cart page.
  • On the product page: turn them on or off with Show accelerated checkout buttons in the Main product section. There, they appear once the shopper has chosen every option and the variant is in stock. See Product page.