Color settings

The color system of Maranello 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 7 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 form inputs) will inherit their border color from this setting.

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

Background 2: The secondary background is color mostly used as a way to visually prioritize a section. It’s also used as the background of all cards and drawers or modals.

Cards border: Component borders (like the product card) will inherit their border color from this setting.

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. It is, for example, the default background color scheme of the Features section.

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. It is, for exmaple, the default background for the header and announcement bar sections.

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.

Buttons

Buttons in Maranello have their own distinct color settings, “Primary Buttons” and “Secondary Buttons“. The vast majority of the buttons in the theme are “Primary”, meaning the will inherit the background and text colors of the “Primary Buttons” setting. Similarly for the Secondary buttons such as the “Add to cart” button in the product page, and other buttons that need visual separation when they are near to other primary buttons.

Badges

Sale badge: The background color for the Sale badge.

In stock / Limited stock / Out of stock badge: The foreground color for each of the product availability status text on product cards and the main product template.

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 Maranello’s 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 contains by default (among others), two different sections (Announcement bar, and Header). Along with the Announcement bar, the Header section specifically comes with additionally three more areas that can have their color scheme edited (Header, Navigation, and Mobile navigation).

Notice how, by default, every area has a default color scheme (“Accent 2” for the header and “Background 2” for the rest) already applied, whereas the Announcement bar has the “Accent 2” 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 dark-on-white approach for the Announcement bar by selecting the “Background 2” color scheme, separating it from the main header section.

Another example is the shop’s global footer section which comes with two different sections on its own (Features and Footer). The “Footer” section is colored by default with the “Accent 2” color scheme and the “Features” 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 Maranello 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.