Change button color on product page and cart

Solved

Change button color on product page and cart

Etune
Tourist
11 0 1

Hello, I need help to change the color on my buttons on my product page to color #007744, as well as the space behind the number for choosing quantity, (kvantitet). See below url for example 
https://etune.se/products/bla-ljus-glasogon-gula

and the shopping cart; https://etune.se/cart
which also have white space behind where you select quantity that i wish to change to color #007744

 

So thankful for any kind of help!

Kindest regards
David

Accepted Solution (1)

SteveC_Help
Shopify Partner
11 2 3

This is an accepted solution.

Hi David,

 

Based on the information provided and from what I understand your problem is, I think I can help. Please note, I am not a developer. First I would suggest adjusting your colors in the theme settings.

 

If that does not work, you can add custom CSS to both the product page template and cart template.

 

Product Page Template:

Product Page.png

 

1. Navigate to the product page template and add this code to the custom CSS

 

.quantity {
    background-color: #007744;
}

 

*Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page.

 

2. Navigate to the product page template and add this code to the custom CSS

 

.product-form__submit {
    background-color: #007744;
}

 

*Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page.

 

Cart Page Template:

Cart.png

1. Navigate to the cart page template and add this code to the custom CSS

 

quantity-popover, .quantity {
    background: #007744;
}

 

 *Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page. There may be a crossover of code, however, if you placed the quantity selector code from the product page in the theme settings custom CSS.

 

Hopefully, that is helpful or at least a starting point. Best of luck!

View solution in original post

Replies 3 (3)

SteveC_Help
Shopify Partner
11 2 3

This is an accepted solution.

Hi David,

 

Based on the information provided and from what I understand your problem is, I think I can help. Please note, I am not a developer. First I would suggest adjusting your colors in the theme settings.

 

If that does not work, you can add custom CSS to both the product page template and cart template.

 

Product Page Template:

Product Page.png

 

1. Navigate to the product page template and add this code to the custom CSS

 

.quantity {
    background-color: #007744;
}

 

*Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page.

 

2. Navigate to the product page template and add this code to the custom CSS

 

.product-form__submit {
    background-color: #007744;
}

 

*Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page.

 

Cart Page Template:

Cart.png

1. Navigate to the cart page template and add this code to the custom CSS

 

quantity-popover, .quantity {
    background: #007744;
}

 

 *Alternatively, you can add this code to the Custom CSS in the theme settings. This change will apply to the whole theme rather than the individual page. There may be a crossover of code, however, if you placed the quantity selector code from the product page in the theme settings custom CSS.

 

Hopefully, that is helpful or at least a starting point. Best of luck!

Etune
Tourist
11 0 1

Wow, thank you Steve, this worked like magic, I can't thank you enough. I wish you the best of weekends, you have earned it!

Good cheers
David

SteveC_Help
Shopify Partner
11 2 3

Happy to help! Enjoy your weekend as well. Cheers.