Color Schemes
Last updated
Last updated
Color schemes in the Materia theme allow you to create a consistent, professional visual identity throughout your store. With multiple pre-set schemes available, you can apply different looks across various sections of your site with just a few clicks.
Color schemes are collections of color settings (backgrounds, text, buttons, etc.) that can be applied to specific sections on your storefront. They help keep your design consistent while still offering flexibility to personalize your store.
Materia provides seven color schemes you can configure individually:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Scheme 7
Each scheme includes its own settings for backgrounds, gradients, text, borders, buttons, and hover effects.
Some sections in the Materia theme are built with more advanced design flexibility, and their colors are controlled manually within the section settings instead of the global color scheme.
This is intentional. It allows you to:
Design highly customized sections
Mix brand colors with bold visuals
Maintain layout freedom where needed
So while most standard sections (like product grids, testimonials, banners) follow the selected color scheme, others (like complex hero blocks or fully custom layouts) use direct color settings.
Here are the color options you can define for each scheme:
Defines the main background color for the section.
Example: #FFFFFF (white)
Add an optional gradient overlay to create visual depth. If unused, this field can be left empty. Recommended: Use sparingly for subtle effects.
This is the main accent color used in buttons, icons, links, etc.
Example: #454545
Used consistently across the store for brand recognition.
Controls the primary body text color.
Choose a dark shade for readability.
Example: #303030
Used for all section and block headings/titles.
Make sure there's enough contrast with the background.
Example: #000000 (black)
Defines the color of borders, dividers, and section outlines.
Soft greys like #E0E0E0 work well for subtle separation.
Controls the color of text-based buttons (like "Learn more").
Example: #764040
Use a brand accent or a contrasting tone.
The color of the text link when hovered or active.
This adds feedback and improves interactivity.
Example: #5E5E5E
When editing a section (like a banner, testimonial, or featured product), scroll to the "Color scheme" dropdown. From there, select one of the configured schemes:
Scheme 1 → Clean & light
Scheme 2 → Dark with contrast
Scheme 3 → Soft accent
...or create your own style
💡 Use different schemes for different sections (e.g., light hero + dark product grid) to create visual hierarchy and flow.
