Colors (Kings Road)
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. |
Page text color | Choose the color of the body text. |
Headings text color | Choose the color of the headings text. |
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. |
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 |
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. |
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. |
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. |
Choose the color of the dropdown when Cart is clicked. |
|
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 |
The color behind the top level navigation text. |
|
Navigation bar border color | The color of border around the top level navigation. |
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. |
The color of the dropdown when a category has subcategories. |
|
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. |
Mobile Navigation
Setting | Description |
Mobile navigation background color | The color behind the top level navigation text on smaller devices. |
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 |
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 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. |
Footer button border color | Choose the color of the border around the button. |
Footer button border hover color | Choose the color of the border around the button when you hover a cursor over it. |
Footer button border active color | Choose the color of the border around 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. |
Select the color for all text in 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. |
Product Cards
Setting | Description |
Product card background | 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. |
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. |
The color of the icons when you hover a cursor over the product card. |
|
The color of the icon when you hover it. |
|
The color of the default price text. |
|
The color of the none sale price text. |
|
|
The color of the sale price text. |