Eight Themes Support Documentation

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.

Theme Settings - Colors.gif

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).

Theme Colors - General (Flow).png

Please note: Many theme sections contain dedicated styling options. As a result, section text, hover effects, buttons, borders, and backgrounds, may be configured directly through the section and not through Theme settings.

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).

Theme Colors - Sales Badges (Flow).png


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.

Theme Colors - Header (Flow).png


Mobile navigation

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

Theme Colors - Mobile Navigation (Flow).png


Buttons

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

Please note: Sections where a button may overlay an image will have color settings in the section to override the default colors to help ensure legibility.
 

Color schemes

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

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

Theme Colors - Color Schemes (Flow).png


Popup

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

Theme Colors - Popup (Flow).png


Cart drawer

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

Theme Colors - Cart Drawer (Flow).png


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.

Theme Colors - Footer (Flow).png


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:

Theme Settings - Colors - Image with Text Overlay.png

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.

Theme Colors - Custom CSS - Section.png

Step 3: Add your CSS and Save.

Please note: Knowledge of CSS is required and we are not able to provide support for custom CSS. Click here to read Shopify's custom CSS help pages.

 

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.

Flow Edit Code.png

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

Theme Colors - Custom CSS - Files.png

Step 5: Enter your custom CSS and Save.

Please note: Knowledge of CSS is required and we are not able to provide support for custom CSS. Click here to learn more about Custom CSS.

Was this article helpful?