Themes/Color Schemes

What are themes/color schemes?

This theme empowers you with something called color schemes, or themes. Themes allow you to create a preset choice of colors that you can apply throughout your site. This is convenient because you define them in one location and then if you ever want to change a color, you can change it in that one place and it will update across every section and element you've applied it to.

What to know when creating them

Each scheme asks you to define 6 colors: background, text, border, button button text, and links. It's very important that you create enough contrast when making choices for these so that you can create a site people can see and read. To do this, keep these tips below in mind and use a contrast checker to double check your work.

• The Text color and the Background color must have enough contrast to read the text
• The Button Text color and the Button color also must have enough contrast to read the text
• The Button color and the Background color can't be the same
  • However they don't need to have extreme contrast like the items above. They can be slightly different enough to be noticeable, or they can be hugely contrasting colors. The more contrast between the Button color and the Background color, the more your customer is going to feel intrigued to click the button.
• The Border color and the Background color also can't be the same
  • However they don't need to have extreme contrast like the items above. They can be just different enough to be noticeable or they can be hugely contrasting colors. It's your aesthetic preference.

Our suggestions on how to create the best options

This theme gives you the option to create up to 21 schemes. You can create these however you'd like, however here is our general suggestion:

1. Create a primary scheme that you're going to use the most often. What scheme would you want applied to pages like policy or account pages?
2. Create a scheme that's similar to the primary theme, but has a slightly different Background color and, optionally, a different Button and Button Text color. Use this schme on sections that don't mesh well with primary themed sections to create a slight aesthetic difference.
3. If your scheme theme has a dark Background color, create a scheme with a light Background color or vice versa.
4. Create a fun scheme. Apply this theme to sections and elements that you want to stand out.
5. Create another fun scheme. Apply this theme to sections and elements that you want to stand out.

How themes/color schemes look in application

This is what it looks like to apply different themes to the same section:

Scheme 1

Scheme 2

Scheme 3

Scheme 4

Scheme 5

Where can themes/color schemes be applied?

By default your primary scheme is applied globally to your website, which means these items automatically adopt the primary theme:

• Header/Main Navigation Bar and its megamenus
• Policy Pages
• Customer account pages
• Giftcard section

The primary items you'll be applying themes to are sections. Almost all sections allow you to choose its scheme. In addition to sections, these are the items that allow you to choose its scheme:

• The left and right sides of the footer
  • Assumes all theme colors
• Buttons on some sections such as the image banner section
  • Assumes only the theme's Background color and Text color
• Overlays on some sections such as the image banner section. Overlays are transparent blocks of color that layer on top of images in order to create visual interest or provide contrast between the image and text on top of it
  • Assumes only the theme's Background color
• Stats on some sections such as the main list collections section
  • Assumes only the theme's Background color
• Tags on the main blog section
  • Assumes only the theme's Background color and Text color
• Quote cards on some sections such as the multicolumn section
  • Assumes all theme colors
• Dots on the shop the look section
  • Assumes only the theme's Background color

Theme Styles

This theme comes with three different preset styles. These styles were designed by our team to provide a consistent and appealing look for online stores and they are a way to quickly apply a specific design to your store without extensive customization. However, the customization options within the theme editor allow you to tailor the preset styles to better suit your brand and preferences.
Those styles are:

• Bold
• Calm 
• Clean

You can apply these styles by using the theme editor under Settings > Theme style.