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.
Setting site colour scheme
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.
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/
Setting a background image
You can add a background image by inputting the image URL. You can upload an image to a page module (and inactivate it if required) and copy the URL to use here. Copy the image URL from the uploaded image by right-clicking on it and selecting Copy Image Address / Location.
We would suggest uploading at 4,000 px; ideally square, so that it doesn't get cropped heavily when in portrait mode.
We will soon allow you to upload images directly to the Site Settings for this purpose.
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.
Position: Fix to top fixes the image to the top of the page and crops from the bottom
Behaviour on scroll: Fixed means the background doesn't scroll with the rest of the page
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.
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.
Adjusting header and logo height
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.
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.
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.
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
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.
Advanced CSS custom styles
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.
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.