Customise the appearance of your site by selecting from the available settings.

Site Settings > Design

From here you can access settings to change background and text colours, fonts and typography,

These changes will appear across store, checkout and customer account page.

---

Select between Light Background, Dark Text and Dark Background, Light Text. If you want to use a dark background colour, you should select Dark Background, Light Text so that any text and lines will be legible on the dark background (this goes for dark background images as well). You can still override the text colours; this just provides a base colour scheme to build on.

You can edit the colour of various page elements:

For each, enter a hex-code #000000 or an RGB value rgb(0,0,0) for the background colour you want to use.

Please note

You should have a relatively high contrast between text and background colour in order for your site text to be legible and accessible to all users. Use a contrast checker to ensure this: https://webaim.org/resources/contrastchecker/

You can upload a background image for your store.

We would suggest uploading at 4,000 px; ideally square, so that it doesn't get cropped heavily when in portrait mode.

There are advanced settings for the background image positioning; select between fixed and scroll behaviour, image position, and whether you want the image to cover the screen.

Other tips

To display white text on top of a darker image, select the 'Dark' Colour Scheme.

If your image is dark with light areas (or light with areas of black) consider adding an opacity on top of your image so that white text is legible over all areas of the image.

Please note

Background images won't be displayed on the checkout and account pages, as on these pages it is more critical that content is legible and can be comprehended easily.

There isn't a button to remove background images after adding. To hide, add the following code to the Custom Styles CSS box:

Under the logo upload field, there are additional options to make the header smaller or larger, and adjust the padding around the logo so that it fills the header height and appears larger.

Please note

You should upload a logo file that doesn't already having padding around the logo image. If you only have access to a logo within a bounding box, you should either remove the logo margins on the settings here, or crop the logo using a photo editor before uploading.

You can select from default serif and sans-serif fonts, or easily use any Google Font. To do this, select a Google Font from their website https://fonts.google.com/ and follow the embed instructions, copy-and-pasting the Link code <link href="... and CSS rules font-family: ... from the selected family.

You can also set font styles for bold or italics, or set all text to be uppercase.

Please note

If selecting bold or italics font in conjunction with using a Google Font, make sure you have imported the bold / italic version of the font family.

Set a base font size for text on your site. Increasing the base size will increase the size of all page content. The default is set to 14px which is a good balance between legibility and fitting the most content into the viewport.

Please note

The checkout and account pages limit the lower and upper font-sizes as page content is more sensitive to layout changes here.

Use the a typographic scale to set header font size. This will ensure a good typographic rhythm across your site. A typographic scale applies a ratio to increment heading sizes; between body font size, h1, h2, and h3 headings. The default is set to 1.2, which subtly increases the font size between headings. You can increase this to show more a distinct increase between body text and headings, for more impact; or you can reduce this to 1 so that headings are always the same height as body text.

The page margins define how much space is shown on the edges of the page, either side of the content. You can increase or decrease this number from the default of 40px.

You can also increase the maximum page width so that the page content fills more of the screen even on wide desktop screens. Setting to a high number like 9999 will mean that the content always fills the screen.

There will be some things you will want to edit that aren't supported by the listed settings. To do further customisation, you can also input custom CSS to override what is set on the page by default.

Please note

These customisations won't be applied to the checkout and account pages where we limit customisation to the predefined set so that we can ensure the usability and thus conversion rates of these key areas of the stores.