Change Add to Cart color (Narrative Theme)

Solved
Highlighted
Tourist
3 0 0

Hello,

 

i want to change the color of the add to cart button on my product page (Narrative Theme). Can you help me out ?

0 Likes
Highlighted

Hello @Alex741,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-product-template button.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
    color: #000;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
3 0 0

This code changed the text color but not the button color. Am i doing something wrong?

0 Likes
Highlighted

This is an accepted solution.

@Alex741,

For button color please add below css

#shopify-section-product-template button.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
   background-color: red;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
3 0 0

You are awesome! Thank you very much

0 Likes
Highlighted
Excursionist
24 0 3

Hi, I have the same issue and have tried already the following at the bottom of theme.scss.liquid (narrative) but nothing worked so far. I would like the Add to Cart button on product page to be #174F00.

 

 

.product-single__add-to-cart button.shopify-payment-button__button {
background-color: #174F00!important;
color: #fff!important;
}


.shopify-section-product-template button.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
background-color: #174F00;
}


.product-form__cart-submit{
color: #174F00 !important;
}

.product-form__cart-submit:hover{
color: #174F00 !important;
}

.purchase-details__buttons .action_button.action_button--secondary {
background-color: #174F00!important;
border: 1px solid #174F00!important;
color: #fff !important;
}

@media only screen and (min-width: 799px){
.purchase-details__buttons .action_button.action_button--secondary:hover {
background-color: #174F00!important;
}
}


.product-single__box .c-btn--primary {
background: #174F00;
}
.product-single__box .c-btn--primary:hover,
.product-single__box .c-btn--primary:focus {
background: #174F00;
}

 

 

 

Any ideas anyone?

0 Likes
Highlighted

Hello Constantinos,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
24 0 3

Hi, I used the following code and managed to change the colors. 

 

.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
color: #174F00;
}
.shopify-payment-button .shopify-payment-button__button::after {
outline: 2px solid #174F00 !important;
}
.shopify-payment-button .shopify-payment-button__button {
background-color: #174F00;
border-color: #174F00;
}
.product-form .btn.btn--to-secondary {
background-color: #fff;
border: 2px solid #174F00;
outline: 2px solid #174F00;
color: #174F00;
}
.product-form .btn.btn--to-secondary::after {
outline: 2px solid #174F00;
}
 
 
.template-cart button[name='checkout'] {
        background:#174F00;
border: 0px solid #174F00 !important;
outline: 0px solid #174F00 !important;
  border-color: #174F00 !important;
}
 
However, the Checkout button on the Shopping Cart page has a dark red border which I would like to remove or make it #174F00 but the code above doesn't do that.
border.JPG
Also, by applying these colors the mouse over effect is gone, is it easy to have it back?
 
Any help would be very much appreciated, I'll be sending you the site url via email and you can post your reply here.
 
Thank you so much in advance!
 
 
0 Likes