Customize add to cart button - Supply theme

Store Design
1

Hi,

I am trying to customize my add to cart button from my product page to have a different theme style and colour (e.g. Green background with white text) for both mobile and desktop version.

I have tried using a previous solution from 2017 by adding the below code in theme.scss.liquid, but it doesn’t work.

Any suggestions please?

#addToCart {
background-color: green;
border-radius: 10px;
width: 300px;
height: 60px;
font-size: 25px;
font-weight: bold;

}

Thanks,

Liviu

2

@liviu1 - please share your website URL, will check it and let you know the css

3

Sure, thank you!

https://cleopatrajewellery.co.uk/

4

@liviu1 - sorry for late reply, add this

button#addToCart-product-template {
    background-color: green;
    border-radius: 10px;    width: 300px;
    height: 60px;    font-size: 25px;
    font-weight: bold;    color: #fff;    border: 0;
}
1 Like
5

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

.grid .grid-item  form#addToCartForm-product-template  .payment-buttons .btn--add-to-cart{
	
   background-color: green !important;
    border-radius: 10px !important;
    width: 300px !important;
    height: 60px !important;
    font-size: 25px !important;
    font-weight: bold !important;
}
1 Like
6

Thank you!