Solved

Add to cart button stuck on green

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
300 89 114

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 

View solution in original post

Replies 6 (6)

Spac-es
Shopify Partner
300 89 114
.btn--add-to-cart {
    background: red !important;
    border: none;
    color: white;
}
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
300 89 114

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.

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
300 89 114

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 

Justin2003
Tourist
9 0 5

Thank you so much, it worked! Cheers.