How do I use color schemes?
Color schemes allow you to define groups of colors that are tailored for your store and work well together. Having a predefined set of color groups makes it quicker and easier to customize the colors used throughout your theme. A color scheme will usually include background colors, text colors and button colors, but can also include other colors.
Color schemes are configured through the theme settings. Once color schemes have been set, you can then use them throughout your theme. For example, most of our theme sections have one or more color scheme settings, which let you quickly select the colors that will be used for that section.
Please also see the following page from Shopify's documentation for more information on color schemes.
Related Articles
Color settings
Color settings are used to set the color schemes and colors that will be used throughout the theme. Color scheme settings are set out in the table below and are accessed through the theme editor. Setting Description Background Set the background ...
Color swatch settings
Color swatch settings are used to configure and customize color swatches displayed in product cards and product sections. Color swatch settings are listed below and are accessed through the theme settings. Setting Description Enable color swatch Use ...
How do I set up color swatches?
Color swatches allow you to display color pills instead of standard variant pills when a product has a color variant. Color swatches are configured through the color swatch theme settings. Color swatches are enabled by default and can be disabled by ...
How do I set up custom product badges?
To set up a custom product badge, add a tag to the product that you wish to add the custom badge to, using the following format: "custom_badge_1-Name". The parts of the tag that should be changed are bold and italicised. The number represents the ...
Other settings
Other settings are listed below and are accessed through the theme settings. Setting Description Show breadcrumbs Use this setting to show navigation breadcrumbs. Back-to-top button Show back-to-top button Use this setting to show the back-to-top ...