Hi! I’m trying to change the color of the “Shop All” button in the Image Banner in Dawn. When I click on the button, and then click on theme settings, the option to change the color of the button disappears. I have looked at other solutions and tried copying and pasting code, but that never seems to change anything in my page. Instead of white, I would like the color to be#D93A00.
Hello!
On Dawn theme you can change the button color but it will change the color of every button. If you still want to do it, just go to your theme settings.
If you only want to change the color of this button, you’ll have to edit code.
So, first, you have to identify your button :
Right click and inspect
Right click
Copy selector
Go to your theme code : Online store > Edit code > Assets > theme.css
Go to the end of this file, paste your selector and add this : { background-color:#D93A00!important }
It should look at something like :
#Banner-template–14238874009689__image_banner > div.banner__content.banner__content–bottom-center.page-width > div > div.banner__buttons > a { background-color:#D93A00!important }
Hope it’ll help!
Hi! Thanks for your quick response! Unfortunately, that didn’t work for me. First, I have a MacBook and the right click only resulted in things like “refresh page”. so, I went to the code you suggested and couldn’t find what you told me to look for in theme.css. (actually, my option was theme-editor.js) So, I poked around and saw some words like you posted about banners. I tried pasting the code in both the Theme edit and the other section (Sections>Image banner.liquid) but nothing changed. If you can’t already tell, I have no website building experience, so you’ll have to talk to me like I’m four years old. hahahaha.
Oh yes it wasn’t theme.css but base.css (in the Assets folder)
Actually you can just paste this code a the end of the base.css file :
.banner__buttons > a { background-color:#D93A00!important }
It worked!!! Thank you! Is there a way to change the text color in the button?
Cool! Sure you can.
You’ll have to use the CSS color property, if we re-use your code it will look like that :
.banner__buttons > a {
background-color:#D93A00!important;
color: #000000!important;
}
If you want to use another color for your text, juste replace the “#000000” by your own HEX code.
Thanks so much! I got it to work!
