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
| Setting | Default | What it does |
|---|---|---|
| Cart name | Bag | What your store calls the cart, for example Cart, Bag or Basket. Used in headings, buttons and messages. |
| Cart name in sentences | bag | The same word as it reads mid-sentence, for example bag in "Add to bag". |
| Show accelerated checkout buttons on the cart page | On | Shows 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 bar | Off | Shows how much more a shopper needs to spend for free shipping, in the cart drawer, cart page and announcement bar. |
| Free shipping threshold | 50 | The 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.
| Option | In the cart |
|---|---|
| Automatic | Follows your tax settings: "incl. tax" when your prices include tax, "excl. tax" when they don't. |
| Show incl. tax | Always shows "incl. tax". |
| Show excl. tax | Always shows "excl. tax". |
| Hide tax label | Shows 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.
| Setting | Default | What it does |
|---|---|---|
| Mobile presentation | Bottom sheet | On 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. |
| Eyebrow | Empty | Small 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.
| Setting | Default | What it does |
|---|---|---|
| Items eyebrow | Your items | Small 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.
| Setting | Default | What it does |
|---|---|---|
| Left footer link label | Continue shopping | A link below the order summary. It shows only when both a label and a URL are set. |
| Left footer link URL | Empty | Where the link goes. |
| Eyebrow | Empty | Small 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.
| Setting | Default | What it does |
|---|---|---|
| Enable carousel | On | On shows the products in a sliding row. Off shows them in a grid. |
| Show carousel arrows | On | Only used when Enable carousel is on. |
| Show carousel dots | On | Only used when Enable carousel is on. |
| Max number of products | 2 | From 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.