Debut Theme: Changing button colors on homepage

Store Design
1

Hi,

I am using Debut theme and I have a section “Text Columns with Images” on homepage, and under those columns, there are 3 buttons. How can I change the background and text color of those three buttons?

I have attached the screenshot of buttons:

buttons.JPG
buttons.JPG1234×102 6.97 KB

2 Likes
2

@Ample

Please share your store URL.

3

@Ample

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

@dmwwebartisan @KetanKumar

Site: www.vahow.com

Password: vahow

5

please add this below code end of the theme.css file

a.btn.btn–secondary.btn–small {

background-color: #ed5f85;

color: #fff;

}

6

@Ample

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

a.btn.btn--secondary.btn--small {
  background-color: #ed5f85 !important;
  color: #fff !important;
}

Thanks!

7

@Denishamakwana Wow! This is just amazing. Thank you soooooo much. I truly appreciate it.

I just have two questions if you don’t mind answering.

  1. Is it possible to change the “Capital Letters” to Sentence case, such as “Shop Bracelets” rather than “SHOP BRACELETS”?

  2. Is it possible to change the middle button (Shop Neckties) to this color: #6ACBCB?

Again, thanks so much for your help. It looks GREAT!

8

@Ample

Remove Previous css class and add this new css class

a.btn.btn--secondary.btn--small {
  background-color: #ed5f85 !important;
  color: #6ACBCB !important;
  font-family: inherit !important;
}
9

@dmwwebartisan

Thanks for your help. It changed the font style but it’s still in CAPITAL Letters. No problem, I can use this same one.

Just one thing, for button colors, I wanted to keep 1st and 3rd button color to same what I had previously, and just wanted to change the middle button color to #6ACBCB.

Is it possible?

1 Like
10

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

ans 1) a.btn.btn–secondary.btn–small {-

text-transform: capitalize;

}

Ans 2) in this case if you give different class for tag under the "grid__item medium-up–one-third text-center " div for particular middle part.

then we can apply particular css on that.
11

@Denishamakwana

I am not sure how to do the second part so I will leave it as-is. I truly appreciate your help.

Thanks again!