Colors (22 Savile Row)
Configure your store colours and branding in this panel. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left-hand column of the Theme Editor, click the panel labelled 'Colors'.
Banner Colors
| Setting | Description |
| Banner background | Choose the background colour behind the text on a banner. |
| Banner text color | Choose the colour of the text on a banner. |
Primary Page Colors
| Setting | Description |
| Page background | Choose the background colour for the site. This does not change the header or footer backgrounds. |
| Page text color | Choose the colour of the main body text. |
| Headings text color | Choose the colour of headings across the site. |
Secondary Page Colors
| Setting | Description |
| Secondary text color | Choose the colour of secondary text, such as subtitles. |
| Line color | Choose the colour of lines used to divide sections of your store. |
| Modal overlay background | Choose the background colour of overlays, such as the dark layer that appears when a customer adds a product to their cart or opens Quick View. |
| Alert popup box background color | Choose the background colour of popup messages and alerts. |
Link Colors
| Setting | Description |
| Link color | Choose the colour of links across your store. |
| Link hover color | Choose the colour of a link when a customer moves their cursor over it. |
| Link active color | Choose the colour of a link when a customer clicks it. This change may only appear briefly, or may not appear in some browsers. |
Primary Action Button
| Setting | Description |
| Text color | Choose the colour of the text inside the button. |
| Text hover color | Choose the colour of the button text when a customer moves their cursor over it. |
| Text active color | Choose the colour of the button text when a customer clicks it. |
| Background color | Choose the background colour of the button. |
| Background hover color | Choose the background colour of the button when a customer moves their cursor over it. |
| Background active color | Choose the background colour of the button when a customer clicks it. |
Secondary Action Button
| Setting | Description |
| Text color | Choose the colour of the text inside the button. |
| Text hover color | Choose the colour of the button text when a customer moves their cursor over it. |
| Text active color | Choose the colour of the button text when a customer clicks it. |
| Background color | Choose the background colour of the button. |
| Background hover color | Choose the background colour of the button when a customer moves their cursor over it. |
| Background active color | Choose the background colour of the button when a customer clicks it. |
Default Action Button
| Setting | Description |
| Text color | Choose the colour of the text inside the button. |
| Text hover color | Choose the colour of the button text when a customer moves their cursor over it. |
| Text active color | Choose the colour of the button text when a customer clicks it. |
| Border color | Choose the colour of the border around the button. |
| Border hover color | Choose the colour of the button border when a customer moves their cursor over it. |
| Border active color | Choose the colour of the button border when a customer clicks it. |
Disabled Button
| Setting | Description |
| Text color | Choose the colour of the text inside a disabled button. |
| Background color | Choose the background colour of a disabled button. |
| Border color | Choose the colour of the border around a disabled button. |
Form Labels
| Setting | Description |
| Label text color | Choose the colour of form labels shown above text boxes and product option selections. |
Input Fields
| Setting | Description |
| Text color | Choose the colour of text entered into a text box. |
| Background color | Choose the background colour of text boxes and other input fields. |
| Border color | Choose the border colour for dropdown menus, text boxes and rectangle-style product options. |
| Border active color | Choose the border colour for input fields when a customer selects them or enters text. |
| Disabled background color | Choose the background colour of an input or option that cannot be selected. |
Checkboxes & Radio Buttons
| Setting | Description |
| Icon color | Choose the colour of the tick in a checkbox or the dot in a radio button. |
| Background color | Choose the background colour behind the tick or radio button dot. |
| Border color | Choose the colour of the border around checkboxes and radio buttons. |
Alerts
| Setting | Description |
| Info alert color | Choose the text colour inside an information alert. |
| Info alert background | Choose the background colour of an information alert. |
| Error alert color | Choose the text colour inside an error alert. |
| Error alert background | Choose the background colour of an error alert. |
| Success alert color | Choose the text colour inside a success alert. |
| Success alert background | Choose the background colour of a success alert. |
| Warning alert color | Choose the text colour inside a warning alert. |
| Warning alert background | Choose the background colour of a warning alert. |
Header
| Setting | Description |
| Header background color | Choose the background colour behind the logo and header content. |
| Sticky background color | Choose the background colour of the sticky header. |
| Sticky store name text color | Choose the colour of the store name text in the sticky header. |
Utility Navigation
| Setting | Description |
| Text/ icon color | Choose the colour of the text and icons in the utility navigation, including Search, Login and Cart. |
| Text/ icon hover color | Choose the colour of utility navigation text and icons when a customer moves their cursor over them. |
| Utility border color | Choose the colour of the border below the utility navigation. |
| Dropdown background color | Choose the background colour of the utility navigation dropdown, such as the Cart dropdown. |
| Dropdown border color | Choose the border colour around the utility navigation dropdown. |
| Cart counter background color | Choose the background colour of the counter displayed next to the Cart link. |
Main Navigation
| Setting | Description |
| Navigation bar background color | Choose the background colour behind the main navigation links. |
| Navigation bar border color | Choose the colour of the border around the main navigation bar. |
| Navigation link color | Choose the colour of the main navigation links. |
| Navigation link hover color | Choose the colour of the main navigation links when a customer moves their cursor over them. |
| Dropdown background color | Choose the background colour of dropdown menus that contain subcategories. |
| Dropdown border color | Choose the border colour between items in a dropdown menu. |
| Dropdown link color | Choose the colour of links inside dropdown menus. |
| Dropdown link hover color | Choose the colour of dropdown links when a customer moves their cursor over them. |
Mobile Navigation
| Setting | Description |
| Hamburger menu button color | Choose the colour of the hamburger menu button. |
| Mobile navigation background color | Choose the background colour of the mobile navigation menu. |
| Mobile navigation link color | Choose the colour of links in the mobile navigation menu. |
| Mobile navigation link hover color | Choose the colour of mobile navigation links when a customer moves their cursor over them. |
Icon Colors
| Setting | Description |
| Icon color | Choose the colour of share icons on the product page. |
| Icon hover color | Choose the colour of share icons when a customer moves their cursor over them. |
| Rating empty icon color | Choose the colour of empty stars in a product rating display. |
| Rating full icon color | Choose the colour of filled stars in a product rating display. |
| Button icon color | Choose the colour of icons inside buttons, such as the quantity change buttons. |
Footer
| Setting | Description |
| Background color | Choose the background colour of the footer. |
| Footer heading color | Choose the text colour of headings in the footer. |
| Footer text color | Choose the colour of text in the footer. |
| Footer link color | Choose the colour of links in the footer. |
| Footer link hover color | Choose the colour of footer links when a customer moves their cursor over them. |
| Footer link active color | Choose the colour of footer links when a customer clicks them. This change may only appear briefly, or may not appear in some browsers. |
| Footer icon color | Choose the colour of icons in the footer, such as social media icons. |
| Footer icon hover color | Choose the colour of footer icons when a customer moves their cursor over them. |
| Footer button color | Choose the background colour of buttons in the footer. |
| Footer button hover color | Choose the background colour of footer buttons when a customer moves their cursor over them. |
| Footer button active color | Choose the background colour of footer buttons when a customer clicks them. |
| Footer button text color | Choose the colour of the text inside footer buttons. |
| Footer button text hover color | Choose the colour of footer button text when a customer moves their cursor over the button. |
| Footer button text active color | Choose the colour of footer button text when a customer clicks the button. |
Simple Footer
| Setting | Description |
| Simple footer newsletter background color | Choose the background colour of the newsletter section in the simple footer. |
| Simple footer newsletter heading color | Choose the colour of the newsletter heading in the simple footer. |
| Simple footer newsletter text color | Choose the colour of the text in the simple footer newsletter section. |
Loading Indicators
| Setting | Description |
| Page loading bar | Choose the colour of the page loading bar. |
| Modal loading background | Choose the background colour of the loading overlay. |
Product Cards
| Setting | Description |
| Product title color | Choose the colour of product names on product cards. |
| Product title hover color | Choose the colour of product names when a customer moves their cursor over them. |
| Card icon color | Choose the colour of the icons displayed when a customer moves their cursor over a product card. |
| Card icon background color | Choose the background colour behind the icons on product cards. |
Hover Product Cards
| Setting | Description |
| Background/Border color | Choose the background and border colour of the product card overlay when a customer moves their cursor over a product card. This is only shown when Hide product details is enabled. |
| Text color | Choose the colour of the text on the product card overlay when a customer moves their cursor over a product card. This is only shown when Hide product details is enabled. |