Colors (22 Savile Row)
Configure your store colors 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 strip background color |
Choose the color of the background behind the text on a banner.
|
| Banner strip text color |
Choose the color of the text on a banner.
|
Primary Page Colors
| Setting |
Description |
| Page background |
The background color of the entire site is changed. It has no effect on the color of the header or footer backgrounds. |
| Page text color |
Choose the color of the body text. |
| Headings text color |
Choose the color of the headings text. |
Secondary Page Colors
| Setting |
Description |
| Secondary text color |
Changes the color of text used as subtitles.
|
| Line color |
Changes the color of lines to divide certain sections of your store.
|
| Modal overlay background |
Changes the color of dark backgrounds, such as the block that appears when a customer adds a product to their shopping cart or uses quick view.
|
| Alert popup box background color |
Changes the color of popup messages and alerts.
|
Links
| Setting |
Description |
| Link color |
This color will be used for hyperlinks created on webpages.
|
| Link hover color |
The color that appears when the cursor hovers over a link.
|
| Link active color |
When a user clicks a link, the color changes. This may appear quickly or not at all in some browsers.
|
Primary Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the button.
|
| Text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Text active color |
Choose the color of the text in the button when you click on it. |
| Background color |
Choose the background color of the button.
|
| Background hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Background active color |
Choose the background color of the button when you click on it.
|
Action Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the button.
|
| Text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Text active color |
Choose the color of the text in the button when you click on it. |
| Background color |
Choose the background color of the button.
|
| Background hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Background active color |
Choose the background color of the button when you click on it.
|
Default Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the button.
|
| Text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Text active color |
Choose the color of the text in the button when you click on it. |
| Border color |
Choose the color of the border around the button.
|
| Border hover color |
Choose the color of the border around the button when you hover a cursor over it.
|
| Border active color |
Choose the color of the border around the button when you click on it.
|
Disabled Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the disabled button.
|
| Background color |
Choose the background color of the disabled button.
|
| Border color |
Choose the color of the border around the disabled button.
|
Apple Pay Buttons
| Setting |
Description |
| Apple Pay button color |
Select this allows you to set the color style for Apple Pay button. The Apple Pay button only displays on certain browsers.
|
Form Labels
| Setting |
Description |
| Label text color |
The color of the form labels that appear above text boxes or product option selections can be changed.
|
Input Fields
| Setting |
Description |
| Text color |
Select the text color that appears within a text box.
|
| Background color |
Select the color that appears behind the text in a text box.
|
| Border color |
Select the border color for drop down menus, text boxes, and rectangle multiple-choice buttons.
|
| Border active color |
Select the color of the border around dropdown menus, text boxes, and rectangle multiple-choice buttons when you click to enter text or make a selection.
|
| Disabled background color |
Select the color of a choice when it’s not selectable.
|
Checkboxes & Radio Buttons
| Setting |
Description |
| Icon color |
Select the color of the checkmark on checkboxes, or the dot on radio buttons.
|
| Background color |
Select the color of the box behind the check mark or radio dot.
|
| Border color |
Select the color of the border around the checkbox/radio button.
|
Alerts
| Setting |
Description |
| Info alert color |
Select the text color that appears within an info alert box.
|
| Info alert background |
Select the color that appears behind the text in an info alert box.
|
| Error alert color |
Select the text color that appears within an error alert box.
|
| Error alert background |
Select the color that appears behind the text in an error alert box.
|
| Success alert color |
Select the text color that appears within a success alert box.
|
| Success alert background |
Select the color that appears behind the text in a success alert box.
|
| Warning alert color |
Select the text color that appears within a warning alert box.
|
| Warning alert background |
Select the color that appears behind the text in a warning alert box.
|
Header
| Setting |
Description |
| Header background color |
Choose the color that appears behind the logo.
|
| Sticky background color |
The color behind the top level navigation text on the sticky navigation.
|
| Sticky store name text color |
The color of the store name text on the sticky navigation.
|
Utility Navigation
| Setting |
Description |
| Text/icon color |
Choose the color of the top-right links including Search, Login and Cart.
|
| Text/icon hover color |
Choose color of the top-right links when a cursor hovers over them.
|
| Utility border color |
Choose color of border below the utility navigation.
|
| Dropdown background color |
Choose the color of the dropdown when Cart is clicked.
|
| Dropdown border color |
Choose color of border around the dropdown when Cart is clicked.
|
| Cart counter background color |
Choose the background color of the circle that appears next to the Cart link.
|
Main Navigation
| Setting |
Description |
| Navigation bar background color |
The color behind the top level navigation text.
|
| Navigation bar border color |
The color of border around the top level navigation.
|
| Navigation link color |
The color of the top navigation text.
|
| Navigation link hover color |
The color of the top navigation text when a cursor hovers over them.
|
| Dropdown background color |
The color of the dropdown when a category has subcategories.
|
| Dropdown border color |
The color of border around the dropdown when a category has subcategories.
|
| Dropdown link color |
The color of the dropdown text when a category has subcategories.
|
| Dropdown link hover color |
The color of the text in the dropdown when a cursor hovers over them.
|
Mobile Navigation
| Setting |
Description |
| Hamburger menu button color |
The color of the hamburger menu button.
|
| Mobile navigation background color |
The color behind the top level navigation text on smaller devices.
|
| Mobile navigation link color |
The color of the top navigation text on smaller devices.
|
| Mobile navigation link hover color |
The color of the top navigation text on smaller devices when hovered over. |
Icon Colors
| Setting |
Description |
| Icon color |
Choose the color of the share icons on the product page.
|
| Icon hover color |
Choose the color displayed when the cursor hovers over a share icon on the product page.
|
| Rating empty icon color |
Choose the color of the star icons that are empty in a star rating display.
|
| Rating full icon color |
Choose the color of the star icon rating that gets counted.
|
| Button icon color |
Choose the color of the quantity change buttons.
|
Footer
| Setting |
Description |
| Background color |
Select the color of the background in the footer.
|
| Footer heading text color |
Select the text color of all headings in the footer.
|
| Footer text color |
Select the color for all text in the footer.
|
| Footer link color |
Select the color for hyperlinks in the footer.
|
| Footer link hover color |
Select the color displayed when a cursor hovers over a link in the footer.
|
| Footer link active color |
Select the color that displays when a user clicks a link in the footer. This may display quickly and may not appear at all on some browsers.
|
| Footer icon color |
Select the color of social media icons in the footer.
|
| Footer icon hover color |
Select the color displayed when the cursor hovers over a social media icon.
|
| Footer button text color |
Choose the color of the text inside the button.
|
| Footer button text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Footer button text active color |
Choose the color of the text in the button when you click on it. |
| Footer button color |
Choose the background color of the button.
|
| Footer button hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Footer button active color |
Choose the background color of the button when you click on it.
|
Simple Footer
| Setting |
Description |
| Simple footer newsletter background color |
Select the color of the background in the simple footer.
|
| Simple footer newsletter heading color |
Select the text color of the heading in the simple footer.
|
| Simple footer newsletter text color |
Select the color for all text in the simple footer.
|
Loading Indicators
| Setting |
Description |
| Page loading bar |
The color of the page loading bar.
|
| Modal loading background |
The color of the loading overlay.
|
Product Cards
| Setting |
Description |
| Product title color |
The color of the product name on the product card.
|
| Product title hover color |
The color of the product name on the product card when you hover a cursor over it.
|
| Product card icon color |
The color of the icons when you hover a cursor over the product card.
|
| Product card icon background color |
Choose the color of the background behind the product card icons.
|
Hover Product Cards
| Setting |
Description |
| Background/border color |
The color of the overlay on the product card when you hover a cursor over it. Please note this is only shown when Hide product details is enabled.
|
Text color
|
The color of the text on the product card when you hover a cursor over it. Please note this is only shown when Hide product details is enabled.
|
