Changing the Color of the Image Banner Button in Dawn

Store Design
1

Does anyone know the coding to change the Image Banner button’s color in the Dawn theme?

2

Hi, @Tri_S ,

When it comes to changing the background color of the button you showed, simply refer to the screenshot below.

04-41-4785-16794
04-41-4785-167941328×1005 100 KB

04-43-28323-966
04-43-28323-9661332×1003 170 KB

Please refer to the following for the steps:

  1. Head over to your theme editor
  2. Scroll down to theme settings
  3. Click on Colors
  4. Change colors scheme

Let me know if there are clarifications needed with these instructions.

3

how do you change the specific color of the image banner button with coding?

This is for the store owner to change the color. I asked this because when i use one color all buttons will have the same colors

4

Hi Daniel,

I wish it was that easy. Unfortunately, it only works like that when you check the “show text box on desktop” option in the banner feature. Otherwise, the box is always white with black text on desktop. It does, however, change colors on mobile.

Hopefully, some nice coder will have the answer. :grinning_face:

5

Andrew, coding would have to be added/changed in the edit code section of the site.

6

@Tri_S please share your store URL. Also, if it is password protected then share the password as well.

7

https://healed-ish.com/

8

@Tri_S
Add this code in base.css file

.banner__box>.banner__buttons:only-child .button {
    margin-top: 0;
    background-color: red !important;
}

Add your Color name instead of or which you want ‘red’ .
Thank you.

9

Thank you, Zworthkey!

Just two little tweaks if you can help. When I changed the color I realized 1) The box has a border and 2) I’d also like to change the font color.

Thanks in advance!

10

@Tri_S

just follow the given steps, it will change the color and remove the border:

Go to online store > themes
from the action drop down, click on “Edit code”
now search for “theme.liquid” (use the search box that you see on top-left)
  • change the color code according to your preference.

Also, you can add the code in base.css (you can find it out in the same way)

if you want to add it in base.css then use the following code:

.banner__buttons>.button 
{
    background: #2bbedf! important;
    color: #20e742! important;
    box-shadow: none! important;
}
11

Awesome! Thanks!

12 
.banner__buttons>.button 
{
    background: #2bbedf! important;
    color: white! important;
    box-shadow: none! important;
}
13

I have tried to use the same method for changing the border but it is not taking effect.
Preview website: https://1slvv2uy9czm3wcd-58991542329.shopifypreview.com

Code:
.banner__buttons>.button
{
background: white; border-color:black !important; border-size:1px !important;
color: #black;
box-shadow: none! important;
}