Colors (Covent Garden)
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. |
| Base text color |
Choose the color of the body text. |
| Base text hover color |
Changes the color of text, such as Logo Text, when you hover a cursor over it. |
| Headings text color |
Choose the color of the headings text. |
Gradients
| Setting |
Description |
| Enable gradient elements |
Choose this to add gradients to certain areas of your store. Please note that this setting will override certain settings based on the elements where the gradients are applied. |
Gradient starting color
|
Choose the gradient starting color.
|
Gradient ending color
|
Choose the gradient ending color.
|
| Gradient text color |
Choose the color of the text on areas with a gradient background.
|
Secondary Page Colors
| Setting |
Description |
| Secondary text color |
Changes the color of text used as subtitles.
|
| Secondary text hover color |
Changes the color of text used as subtitles.
|
| Line color |
Changes the color of lines to divide certain sections of your store.
|
| Common dark background |
Changes the color common overlays such as the overlay of buttons in the Add to Cart popup.
|
| 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.
|
| Alert popup box text color |
Changes the color of the text in 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 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.
|
Secondary 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. |
| 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.
|
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.
|
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.
|
| 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.
|
| Cart counter text color |
Choose the text 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 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.
|
| Dropdown link background hover color |
The color behind the text in the dropdown when a cursor hovers over them.
|
Sticky Navigation
| Setting |
Description |
| Sticky navigation background color |
The color behind the top level navigation text on the sticky navigation.
|
| Sticky navigation link color |
The color of the top navigation text on the sticky navigation.
|
| Sticky navigation link hover color |
The color of the top navigation text on the sticky navigation when a cursor hovers over them.
|
Mobile Navigation
| Setting |
Description |
| 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.
|
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 border color |
The color of the product name on the product card.
|
Product border hover color
|
The color of the product name on the product card when you hover a cursor over it.
|
Quick Search Results
| Setting |
Description |
| Result listing background color |
The color of the background of the quick search area (appears when you click search in the header).
|
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 input background color |
Select the color that appears behind the text in the footer text box.
|
| Footer input border color |
Select the border color for the footer text box.
|
| 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 border color |
Select the border color for the simple footer.
|
Loading Indicators
| Setting |
Description |
| Page loading bar |
The color of the page loading bar.
|
| Spinner light half |
The color of the empty portion of the spinner.
|
| Spinner dark half |
The color of the filled portion of the spinner.
|
| Modal loading background |
The color of the loading overlay.
|
| Product thumbnail loading background |
The color of the thumbnail background, also appears while a thumbnail image loads.
|
