Cart
How the cart works: a slide-out drawer or a full cart page. It also sets what shoppers can do there (notes, discount codes, shipping estimates, express checkout) and extras like the free-shipping progress bar, low-stock warnings and a terms checkbox.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Cart.
Good for
- Keeping shoppers on the page after they add to cart with a cart drawer
- Nudging order values up with a free-shipping progress bar
- Requiring shoppers to accept your terms before checkout
Set up the free shipping bar
- In Shopify admin, go to Settings → Shipping and delivery and add a free shipping rate with a minimum order price, for example free over $75.
- Back here, turn on Show free shipping bar and enter the same amount in Amount, as a plain number (for example
75). - Optionally edit Message (keep
{amount}where the remaining amount should appear) and the Success message.
Settings
| Cart type | Drawer slides the cart in from the side so shoppers stay on the page they were on. Page sends the cart icon to the full /cart page.
Choose Drawer (default) or Page. |
| Show accelerated checkout | Shows express checkout buttons (Shop Pay, Apple Pay, PayPal and others) under the Check out button. Which buttons appear depends on the payment methods turned on in Shopify admin.
On by default. |
| Show discount code | Lets shoppers enter and apply a discount code in the cart instead of waiting for checkout.
On by default. |
| Show estimated shipping | Adds a shipping estimator: the shopper enters their country and postal code to see your shipping rates before checkout.
On by default. |
| Show cart note | Adds a field where shoppers can leave a note with their order. You'll see it on the order in Shopify admin.
On by default. |
| Show payment methods | Shows the icons of the payment methods you accept under the checkout button.
On by default. |
Product cart options
| Show product vendor name | Shows each product's vendor on its line in the cart.
On by default. |
| Image ratio | The shape of product thumbnails in the cart.
Choose Adapt to image (default), Portrait (3:4), Square (1:1) or Landscape (4:3). |
Stock alert
| Show stock alert | Shows a short warning under a cart item when its stock is at or below Threshold. It only works for variants whose inventory Shopify tracks.
On by default. |
| Threshold | The stock level at which the warning appears. With 5, an item shows the warning when 5 or fewer units are left.
Adjustable from 1 to 100 (default 5). Only appears when Show stock alert is on. |
| Message | The warning text, for example Only a few left. Leave it empty to use the theme's default. The actual number left isn't shown.
Only appears when Show stock alert is on. |
| Text color | The color of the low-stock warning text in the cart.
Default: #007988. Only appears when Show stock alert is on. |
Cart icon
| Icon | The icon shown for the cart in the header: a shopping bag or a shopping cart.
Choose Shopping bag (default) or Cart. |
Free shipping bar
| Show free shipping bar | Shows a progress bar in the cart telling shoppers how much more to spend to get free shipping. It is only a message: you still need to set up the free shipping rate in Shopify admin.
On by default. |
| Amount | The order total that unlocks free shipping, as a plain number in your store's main currency (for example 75). Match it to the free shipping rate in your Shopify shipping settings.
Only appears when Show free shipping bar is on. |
| Message | The pattern {amount} is replaced with the remaining amount.
Only appears when Show free shipping bar is on. |
| Success message | The message that replaces the progress text once the cart reaches the free shipping amount. Leave it empty to use the theme's default.
Only appears when Show free shipping bar is on. |
Checkbox
| Show checkbox | Adds a checkbox (for example I agree to the terms of service) that shoppers must tick before the Check out button will work.
Off by default. |
| Text | The text next to the checkbox. Add a link to your terms or policy page here. If it is empty, the checkbox isn't shown.
Only appears when Show checkbox is on. |
Empty cart
| Message | The message shown when the cart has nothing in it. |
| Button label | The text on the button shown in an empty cart. |
| Button link | Where that button goes. Leave it empty to send shoppers to your all-products collection. |
Tips
- The bar is only a message. It doesn't change shipping prices. Keep Amount in sync with your real free shipping rate, or shoppers will see a promise checkout doesn't keep.
- Other currencies convert automatically. Enter the amount in your store's main currency; shoppers browsing in another currency see the converted figure.
- Link your terms in the checkbox text. Shoppers are more likely to tick a box they can read. Add a link to your terms of service or returns policy.
- Product cards can echo the bar. In Product card, Show cart discount text puts the same spend X more message under each card.
Troubleshooting
The cart drawer doesn't open when I click the cart icon
Cart type is set to Page, so the icon goes to the cart page instead. Switch it to Drawer.
The free shipping bar isn't showing
Turn on Show free shipping bar and enter an Amount greater than 0. With no amount, there is nothing to count towards.
The terms checkbox isn't showing
The checkbox only appears when Show checkbox is on and Text isn't empty.
Express checkout buttons don't appear
They only show for payment methods you've turned on in Settings → Payments in Shopify admin, and some only appear on supported devices or browsers (Apple Pay, for example, only on Apple devices using Safari).
Heads up: Express checkout buttons (Shop Pay, Apple Pay, PayPal and others) start their own checkout, so the terms checkbox can't hold them back. If shoppers must accept terms, consider turning off Show accelerated checkout.