Can you change theme color inputs to a hex code instead of dropdown?

Solved
Highlighted
New Member
3 0 0

When selecting colors to use in sections on my theme (using Blockshop), I am given a dropdown with only 2 colors (accent & light grey). Is there a way to change the input on this, so I could enter a hex code each time instead using a dropdown. I would like to use more than just 3 colors on my site and want my client to be able to update the colors easily! Happy to edit liquid. Thanks!

0 Likes
Excursionist
33 3 9

Hey there,

 

color picker a definitely possible in Shopify. In your section Schema, it would look something like this:

 "settings": [
      {
        "type": "color",
        "id": "color_background",
        "label": "Background color",
        "default": "#cccccc"
      }
]

 

Now that you said, you only have a few color options, your theme will work either with some CSS classes depending on the selected color, or it has the hex values behind each color. (You can try to find that out within the section file)

 

If they have hex values behind you could probably just replace the selector with a color-picker, but if they use CSS classes it will take some additional tweaking. Just make sure to duplicate your theme first.

 

Hope that helps :-)

 

 

Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
0 Likes
New Member
3 0 0

Hi, thanks so much for your answer!

 

I changed the code to this:

 

"id": "color-background",
"label": "Background color",
"type": "color",
"default": "#cccccc"

 

(had to change the original id from 'background-color' as I got the error 'New schema is incompatible with the current setting value. Setting 'background-color' must be a CSS color)'

 

I now have a color picker in the section (woohoo!) but it doesn't actually change the color. I'm guessing I need to change some css where this is defined?! Is this what you and the error message were saying? So grateful for your help, thank you.

0 Likes

Success.

Excursionist
33 3 9

Your welcome, and awesome you got the color picker to appear.

Now that you have the color picker in your settings you need to output it's selected value somewhere in your section file.

 

You can access section settings in the following way:

{{section.settings.color-background}}

 

This could work with an inline style attribute or with a CSS class.

 

<div style="background-color:{{section.settings.color-background}}" >content</div>

.myClass { background-color: {{section.settings.color-background}} ; }

 

Maybe you can figure out where the old selector value was located in your section file and try to replace the old value with the new :-)

 

 

Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
0 Likes
New Member
3 0 0

It works! Thank you SO much for your help, the penny has dropped and I'm really starting to understand liquid now, through doing things like this - so thank you :)

0 Likes