The Theme of your website can be changed by going to Store Editor -> Theme. This is only available to users with a manager account and should only be edited by someone with high authority.
Themes are defined per location. For the recommended theme workflow for theming multiple locations see the end of this article.
Presets
Light and Dark presets are available to quickly change the branding of your store. Both themes can be used as a starting point and customized further. You can also reset the theme to default if you do not like the changes.
Be aware that selecting a preset will override all existing theme color settings.
Export
After you create and save a theme you want to use the store, you will want to download the theme so you can use it again later or update your other locations with the same theme.
Brand - (Accent, Background, Text)
The main work of your theme look and feel will be done by your Layout and Button colors. Brand colors are used in limited places throughout the store to draw attention.
Brand Accent and Text colors should have good contrast with your chosen background colors.
Brand Background should have a similar brightness to your other background colors (if your main theme background colors are light, then it should be light, if they are very dark then if should be dark).
Layout - Background (Background, Secondary, Tertiary)
These colors will be the most important in determining the feel of your theme. They will be used as the background for your entire store as well as interface elements like cards and text inputs.
Background should be your highest contrast background color. If you are doing a light theme, it should be the lightest background color; if you are doing a dark theme with light text, it should be the darkest background color.
Secondary and Tertiary backgrounds should have lower contrast. For light themes they should be darker than your main Background, for dark themes they should be lighter than main background.
Ensure that the colors you pick for your backgrounds are dark or light enough to support high contrast text.
Layout - Borders
Border colors are used to divide or outline sections, cards, and inputs in the store. For light themes, your border colors should be slightly darker than your background colors. For dark themes, they should be slightly lighter. Your primary border should stand out more than your secondary border.
Buttons (primary, secondary, tertiary)
Primary button colors will be used for the most important actions on a page, such as a checkout button. You can use a bright brand colors for this button. Whatever color you pick, ensure that you set the button text for good contrast with the background color.
Secondary button colors are used for most areas that require a button. Secondary buttons should have similar colors to your background and the main text colors of your theme. If you choose bright colors for this button, or ones very different from your background, customers may get confused about the most important action on a page.
Tertiary button colors are used for the least important actions on a page. Neutral colored tertiary buttons will have their colors set in this section. Brand color tertiary buttons will use the "Brand Text" setting from the brand colors section
Text Colors - (Primary, Secondary, Tertiary)
The most important thing for text colors is that they are readable. For this reason we don't recommend choosing very bright colors for your primary, secondary and tertiary text.
If your theme has neutral background colors (white, black) the preset colors in the theming tool are a good starting point.
If your theme has colored backgrounds you may want to use the slider to change the color of you text to match your background color.
When selecting a text color the most important thing is to make sure that your lowest contrast background color (Background Tertiary) and your lowest contrast text color (Text Tertiary) still give acceptable contrast ratings.
Text Colors - (Priority, Error)
These colors are used when there are important messages that the user should notice. Bright colors are expected here, and should stand out from your background and other text colors.
Priority text is used when there is a message that its important the customer notice, such as the counter that shows the number of search results.
Error text is used to indicate a problem, like an error message in a form when the user has missed a field.When setting these text colors, you should use similar colours for Priority and Error under the "Functional Colors" settings to ensure that your store looks consistent.
Functional Colors (Error, Priority, Notice, Success)
Functional colors are used to communicate specific meanings to your users. For example, successfully adding a product to cart returns a small green success popup. It is recommended to keep the success colors in some kind of green, and the error colors in some kind of red, since these colors already have strong associations to the type of message they represent
Notice colors indicate information that isn't good or bad. By default blue is used, but you can pick any color that doesn't stand out too much from your theme.
Priority colors are for important, eye catching stuff like products on sale. These colors are an opportunity to insert your brand. You can pick any color you like for these, as long as they really stand out from the rest of your theme.
Fonts
You can select any google font to be used for your Carrot store. You can also use the "Same as Website" setting to allow the store to automatically use the same font as is currently being used on your website.
Exporting themes
The export section allows you to download your current changes as a file from your computer, and load them later. This allows you to experiment different variations that aren't ready for publishing, or to publish a temporary seasonal theme while downloading your main theme to easily revert back later.
Multi Location Theming
Themes are defined per-location to allow you to add variation between locations to increase recognition from customers. This means that themes need to be set up separately for each location.
To save time when setting up multiple locations, pick 1 location to use as your base theme, then save it as a file. When configuring other locations you can load your theme from that file, and then add any variations specific to that location.
ADA Compliance:
It's very important to check your branding against the guidelines of the ADA. Carrot is not responsible for any ADA violations.