How to change theme colors

Introduction - Theme colors

There are three methods for changing theme colors:

1. Using Theme settings: Changes here apply to most colors across the theme
2. Using dedicated section settings: Changes here only apply to the section being edited
3. Adding custom CSS: Overrides styling of specific sections

Theme settings offer the flexibility to make global color customizations throughout your theme. However, certain sections that have their own settings won't be impacted.

To access your Theme settings click the Theme settings tab on the left-side menu, then select Colors.

Broader color adjustments, like general text and backgrounds, can be made under the General settings category.

If you want to focus on specific elements, for example, buttons, the header, or the footer, use one of our dedicated categories for extra control:

• General (text, links, and backgrounds)
• Badges (sales badges, sold out badges, and cart indicator)
• Header (text, hover, background, and overlay)
• Mobile navigation (text, hover, and background)
• Buttons (background, text, hover)
• Color schemes (backgrounds and text)
• Popup (background and text)
• Cart drawer (background and text)
• Footer (background and text)

Below, we'll look at each category and how it affects your theme.

At the end of this article, we'll also explore alternative methods for changing colors, including using dedicated section settings and adding custom CSS.

General

Under General, you can configure the primary color palette for general text, links, and backgrounds on each page of your store. These colors apply to all text and backgrounds that aren't controlled by dedicated theme or section settings (e.g. buttons, the header, and the footer).

Badges

Within Badges, you can modify the color of three badges to create eye-catching highlights: Sales badge, Sold out badge, and Cart indicator (displays on mobile platforms only).

Header

Use the Header settings to easily tailor the text, text hover effect, and the background of your store's header. As the first element most people see upon entering your site, you can use colors to help set the tone for your customers' visits. There are additional color options for headers that utilize overlays.

Mobile navigation

Within Mobile navigation settings, optimize the menu text, menu text hover effect, and menu background colors for mobile users.

Buttons

Use the settings under Buttons to fine-tune the colors of buttons across your store.

Color schemes

Certain sections offer a Color scheme option giving you the ability to choose between four preset color schemes: Minimal, Light, Feature, and Dark. 

Within Color Schemes, you can customize the background and text preset colors for Light, Feature, and Dark.

Popup

For stores that have popups enabled - Popup (color) settings allow you to control the color of the background and text.

Cart drawer

Adjust the background and text colors of the Cart drawer for seamless integration as it slides open on your page.

Footer

Tailor the background and text colors of your theme's Footer to establish a satisfying contrast with the rest of your page. This subtle differentiation helps customers recognize when they've reached the bottom of your page.

Using section settings

Several theme sections and their blocks contain dedicated color settings. Among these are:

• Animated text
• Collage builder
• Image with text overlay
• Slideshow
• Video hero

When you add a section to your storefront, it's worth checking its settings to see if additional color options are provided. If there are, these will need to be set in addition to your Theme settings.

Example of Image with text overlay section:

Alternatively, you can add custom CSS to your sections.

Custom CSS

Adding custom CSS to sections

Custom CSS can be added to your theme sections to enable greater flexibility over styling. Using this method will override the styling set in Theme settings. To add custom CSS to a section:

Step 1: Click on a section.

Step 2: Scroll down to the bottom of the section's settings and click Custom CSS.

Step 3: Add your CSS and Save.

Adding custom CSS to theme files

Custom CSS can also be added directly to your theme files. This will override any style settings that have been set elsewhere. To add custom CSS to your files:

Step 1: Go to your Shopify admin and click Online Store.

Step 2: Locate your theme and click the button containing three dots.

Step 3: Select Edit code.

Step 4: In your Code Editor, locate the Assets folder and click custom.css.

Step 5: Enter your custom CSS and Save.