Solved

Changing button color and size on Debut theme

Kevin_Maek
Excursionist
14 0 6

Hi

I want to change the color and size of certain buttons instead of only having the option to bulk change them. 

I looked at previous posts about changing buttons in the code editor but I can't seem to figure it out. 

I want to change the SHOP NOW button on the top and bottom of the home page, the LEARN MORE on the middle, and VIEW ALL just underneath that. 

In the shop, the ADD TO CART button is white so it is barely visible, which needs to change. 

If I could be pointed to where to change the numbers for the size, location, and color code for each button, I can figure out the rest. 

My website is: https://perfectexo.com

Please advise

Thanks!

Accepted Solutions (2)

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Kevin_Maek 

Please check the following screenshot. You have to correct your closing brackets. First, you have to add a single closing bracket and with the second arrow, you have to close 2 curly closing brackets.

missing-curly-bracket.jpg

 

After correcting this add the following code at the bottom in your theme.css file.

 .btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
    background-color: #000 !important;
    color: #fff !important;
  }
  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }
  .template-product button.btn.product-form__cart-submit {
    background-color: #000 !important;
    color: #fff !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Kevin_Maek 

Please add the following separate code for both buttons. I commented there for the first and 2nd shop now button.

/* For the first shop now button */
#shopify-section-hero-1  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

/* For the 2nd shop now button */
#shopify-section-1617403904121da62d .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

 

You can change colors as per your need.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 4 (4)

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Kevin_Maek 

Please check the following screenshot. You have to correct your closing brackets. First, you have to add a single closing bracket and with the second arrow, you have to close 2 curly closing brackets.

missing-curly-bracket.jpg

 

After correcting this add the following code at the bottom in your theme.css file.

 .btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
    background-color: #000 !important;
    color: #fff !important;
  }
  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }
  .template-product button.btn.product-form__cart-submit {
    background-color: #000 !important;
    color: #fff !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kevin_Maek
Excursionist
14 0 6

Thanks, exactly what I needed. 

Worked like a charm. 

If possible, can you also provide a way to isolate the changes? 

For example, when I change 

 .btn.hero__btn{

It applies to both of my Hero banner buttons (I have 2 hero banner sections for my homepage, and I want to customize each button separately) 

Is that possible to do? 

 

Thanks again!

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Kevin_Maek 

Please add the following separate code for both buttons. I commented there for the first and 2nd shop now button.

/* For the first shop now button */
#shopify-section-hero-1  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

/* For the 2nd shop now button */
#shopify-section-1617403904121da62d .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

 

You can change colors as per your need.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kevin_Maek
Excursionist
14 0 6

Thanks! Worked perfectly after I deleted the initial hero button coding. You're a lifesaver!