Why is my add to cart button color not changing to red?

Solved

Why is my add to cart button color not changing to red?

Justin2003
Tourist
9 0 5

I successfully changed the color of my add to cart button a long time ago to green by using the code: 


.btn--add-to-cart {
background: green
border: none
color: white
}

 

But when I try to put a different color in the background (red), it is still stuck on green. I want it to be red.

 

 

Accepted Solution (1)
Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Here the problem (section-main-product.css, line 1597):

 

2.PNG

 

The current code in your css file prevents any changes you make from the base.css due to the '!important' attribute. Please delete it and add something like this for example:

 

 

.product-form__buttons .product-form__submit {
    color: #fff;
    background: darkblue;
}

 

Result:

1.PNG 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 6 (6)

Spac-es
Shopify Partner
406 119 153
.btn--add-to-cart {
    background: red !important;
    border: none;
    color: white;
}
Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Justin2003
Tourist
9 0 5

Hi Space-Es, thanks for your reply. I have added this code, replacing my current one, but the add to cart button is still green. I think my store/theme may be glitched in some way in terms of the coding. Could there be another possible solution to this?

Spac-es
Shopify Partner
406 119 153

The problem is probably the class name (.btn--add-to-cart). Can you give me the link to your store and tell me which button exactly you want to change? This would help me a lot in determining which class needs to be modified.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Justin2003
Tourist
9 0 5

My store is veraquil.com 

The button I want to change is the add to cart button when you go on any product page. 

Thanks 

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Here the problem (section-main-product.css, line 1597):

 

2.PNG

 

The current code in your css file prevents any changes you make from the base.css due to the '!important' attribute. Please delete it and add something like this for example:

 

 

.product-form__buttons .product-form__submit {
    color: #fff;
    background: darkblue;
}

 

Result:

1.PNG 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Justin2003
Tourist
9 0 5

Thank you so much, it worked! Cheers.