Back to all articles
Photo of Niki, the author of this blog post
Niki · 14 October 2022

How to add additional dynamic color scheme to the theme settings? (Update July 2023)

Creating an additional dynamic color scheme to the theme settings enables you to easily customize another color scheme for background, fonts, button labels, and else. This allows merchants to have more color options and hence, give them more customizable options without the need of coding anything. In this guide, we’ll look at on how to add additional background color to the theme settings, which can be used further in theme’s sections (e.g. in the image with text section). As usual, we’ll use Dawn theme.

Update July 2023: Easily chance your store’s color schemes (no coding!)

In the summer Shopify editions announcement, Shopify revealed exciting news regarding the latest version of Shopify free themes, such as Dawn theme. Now, you can create and customize color schemes for your store without writing a piece of code.

With these newly crafted color schemes, you can elevate the visual appeal of your store’s sections, making them stand out like never before. This update empowers you to establish a unique and consistent branding experience across your entire store.

Check out the step-by-step guide on setting up color schemes, illustrated with the example of Dawn theme 11.0.0.

  1. Go to your Shopify admin.
  2. Ensure your theme is up to date with the latest version.
  3. Click on “Customize” to begin customization.
  4. Navigate to “Theme Settings” and select “Colors”.
  5. Click an existing scheme to change the colors or click “Add scheme” to add a new color scheme. Adding a new color scheme
  6. Click the color swatch to choose your colors. The color field accepts color names such as red, black, or blue, RGB color codes, and hexadecimal color values. Optionally, set up a background gradient if desired. Editing a color scheme
  7. Save the customized color scheme.
  8. Choose the specific section where you want to apply the newly created or edited color scheme.
  9. In the section settings, find the dropdown menu and select the desired color scheme. Applying a newly create scheme to sections
  10. Save your changes.

Adding a color scheme – code solution

If your current theme does not have built-in support for adding a new color theme through the theme settings, you’ll need to make adjustments in the source code. Below is a guide to help you set it up.

Files you need to change

To create a new dynamic color scheme, we’ll need to make changes in the following files:

  • config/settings_schema.json
  • config/settings_data.json
  • layout/theme.liquid
  • assets/base.css
  • any section files, you would like to add the option to select another background color (in our example, it’s gonna be image with text section)


This file controls the organization and content of the Theme settings area of the theme editor. All setting selections in the theme editor are saved in settings_data.json. We’ll add the following code snippet (adding background color and gradient) into this file (find the section with background colors):

    "id": "gradient_background_2",
    "type": "color_background",
    "label": "t:settings_schema.colors.settings.gradient_background_2.label"
  <-- Start: Adding new background color scheme -->
    "type": "color",
    "id": "colors_background_3",
    "default": "#FFFFFF",
    "label": "Background 3"
    "id": "gradient_background_3",
    "type": "color_background",
    "label": "Gradient background 3"
  <-- End: Adding new background color scheme -->

Note: You can of course add translations for labels. I don’t use them in our example to make it simpler. However, I recommend using the translations when you’re e.g. building a new theme.


This file contains the setting values for a theme based on the settings included in settings_schema.json. The settings_data.json file has two parent objects:

  • current (This object contains all of the setting values that are currently saved in the theme editor.)
  • presets (This object contains an object for each theme style – Dawn theme, version 7.0.0, has one theme style “Default”. Each object is in the same format as current.)

Add the background color in both objects as shown below (once in the current object and once in presets object).

       "current": {
          "colors_solid_button_labels": "#FFFFFF",
          "colors_accent_1": "#121212",
          "colors_accent_2": "#334FB4",
          "colors_text": "#121212",
          "colors_outline_button_labels": "#121212",
          "colors_background_1": "#FFFFFF",
          "gradient_background_1": "",
          "colors_background_2": "#F3F3F3",
          "gradient_background_2": "",

          "colors_background_3": "#FFFFFF",
          "gradient_background_3": "",


Layout/theme.liquid file is the default layout, which usually contains two main Liquid objects:

  • content_for_header
  • content_for_layout

We’ll add the background color to the content_for_header object (this object dynamically loads all scripts required by Shopify into the document head).

    --color-base-background-1: {{ }}, {{ }}, {{ }};
    --color-base-background-2: {{ }}, {{ }}, {{ }};

    --color-base-background-3: {{ }}, {{ }}, {{ }};
    --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
    --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};

    --gradient-base-background-3: {% if settings.gradient_background_3 != blank %}{{ settings.gradient_background_3 }}{% else %}{{ settings.colors_background_3 }}{% endif %};


Now, we need to add the background color to the base CSS file so that the colors. We’ll need to add the background color to :root and body like this:

    .color-background-2 {
        --color-foreground: var(--color-base-text);
        --color-background: var(--color-base-background-2);
        --gradient-background: var(--gradient-base-background-2);
    .color-background-3 {
        --color-foreground: var(--color-base-text);
        --color-background: var(--color-base-background-3);
        --gradient-background: var(--gradient-base-background-3);

    .color-background-3 {
        --color-card-hover: var(--color-base-text);


sections/image-with-text.liquid (or any other section file)

Now, we need to enable to select the additional background color in the specific section(s). The example will be shown on the image with text section. We will add the new background color scheme to the section’s settings (you can add the translations for the label).

    "type": "select",
    "id": "color_scheme",
    "options": [
        "value": "background-1",
        "label": "t:sections.image-with-text.settings.color_scheme.options__1.label"
        "value": "background-2",
        "label": "t:sections.image-with-text.settings.color_scheme.options__2.label"
        "value": "background-3",
        "label": "Background 3"

Choose color in the color picker and assign background 3 to a section

Great job, everything is set up! You just need to choose any color (and gradient if needed) in the Theme Settings.

Choose a color in the Theme Settings

After that, add image with text section (e.g. to your homepage) and in the dropdown menu Color Scheme, select Background 3. See the result in the screenshot below:

Assign background color 3 in the section

Important note: You may need to assign further CSS properties to the class .color-background-3. When you change the background color, you may also need to change e.g. the button background or the button label text (to get an entire color scheme).

I hope you find this article helpful and successfully add additional background color to the theme settings. If you have any questions, feel free to get in touch with us. We’ll be happy to help you out.

Have a project in mind?
Get in touch
Drop us an email to

and one of us will get back to you soon.