---
title: Bases colors theme settings
description: Setting and adjusting base colors in Booster theme.
---

[Skip to content](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#main-content)

![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png)

- [Home - Help Center](https://help.boostertheme.com/knowledge)

Open main navigation

Close main navigation

- [Home - Help Center](https://help.boostertheme.com/knowledge)
- [Go to boostertheme.com](https://boostertheme.com/)

[Go to boostertheme.com](https://boostertheme.com/?hsLang=en)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en)
2. [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en)
3. [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings)

# Bases colors theme settings

## Setting and adjusting base colors in Booster theme.

The base colors are the default ones for every element of your website. You will need to use this setting to change the color branding of your store, but you can also use custom colors in the section directly if needed.

#### In this article:

1. [Accessing Base colors in Theme settings](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#Accessing-Base-colors-in-Theme-settings)
2. [Layout colors](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#Layout-colors)
3. [Preset color combinations](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#Preset-color-combinations)
4. [Alert color](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#Alert-color)
5. [Mobile filter](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#Mobile-filter)
6. [Metafield content color](https://help.boostertheme.com/knowledge/bases-colors-theme-settings#metafield)

---

#### Accessing Base colors in Theme settings

To access the **Bases Colors** Settings, click **Customize** (Themes section on Shopify) > **Theme settings **> **Bases Colors**

![Access base color](https://help.boostertheme.com/hs-fs/hubfs/Access%20base%20color.png?width=321&height=451&name=Access%20base%20color.png)

#### **Layout colors**

Play with those setting to modify the most important aspect of your website

![Layout colors](https://help.boostertheme.com/hs-fs/hubfs/Layout%20colors.png?width=321&height=644&name=Layout%20colors.png)

   

#### **Preset color combinations**

You can make 2 presets of colors for your store. If you are customizing one of your sections, you can select in the color combination setting: your primary or secondary combination. This way you can bring consistency to the color of your website.

![accent combination.png](https://help.boostertheme.com/hs-fs/hubfs/accent%20combination.png.png?width=319&height=378&name=accent%20combination.png.png)

Let's say your are customizing your button for a Image + Text. Instead of reselecting the color simply choose between your combination 1 or 2. It is really simple to use.

[![Base colors](https://help.boostertheme.com/hs-fs/hubfs/Base%20colors.gif?width=688&height=387&name=Base%20colors.gif)](https://help.boostertheme.com/hubfs/Base%20colors.gif?hsLang=en)

#### **Alert color**

This color will be used for urgency indicators such as stock left, cart expiry, and likes.

[![alert colors](https://help.boostertheme.com/hs-fs/hubfs/alert%20colors.png?width=688&height=469&name=alert%20colors.png)](https://help.boostertheme.com/hubfs/alert%20colors.png?hsLang=en)

#### Mobile filter

This allows you to change the color of the mobile filter on the collection page, making it easy to customize the look and feel of your website on mobile devices. 

![](https://help.boostertheme.com/hs-fs/hubfs/image-png-Apr-08-2024-11-21-18-2703-AM.png?width=423&height=322&name=image-png-Apr-08-2024-11-21-18-2703-AM.png)

**Metafield content color**

With this feature, you can now apply a **custom text color** to any content displayed from metafields. This gives you more control over how extra product details appear.

*![metafield color](https://help.boostertheme.com/hs-fs/hubfs/metafield%20color.png?width=595&height=424&name=metafield%20color.png)*

*- End of the article -*

 

- [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content)
  
  
  
  
  
    - [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process)
    - [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics)
- [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content)
  
  
  
  
  
    - [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections)
    - [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings)
    - [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page)
    - [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials)
- [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content)
  
  
  
  
  
    - [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center)
    - [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme)
    - [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies)
    - [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others)

[![Chill listening crop-3](https://help.boostertheme.com/hs-fs/hubfs/Booster-black-logo.png?width=178&height=51&name=Booster-black-logo.png "Chill listening crop-3")](https://boostertheme.com/?hsLang=en)

<https://www.facebook.com/316229588744482> <https://www.instagram.com/boostertheme> <https://www.youtube.com/c/BoosterTheme>

Copyright © 2026, Booster Theme - PreviewX Inc.