Colors
Color schemes are a Shopify feature that allow you to color entire sections using a preset scheme.
Primavera utilizes color schemes, Shopify's newest technique for allowing merchants to easily reuse color schemes across the store. This guide will walk you through configuring different color schemes and the contrast requirements for each setting.
Text
This refers to the color of the primary body text. Because the theme uses a transparent version of the text color in some locations to serve as the background, this color needs to have a minimum color contrast ratio of 5 with the background color.
Text secondary
This refers to the color of supplementary text in the section, such as input labels, original product prices, etc. This needs to have a minimum color contrast ratio of 4.5:1 with the background color.
Background
This is used to create a solid background color for the section.
Background gradient
When applied, this uses a gradient for the background instead of a solid color. There may be some instances where a background gradient is unable to be applied, so a component may revert to a solid color instead, so we suggest setting the background color to be a color similar to the gradient.
Exception accent
This color is used for sale prices and errors.
Border color
The border color sets a border for decorative elements. There is no color contrast requirements for borders as the border color is only used for decorative purposes in this theme.
Buttons
There are three different button styles in Primavera. The primary and secondary button styles can be configured with color schemes, the plain text style will utilize the text color setting.
Background
The background refers to the button background color. If you aren't using a border for the button or the border is the same color as the background, this should have a contrast ratio of 3:1 with the section background color.
Border
This setting determines the border color. If your color scheme contains filled buttons with outline buttons, we suggest setting the border color to match the background for all filled buttons for equal button sizing.
Label
This setting determines the text color within buttons. The text color needs a 4.5:1 color contrast ratio with the button background.
Last updated