Colors (Camden)
Configure your store colors and branding in this panel. In your control panel, go to Storefront > Themes, click the blue "Customize" button to launch Theme Editor, then select the "Theme Styles" icon. In the left hand column of the Theme Editor, click the panel labelled 'Colors'.
Banner Colors
| Setting |
Description |
| Banner background |
Choose the color of the background behind the text on a banner.
|
| Banner text |
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. |
| Primary color |
Changes the color of certain elements across the store. We'd recommend choosing a color that complements your brand. |
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.
|
| Common light background |
Changes the color of the background on cards across the store (excluding product cards).
|
| 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.
|
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.
|
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.
|
| 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.
|
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. |
| 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.
|
| 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.
|
Buy Now 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.
|
| 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.
|
Select Boxes
| Setting |
Description |
| Background color |
Select the text color that appears within a text box.
|
| Arrow icon color |
Select the color that appears behind the text in a text box.
|
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.
|
Header
| Setting |
Description |
| 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.
|
| 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 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.
|
Quick Search Results
| Setting |
Description |
| Background color |
The color of the background of the quick search area (appears when you start typing in the search bar in the header).
|
| Background hover color |
The color of the background on the product card in the quick search area when you hover a cursor over it.
|
| Border color |
The color of the border around the quick search area.
|
Mobile Navigation
| Setting |
Description |
| Background color |
The color behind the top level navigation text on smaller devices.
|
| Text color |
The color of the top navigation text on smaller devices.
|
| Click color |
The color of the top navigation text on smaller devices when clicked.
|
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.
|
Footer
| Setting |
Description |
| Background color |
Select the color of the background in the footer.
|
| Heading color |
Select the text color of all headings in the footer.
|
| Text color |
Select the color for all text in the footer.
|
| Footer base background color |
Select the color of the background in the bottom section of the footer, typically where copyright information is.
|
Product Cards
| Setting |
Description |
| Card background color |
The color behind the image on the product card. It's important to remember this will be seen depending if using a cut-out image or different aspect ratios.
|
| Card title color |
The color of the product name on the product card.
|
Card title hover color
|
The color of the product name on the product card when you hover a cursor over it.
|
| Quickview button text color |
Choose the color of the text inside the button. Please note this button appears on the product card when you hover a cursor over it.
|
| Quickview button background color |
Choose the background color of the button. Please note this button appears on the product card when you hover a cursor over it.
|
Product Carousel Indicators
| Setting |
Description |
| Indicator color |
Select the border color of the empty dot at the bottom of the Product Carousel. |
| Indicator active color |
Select the border color of the active dot at the bottom of the Product Carousel. |
| Arrow color |
Select the color of the left and right arrows. |
Dropdown Menus
| Setting |
Description |
| Dropdown background color |
Choose the color of the background behind dropdowns on your store.
|
| Dropdown border color |
Choose the border around dropdowns on your store. |
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.
|
