How do I go about changing the "Add to cart" button text, background, and border color?

Solved
Tourist
6 0 3

desire.PNGScreenshot 2current.PNGScreenshot 1

Hi, I have almost finished the completion of my store however when testing the site i found that the "Add to cart" button appeared grey almost making it look as if it were disabled (see Screenshot 1) I hovered over in order to click it and as i did the button lit up a tiny bit and functioned as expected yet I am concerned that this would deter an otherwise willing customer from making a purchase.

 

I would like to change the buttons appearance to something more along the lines of screenshot 2 but I can't seem to find a valid solution. I tried copying this code into my timber.scss.liquid I found on these forums:

 

button#AddToCart.btn {
Color: #FFFFFF;
background-color: #000000;
font-weight: bolder;
}

 

to no avail, would someone be kind enough to shed some light on this issue? I'm very much looking forward to getting my store up and running.

 

0 Likes
Shopify Partner
1838 170 528

Hello there!

 

You almost had it except that your CSS selector is wrong. Also careful what case you use when adding properties.

 

button#AddToCart {
  color: #fff;
  background-color: #000;
}

Hope this bit works out for you - not sure what theme you're using but since you mention timber.scss.liquid I am going to guess it's Minimal by Shopify.

 

Best wishes!

I turn coffee in to code - since 1998
2 Likes
Tourist
6 0 3

Thanks a lot for your help. I forgot to mention that my theme was Brooklyn hope that doesn't change anything. I'll try your code now, thanks again

0 Likes
Tourist
6 0 3

Unfortunately it didn't work but I also didn't get any kind of errors it just had no effect. I saved and used the Preview button to test this:

 

Capture7.PNG

0 Likes
Highlighted

Success.

Shopify Partner
36 7 34

 

Hi,

this is the selector for your theme. Try the code below out and let me know if it works.

 

 

button#AddToCart--product-template {
    Color: #FFFFFF;
    background-color: #000000;
    font-weight: bolder;
}

Thanks,

Ken.

 

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
2 Likes
Tourist
6 0 3

Thank you so much it works perfectly.

Marked as solution

2 Likes