How cart templates work

A cart template is the starting point for a cart. It defines:

• Blocks: the markup of each part of the cart (the title bar, the product list, the checkout buttons and so on), their default settings, and any settings of the template’s own,
• Base CSS: the styles every cart made from the template shares,
• Design settings: the colours, fonts and sizes merchants change in the Theme tab,
• Texts: the words the cart uses, such as “Your cart” and “Check out”.

When a merchant creates a cart, it copies the template’s blocks and settings. Some blocks come with every new cart; the others are offered under Add block and come already styled when added. A cart stays on the template version it was created from: a newer version of the template only reaches carts created after it.

Template settings

Besides the settings every block of a type has, a template can give a block settings of its own. They appear in the block’s settings in the editor, below the usual ones. Minimalist, for example, adds Image shape and Column headings to the cart items list, Title alignment to the title bar, and Text alignment and Star icon to loyalty points.

Where you can write block markup

You’ll only write markup in two places:

• Custom HTML block: content of your own, anywhere in the cart.
• Advanced HTML: every other block has this switch in its settings. It copies the block’s markup from the template so you can change it. Turning it off goes back to the template’s markup, and your changes are lost.

Either way, markup is a Vue template. You can use plain HTML, and also show cart data, loop over the lines in the cart and react to clicks. Writing block markup explains how.

What’s available in markup

Every block’s markup can use:

Name	What it is
ns	The cart: its lines and totals, and actions such as removing a line. See The ns object.
config	The block’s settings, as set in the editor, including the template’s own. See Block variables.
t(key, variables)	The cart’s texts. See Texts and styles.

Some block types add their own, such as the product list’s lines. See Block variables.