Add another choice of background and accent option - Shopify 2.0

[Ben1000]

Hi, I'm using the Dawn 2.0 theme.

In default, there are 2 options for background and accent. I want to add one more option.

How do I do it?

Thanks

[RobDukarski]

@Ben1000 

You are going to want to set them up in the "config/settings_schema.json" file. Then you'll need to also add the options to any section or block you may want to include them with and any CSS that might use the new colors. It is a tedious workflow but that would be the way to do it. One suggestion would be to download the theme and use a text editor that can "find-and-replace" in all files so that you can easily make the changes where they should be and not have to go through the code to copy-and-paste those changes manually. I'm guessing it may save some time..

Another thing to note is that you can set up custom colors for sections or blocks to utilize them without having them be theme-wide, for example a custom color scheme for a specific product template.

Hope that helps!

[Ben1000]

Hi @RobDukarski 

Thank you for your advice.

1. I followed the first option you have mentioned. I see the new background I added on theme setting → color and also in the section I see the option in color scheme of each section, but when I pick the colour it's not actually changing the section background. If you have an idea what I didn't do right, I would appreciate it.

2. Regarding the second solution for set up custom colors for sections or blocks, I would like to know how to do it. The main thing I want to do is changing the whole background of the first section in my home page - image with text.

Thanks

[RobDukarski]

@Ben1000 

You will still need to add the Liquid and CSS necessary for getting the chosen color to be used by your theme.

For the custom color in the sections I believe you should be able to utilize the code from that "config/settings_sheme.json" file within the sections themselves for adding a color input. You still need to make sure that the CSS for the them utilizes the color you choose via a mix with the Liquid code.

Sorry it's not a more direct answer than that but that is what else you will need to do to make it happen.

Hope that helps!

[Ben1000]

Hi @RobDukarski 

I tried to copy-paste as you said all the relevant parts. I created "Background 3" and "Accent 3"

The only problem is that when I choose Background 3 I see the right colour I picked, but it doesn't sync with Accent 3 colour.

The default in Shopify is when you select background x it will sync with the Accent X colour (e.g. section's background will be background x colour, so the button's colour will be accent x colour).

How can I solve it?

Thanks

[Adel-coder · Accepted solution]

I saw a similar questions posted on Plak theme forum, and here it is the answer to add colors pickers

https://plaktheme.com/community/general-questions/add-another-choice-of-background-and-accent-option...

[Ben1000]

Hi @Adel-coder 

Thank you for letting me know, but that code is not working on Shopify 2.0 themes, they have a mistake

[Ben1000]

Hi @Adel-coder 

now they fixed the code in the link and it works. Thanks!