Change button color on image banner for Dawn theme

Store Design
1

Hello. I am using the Dawn theme and would like to change the color of the call-to-action button on my image banner to something (#ffd556 to be exact) instead of black & white.

I’ve tried this solution @Zworthkey but it isn’t working → https://community.shopify.com/c/shopify-design/changing-the-color-of-the-image-banner-button-in-dawn/m-p/1437256#M378160

My website is www.trykindred.com

Thank you!

2

Hi @mattmark ,

  1. In your Admin page, go to Online store > Themes
  2. Choose the theme you want to edit then click Actions > Edit code.
  3. Open the base.css under the Asset folder.
  4. Add the code below.
.banner__content .button {
    background: #ffd556;
}

.banner__content .button::after {
display: none !important;
}
3 Likes
3

Hey @mattmark .

Thanks for reaching out.

Did the coding change advised by @made4Uo , do the trick for you? If so, make sure to mark their post as a solution to inform others that may view the thread.

I appreciate that you have included the name of the theme you are using as that is very helpful! Looking into the Dawn theme, you can change the color of the button on the image banner by navigating to the Theme Editor. Once you are editing the theme, you can select the Theme Settings located towards the bottom left of the page. This will allow you to see the option to change the Colors of the online store, the first two options will change the color of the image banner button. I took a screenshot from my test store to show you the section I am referring to:

21-19-25886-10
21-19-25886-101920×920 222 KB

With that being said, making this change to the color of the buttons will be applied to all buttons within the online store. If you would like to specifically change the color of the image banner button - this will require a change of coding. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to have our internal team make the changes on your behalf.

If you are interested in using the design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before speaking with a Support Advisor about the changes you would like to see.

Let me know if you have any questions.

4

That did the trick. Thank you so so much @made4Uo !!!

mattmark_0-1655833976444.png
mattmark_0-1655833976444.png1235×816 198 KB

1 Like
5

Hi there! You helped me as well. Is there anyway to make the text on the button white vs. black? Thanks so much!

6

Hi @alexandra1111 ,

Yes, just add the color below. Change the color to your liking

.banner__content .button {
background: #ffd556;
color: #fff;
}

.banner__content .button::after {
display: none !important;
}
1 Like
7

Thank you for the button color and font code. What should we add to make hoverable?

Thank you!

8

HI @Rebel2020

You can try the code below. Just change the color

.banner__content .button:hover {
background: black;
color: white;
}
1 Like
9

Worked perfectly. Thank you!