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.

Border radius settings for the buttons are found under Settings > Appearance > Borders.

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.