Choose Colours for Your Square Online Site
After carefully choosing which colours to associate with your brand, you can select the same colours to brand your website with Square. Begin creating an online identity that has just the right look and feel with colour combinations that suit your needs.
Learn more about designing and customising your Square Online site for more information on all of your site design options. To customise multiple design elements at once, learn more about choosing styles for your Square Online site.
Customise Site Colours
To start customising site colours:
From your Square Dashboard, select Site design.
Select Colours and choose a Main colour to be used primarily throughout your site.
Choose "Secondary colours" by selecting the "+" icon.
Choose one of the "Colour styles" to set as the default style for all sections on your site, or create one of your own by selecting Customise. Note: Colour styles can be changed for individual sections by selecting the section and choosing a style in the editing panel.
Any background colour selections will be applied to your website and checkout page. Learn more about your checkout options with Square Online.
Choose Main and Secondary Colours
When choosing your main and secondary colours, you can either select one of the pre-set options, or use the colour picker to select a different colour. If you have it available, you can also enter a hex code to find a specific colour that you need (e.g. #009e4f, #4058c5, etc.).
Customise Colours for Specific Elements
Once you’ve set your main and secondary colours, you can choose custom colours and set the default ones for your site background, text and buttons. Select Customise to expand these options.
The background and button options update when you change the main and secondary colours, and the button colours adjust according to the background colour you choose. Play around with the swatches to see how these elements affect one another.
Apply Colours to Sections
Your global colour choices from the Site design panel automatically generate a set of complementary colours and neutral shades. You can use these to further customise page sections. While editing a section, select Customise to change the Layout and colour as well as the Background.
Note: Instead of using a colour, you can also set an image as a section background. Learn more about customise images and backgrounds in Square Online.