Working with fonts, colors and preset styles
Theme style or "presets"
Theme styles contain pre-configured design settings that demonstrate the stylistic range of the theme. Each theme comes with three different styles and can be a good starting point build your store design from. To change theme styles, go to the Theme settings > Change theme style.
Universal color settings can be found in the Theme settings > Colors tab.
In the theme settings you can set an Accent color that can be be used for section background and other elements. Accent colors are great for creating visual contrast while maintaining consistency when adding colors to sections.
Once the color is set, it can be referenced in a sections color dropdown selector with the other default colors.
Create vertical rhythm and contrast using accent colors
The use of repeated visual elements is a design technique to create contrast while maintaining a consistent visual experience.
Below shows an example of alternating rhythm with sections using a 1-2-1-2-1-2 pattern for background colors.
Section color settings
Sections contain text color and background color settings that you can tweak to suit your content.
The text color setting contains an
Auto, Light and
Auto will adjust the text color based on other settings. For example, if a box around text is set, the dark text color will apply automatically.
Darken image setting to enhance text visibility for lighter images.
If you would like to customize colors of elements not found in the theme settings, visit our guide on Adding CSS and Editing template files.