Customising the appearance of a specific page (CSS)

Customise the appearance of a specific page, rather than all pages on your site.

Add a code module to the page and add a style block for CSS code.

The code module should be the first module on the page, so that the styles are applied when the page is first loaded.

<style>

.main-container {
  background-color: #FFFFFF;
  background-image: url('https://...');
}

</style>

If you need to upload an image to use as a background, upload the file to an image module and right-click the image to copy the image file path. This can then be used in the CSS. Inactivate the module to hide it from the storefront (the file path will still link to the image).

Note

If you are changing the background colour, it should have enough contrast with the text colour so that the text is still legible and your site is accessible to all users. Overriding the text colour on a single page is more difficult, so is not recommended.

To make design customisations across the whole site, use the Design section of the Site Settings.

Customising the appearance of your site