Blocks

New carts start with the blocks their template chose. The rest are a click away under Add block, already styled to match and with the template’s starting settings. A cart can have one of each block except Custom HTML; see Which blocks go where. Settings that aren’t listed here are explained in the editor next to the setting.

Some templates add settings of their own to a block. They show in the block’s settings, under the ones described here. Minimalist adds Title alignment to the title bar, Image shape and Column headings to the items list, and Text alignment and Star icon to loyalty points.

Cart title bar

The cart’s title and close button. You can hide the title, show how many items are in the cart, choose between a plain or a round close button, and put the close button on the left or right.

Cart items list

The products in the cart, with quantity controls and a remove button.

Show product images shows each product’s image next to it.
Show variant options shows options such as size and colour, and line item properties such as an engraving.
Link products to their pages makes product names and images open the product page.
Show compare at prices crosses out the compare-at price of products on sale.
Show savings adds what the shopper saves on each line, as an amount or a percentage.
Nested items shows the products inside a bundle under the bundle, instead of as separate lines.
Show clear basket button adds a link that empties the cart.

When the cart is empty, this block says so and offers a Continue shopping button.

Announcement bar

A strip of short messages, such as “Free returns” or a sale. With more than one message, they take turns. Layout type chooses whether they slide sideways or up, and Message duration sets how long each one shows, in milliseconds (5000 is five seconds).

Add messages with Add message. A message can include a link, written as HTML: Free shipping over £50. <a href="/pages/shipping">Details</a>.

Free shipping progress bar

Shows how much more the shopper needs to spend for free shipping, with a bar that fills up as the cart grows. Set the amount in Goal, in your store’s currency. A new bar starts at 50. Once the cart reaches the goal, the bar says free shipping is unlocked.

This block only shows the message. Free shipping itself is set up in Shopify, under Settings › Shipping and delivery. Make sure both use the same amount.

Discount input

A field where shoppers enter a discount code. Applied codes are listed underneath and can be removed again. In Minimalist the field is folded away under Discount until the shopper opens it; turn on Show the code field open to show it straight away. Turn off Show code input to only list codes that are already applied.

Subtotal area

The estimated total, with a note that taxes, discounts and shipping are worked out at checkout. Turn off Show taxes and shipping note to hide the note. You can also show the number of items, the total at compare-at prices, and how much the shopper saves.

Checkout buttons

The Check out button, plus whichever of these you turn on:

Show lock icon: a padlock on the Check out button.
Terms checkbox and Age confirmation checkbox: the shopper has to tick them before checking out.
Shop Pay: a button that goes straight to Shop Pay.
View cart button: goes to your store’s full cart page.
Continue shopping button: closes the drawer.
Installments: a line such as “or 4 interest-free payments of £26.75 with Klarna”. Set the number of payments, the provider’s name and a link to its terms. This line is only text; the payment option itself comes from the provider’s own app.

Accelerated checkout and Show gift card input (in Discount input) don’t do anything yet. Gift cards can still be used at checkout.

Loyalty points

A line such as “You’ll earn 107 points with this order”, based on Points per £1 spent. It only shows the number. Points are awarded by your loyalty app, so use the same rate as the app.

Payment methods

A row of card and wallet logos. In Minimalist these are Visa, Mastercard, American Express, PayPal, Apple Pay, Google Pay and Shop Pay. The row is the same for every store: it doesn’t check which payment methods your checkout accepts, and you can’t change it in the block’s settings. To show other logos, change the block’s HTML (see Changing a block’s HTML).

Custom HTML

Your own content, anywhere in the cart: a delivery promise, a help link, a trust badge. Write it as HTML in HTML content. If you’re comfortable with code, you can also show cart information in it; see Cart templates.