Color settings

The color system of Athens is centralized and available through the theme settings panel. The idea behind this system is to provide a flexible color scheme generator while trying to keep the number of options to a minimum. The colors are divided in 4 main groups:

Primary colors

Primary text: Mostly used for textual elements like paragraph text.

Secondary text: Mostly used for headings and other important elements like product prices.

Borders and lines: Pretty much self-explanatory. Any lines (like the announcement bar border) or component borders (like the product card) will inherit their border color from this setting.

Background 1: The main background color used throughout the store.

Background 2: A secondary background color mostly used as a way to visually prioritize a section.

Accent 1

Text on Accent 1: The foreground color for any sections assigned with the “Accent 2” color scheme.

Accent 1: The background color for this color scheme. This is the default scheme for the main navigation bar, newsletter section and the primary buttons (Buy it now, Search, etc).

Accent 2

Text on Accent 2: The foreground color for any sections assigned with the “Accent 1” color scheme.

Accent 2: The background color for this color scheme. This is the default scheme for buttons (Add to cart) but it can be used as color scheme for any section as well.

Accent 3

Text on Accent 3 The foreground color for any sections assigned with the “Accent 3” color scheme.

Accent 3: The background color for this color scheme. This scheme is available as an auxiliary tool for any sections that need a completely different color scheme. For example a Black Friday / Cyber Monday offer, a weekly offer etc.

Color schemes

The above base color values are grouped into Color schemes that are available for use throughout various sections and areas within sections.

The five available color schemes are:

• Accent 1
• Accent 2
• Accent 3
• Background 1 (the default in the vast majority of sections)
• Background 2

The main idea behind all color schemes is that the background color of each scheme defines it. For example, any section that the Accent 1 color scheme is applied on will have the Accent 1 color as its background color and Text on Accent 1 color as the text (and border) color.

The slight difference between the “Accent” and the “Background” color schemes is that for the Background 1 and Background 2 color schemes, the background colors are always going to be the Background 1 color and Background 2 color respectively, while they share text and border color with the Primary text color and Borders and lines color settings.

Applying color schemes on sections

All of Athens’ sections come with their respective “Color scheme” setting. Let’s see some examples of how you can select different color schemes for different sections to create interesting combinations and areas that stand out in your shop.

Once you have the theme installed, one of the first things you’ll notice is that the shop’s global header area consists of two different sections (Announcement bar, and Header). Along with the Announcement bar, the Header section specifically comes with additionally four more areas that can have their color scheme edited (Header, Navigation, Sub-menu, and Mobile navigation).

Notice how, by default, every area has the “Background 1” color scheme already applied (which is the default color scheme throughout most areas and sections in the theme), whereas the Navigation bar has the “Accent 1” color scheme applied, establishing a visual separation with the rest of the shop.

With this in mind, you could adjust the color scheme of all areas to create interesting combinations in your header. Perhaps you would like a white-on-dark approach selecting the “Accent 3” color scheme:

Another example is the shop’s global footer section which comes with a few different sections on its own (Features, Newsletter, and Footer). The “Features” and “Footer” sections are colored by default with the “Background 2” color scheme (establishing visual separation with the main content) and the “Newsletter” section has the “Accent 1” color scheme (establishing visual separation between the footer sections).

You can, of course, adjust the color scheme of any of these sections to create other combinations that are more fit to your own personal or business style.

Similarly you could adjust the color scheme of each individual section within the Athens theme to create interesting combinations on your homepage or any page that you add them to.

Please note: If for any reason the above is not flexible enough for your shop, feel free to contact us. We’ll be more than happy to set up your colors and color schemes according to where and how you need them.