Colours, fonts and code
The Theme tab has the template’s design settings, in groups such as Colors, Typography and Spacing. What’s there depends on the template and on the version your cart was created from. In Minimalist you can change:
- Colors: the background, text, buttons, borders and dividers, sale prices, the announcement bar, the progress bar, error messages, and the Page overlay that dims your store behind the open cart.
- Typography: the font, text size and cart title size, a separate font, weight and case for
headings, the case of button text, and letter spacing. Font is set to
inherit, which means the cart uses your theme’s font. Leave it that way unless you want the cart to look different from the rest of your store. - Spacing: the drawer width, side padding, product image size and corners, the space between products, and how rounded buttons and fields are. On phones the drawer always takes the full width of the screen.
- Checkout button: the checkout button’s own colours, text size, weight and case, height and corners. The Button colours under Colors don’t change it.
Custom CSS
Section titled “Custom CSS”In the Code tab you can add CSS of your own. It’s added after the template’s styles, so it wins when both style the same thing. Choose Open in editor for a larger editor that suggests the template’s colour and size variables as you type.
The template’s own CSS can’t be edited, which means a template update can never overwrite your changes and your changes can never break the template.
Changing a block’s HTML
Section titled “Changing a block’s HTML”Every block except Custom HTML has an Advanced HTML switch. Turn it on and choose Edit HTML to change the block’s markup, for example to reorder what a product line shows. Turning the switch off again goes back to the template’s version and discards your changes.
Block markup isn’t plain HTML: it can show cart information and react to the shopper. See Writing block markup before you change more than text and classes.