Dawn 11.0 Theme - Changing colour schemes

Store Design
1

Hi,

I have been using an older version of Dawn but want to change to the newer 11.0 theme which I have downloaded now.

It shows me at the top ‘To preview your changes, color schemes must be defined in settings_data and settings_schema files.’

I have tried a coding from a previous posting on here but am unable to make that work and am not sure how to change the settings to show my branding colours (they are all set up under brand)

What else can I try to fix this please?

Thanks!

2 Likes
2

Hello, @SecondSnuggle
Please Check

Here are the general steps to update your theme’s settings to reflect your branding colors:

  1. Locate the settings_data and settings_schema files: These files are typically found within the theme’s folder. They define the available settings and their default values.

  2. Define your color scheme: In the settings_data file, you should find a section that defines color-related settings. You’ll need to specify your branding colors here. It might look something like this:

{
  "name": "Color Settings",
  "settings": [
    {
      "type": "color",
      "label": "Primary Color",
      "id": "primary_color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "label": "Secondary Color",
      "id": "secondary_color",
      "default": "#6c757d"
    }
  ]
}

Make sure to customize the label, id, and default values to match your branding colors.

  • Modify the theme’s code to use these settings: Once you’ve defined your color settings in the settings_data file, you need to modify the theme’s code to use these settings. This usually involves replacing hard-coded color values in the theme’s CSS files with references to the settings you defined.

    For example, if you have a CSS rule like this:

    css

.header {
  background-color: #007bff;
}

You would change it to use the setting like this:

css

.header {
  background-color: {{ settings.primary_color }};
}

This way, the theme will use the color defined in the settings.

  • Preview your changes: After making these modifications, you should be able to preview your theme with your branding colors by following the theme’s preview instructions.

  • Save and Deploy: If you’re satisfied with the preview, save your changes and deploy the updated theme to your website.

3

Hello,

Where exactly do I have to insert the code from you?

Thanks

4

Hi,

I don’t understand where in schema_data.json you put this code. Could you precise ?

5

I am experiencing the same issue.