All Collections
Site pages
Customising the appearance of a specific page (CSS)
Customising the appearance of a specific page (CSS)

Add CSS styles to a specific page.

Ed Boaden avatar
Written by Ed Boaden
Updated over a week ago

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.


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


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).


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.


Did this answer your question?