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.
Secondary section background
Choose the background color for the secondary section background.
Tertiary section background
Choose the background color for the tertiary section background.
Body 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.
Secondary Page Colors
Setting
Description
Common dark background
Changes the color of common overlays, such as the button overlay 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.
Modal overlay text
Choose the text color of the modal overlay text.
Alert popup box background color
Changes the color of popup messages and alerts.
Links
Setting
Description
Primary link color
This color will be used for hyperlinks created on webpages.
Primary link hover color
The color that appears when the cursor hovers over a link.
Primary link active color
When a user clicks a link, the color changes. This may appear quickly or not at all in some browsers.
Secondary link color
This color will be used for hyperlinks on a secondary section background.
Secondary link hover color
The color that appears when the cursor hovers over a link on a secondary section background.
Secondary link active color
When a user clicks a link on a secondary section background, the color changes. This may appear quickly or not at all in some browsers.
Tertiary link color
This color will be used for hyperlinks on a tertiary section background.
Tertiary link hover color
The color that appears when the cursor hovers over a link on a tertiary section background.
Tertiary link active color
When a user clicks a link on a secondary section background, 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.
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
Form label text color
The color of the form labels that appear above text boxes or product option selections can be changed.
Required label text color
The color of the required text by a field that needs completing before you can proceed.
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.
Placeholder color
Select the color of the example text that appears before the user begins typing inside 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
Utility navigation text/icon color
Choose the color of the top links such as "Menu" and "Cart" (excluding the home page).
Utility navigation text/icon hover color
Choose color of the top links when a cursor hovers over them (excluding the home page).
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
Side menu background color
The color of the background in the side cart.
Navigation link color
The color of the text in the side cart.
Navigation link hover color
The color of the text in the side cart when a cursor hovers over them.
Product Cards
Setting
Description
Product 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.
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 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 icon active color
Select the color that displays when a user clicks a social media icon in the 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.
Did this answer your question?Thanks for the feedbackThere was a problem submitting your feedback. Please try again later.
