Solved

Add another choice of background and accent option - Shopify 2.0

Ben1000
Trailblazer
262 3 70

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

Accepted Solution (1)

Adel-coder
Excursionist
12 2 2

This is an 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...

View solution in original post

Replies 7 (7)

RobDukarski
Shopify Partner
88 15 20

@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!

- Rob Dukarski
Helping to make commerce better for everyone!
Ben1000
Trailblazer
262 3 70

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
Shopify Partner
88 15 20

@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!

- Rob Dukarski
Helping to make commerce better for everyone!
Ben1000
Trailblazer
262 3 70

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
Excursionist
12 2 2

This is an 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
Trailblazer
262 3 70

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
Trailblazer
262 3 70

Hi @Adel-coder 

 

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