Color schemes

One of the most important components of designing a visually appealing, functional, and accessible theme is color. Not only does a well-designed color system reinforce a merchant’s branding, it has the power to enhance and direct the user’s experience.

When designing the color system for your theme, consider both the overall look and feel, and the interplay or relationship between elements. There should be an established hierarchy between elements. For example, emphasize a call-to-action, and provide adequate color contrast between foreground and background elements. This sets merchants up for success by providing seamless and accessible experiences for their customers.

To help make your theme’s color system more robust and intuitive for merchants to use, you can use color schemes.

Color schemes

Color schemes are a theme setting that let you group together elements and their respective colors, in a visually representative way to merchants. You can create an infinite amount of color schemes to offer merchants more flexibility and variety for their storefronts.

When designing color schemes for your themes, include elements that are used throughout the theme. Consider areas where merchants would benefit from being able to change colors in one shared place.

Example: Your color scheme includes text, background, link and button text. You have a specific section where users can add a grid of icons to represent product features. You can allow merchants to use a bespoke color for these icons if you so choose.