Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Product button color

Solved
web-har-red
Excursionist
24 0 9

How to change the product page buttons' colour? "Add to cart" and "Buy it now"

https://thebirdsonglife.myshopify.com/products/oil-pulling-21-sachets

 

Screenshot 2022-03-29 at 3.17.18 PM.png

 

Accepted Solution (1)

Accepted Solutions
Niraj_singh
Shopify Partner
232 39 43

This is an accepted solution.

Hello @web-har-red 
please add this code for background color, hover color, border color 

/* for add to cart */
.quantity-submit-row__submit button{
background-color:#20dbbc !important;
border:1px solid #c7240a !important;
}


/* for buy it now */
.shopify-payment-button button{
background-color:#db205c !important;
border:1px solid #f4af29 !important;
}

 

/* for add to cart hover */
.quantity-submit-row__submit button:hover{
background-color:#c7240a !important;
}


/* for buy it now hover */
.shopify-payment-button button{
background-color:#f4af29 !important;
}

 

View solution in original post

Replies 5 (5)
Niraj_singh
Shopify Partner
232 39 43

Hello @web-har-red 

Please open styles.css under assets of your theme and paste the following code to the bottom of file(styles.css)

/* for add to cart */
.quantity-submit-row__submit button{
background-color:#20dbbc !important;
}


/* for buy it now */
.shopify-payment-button button{
background-color:#db205c !important;
}




web-har-red
Excursionist
24 0 9

How to change add to cart hover colour?

 

How to change the buy it now borders colour?

Niraj_singh
Shopify Partner
232 39 43

This is an accepted solution.

Hello @web-har-red 
please add this code for background color, hover color, border color 

/* for add to cart */
.quantity-submit-row__submit button{
background-color:#20dbbc !important;
border:1px solid #c7240a !important;
}


/* for buy it now */
.shopify-payment-button button{
background-color:#db205c !important;
border:1px solid #f4af29 !important;
}

 

/* for add to cart hover */
.quantity-submit-row__submit button:hover{
background-color:#c7240a !important;
}


/* for buy it now hover */
.shopify-payment-button button{
background-color:#f4af29 !important;
}

 

web-har-red
Excursionist
24 0 9

Screenshot 2022-03-29 at 3.54.02 PM.png

https://thebirdsonglife.myshopify.com/

how to increase the text width for this section?

Niraj_singh
Shopify Partner
232 39 43

Hello @web-har-red 
This is custom change and need to modify one of your section using on homepage which needs staff access of your store So i can fix it for you.