Default (Global) Colors

This section controls the theme’s primary color scheme. Areas, rows and content blocks usually inherit their colors from this scheme, but can also have separate colors.


Major colors of the site. Most of the elements inherit from these colors.

Header Colors for the header area.
Search Colors for the search box in the header.
Main navigation Colors for the main navigation (1st level only).
Navigation submenus
Colors for all store dropdowns.
Sticky header
Colors for sticky header.
Intro Colors for the intro area.
Content Colors for the content area (main column and sidebars).
Product listing Colors for product item.
Product listing (flip/overlay) Colors for product item hover (flip and overlay mode).
Footer Colors for the footer area.
Bottom Colors for the bottom area (copyright and payment images).
Form elements Colors for all form elements (input, select, textarea and buttons).
Image gallery Colors for image gallery blocks.
Image gallery (fullscreen) Colors for image gallery blocks in fullscreen mode.
Tabs / Accordion Colors for tabs and accordion widgets
Dialog / Datepicker / Timepicker / Tooltip / Autocomplete Colors for dialog, datepicker, timepicker, tooltip and autocomplete widgets
System messages Colors for add to cart, wishlist and compare notifications.

Custom rules

All custom rules are global and depend on the CSS selector you have used.


Name is used to mark rules and has no styling importance.

Selectors CSS selector of the targeted element. Multiple selectors should be comma separated.
CSS property
Choose between text, background or border color.
Color Color select.
Important Set higher priority, if other rules for the targeted element(s) exist.

Color Inheritance

color_inheritSimilar colors are linked, so when you change a rule with a wider scope, all narrow rules take the changed value automatically. Color inheritance can be disabled, if you want to set a specific rule for a targeted element. The green arrow above every color picker indicates that it has turned on color inheritance. If you want to turn it off just click on the arrow (it will become gray).

Generally color inheritance follows this route: Global > Area > Row > Content Block

E.g. if you set the global text color to #444, all store areas (header, intro, content, footer etc.) will automatically take the same text color value. Suppose you want to change the text color of the footer only. You can go to Styles -> Footer -> Colors section, disable inheritance and set a different text color e.g. #CCC (to better suit a footer with dark background).

Useful links

1. Web colors guide for beginners
2. Introduction to color theory – how to choose right colors for your website
3. Colors psychology infographic