Colors (Portobello)
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 color |
Choose the color of the text on a banner.
|
Page Section Colors
| Setting |
Description |
| Primary section background |
Choose the background color for the primary section background. |
| Secondary section background |
Choose the background color for the secondary section background. |
| Tertiary background |
Choose the background color for the tertiary section background. |
| Primary section text color |
Choose the color of the body text. |
| Secondary section text color |
Choose the text color for the secondary section. |
| Tertiary section text color |
Choose the text color for the tertiary section. |
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. |
Secondary Page Colors
| Setting |
Description |
| 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 Action Button
| Setting |
Description |
| Primary button text color |
Choose the color of the text inside the button.
|
| Primary button text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Primary button text active color |
Choose the color of the text in the button when you click on it. |
| Primary button background color |
Choose the background color of the button.
|
| Primary button background hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Primary button background active color |
Choose the background color of the button when you click on it.
|
Secondary Action Button
| Setting |
Description |
| Secondary button text color |
Choose the color of the text inside the button.
|
| Secondary button text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Secondary button text active color |
Choose the color of the text in the button when you click on it. |
| Secondary button background color |
Choose the background color of the button.
|
| Secondary button border color |
Choose the color of the border around the button.
|
| Secondary button border hover color |
Choose the color of the border around the button when you hover a cursor over it.
|
| Secondary button border active color |
Choose the color of the border around the button when you click on it.
|
Input Fields
| Setting |
Description |
| Input text color |
Select the text color that appears within a text box.
|
| Input background color |
Select the color that appears behind the text in a text box.
|
| Input border color |
Select the border color for drop down menus, text boxes, and rectangle multiple-choice buttons.
|
| Input 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 input background color |
Select the color of a choice when it’s not selectable.
|
Checkboxes & Radio Buttons
| Setting |
Description |
| Checkbox icon color |
Select the color of the checkmark on checkboxes, or the dot on radio buttons.
|
| Checkbox background color |
Select the color of the box behind the check mark or radio dot.
|
| Checkbox 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 |
| Utility navigation text/icon color |
Choose the color of the top-right links including Search, Login and Cart.
|
| Utility navigation 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 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 container 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.
|
| 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.
|
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 |
| Footer background |
Select the color of the background in the footer.
|
| Footer bottom background |
Select the color of the background in the bottom section of the footer, typically where copyright information is.
|
| Footer heading color |
Select the text color of all headings in the footer.
|
| Footer text color |
Select the color for all text in the footer.
|
| Homepage footer bottom text color |
Select the color for all text in the bottom section of the footer, typically where copyright information is.
|
| 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 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.
|
| 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. |
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.
|
