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'.
Banners
| 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.
|
Link Colors
| 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.
|
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 & Footer
| 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 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 Colors
| 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.
|
