Choose Colours for Your Square Online Site
After carefully choosing which colors 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 customizing your Square Online site for more information on all of your site design options. To customize multiple design elements at once, learn more about choosing styles for your Square Online site.
Customize Site Colours
To start customizing 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 style’ to set as the default style for all sections on your site, or create one of your own by selecting Customize. 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 preset 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 you need (e.g. #009e4f, #4058c5, etc.).
Customize 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 Customize 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 customize page sections. While editing a section, select Customize 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 customize images and backgrounds in Square Online.