Solved

Changing Color of Add to cart button

maurant
Excursionist
31 0 13

Hi, I've tried to change the color of my add to cart button using solutions shared in other discussions but it never worked. I'm using a custom theme. Can someone take a look at my website and tell me what code I should use? 

Accepted Solutions (3)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

Thanks for it

do you like this 

KetanKumar_0-1610217141788.png

 

can you please share product section code so i will update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

Thanks for clear this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

button#AddToCart-product-template {
    background: #0AA9BD;
    color: #fff;
}
.shopify-payment-button__button {
    background: transparent !important;
    color: #0AA9BD !important;
    border-color: #0AA9BD !important;
}
.shopify-payment-button__button:hover {
    color: #fff !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

yes, please

.product-form__cart-submit {
    background: #0AA9BD !important;
    color: #fff !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11972

@maurant 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
31 0 13

my site url is: www.dogstrom.co

Similar theme to Venture theme

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

Thanks for it

do you like this 

KetanKumar_0-1610217141788.png

 

can you please share product section code so i will update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
31 0 13

Basically, I'd like you to swap the colors of the "Add to Cart" and the "Buy it now" button. Add to cart: #0AA9BD (button color) with white (text color). Buy it now: white (button color) with #0AA9BD (text color). 

How do I access the product section code once I get to theme >> edit code? 

Thanks for assisting me! 

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

Thanks for clear this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

button#AddToCart-product-template {
    background: #0AA9BD;
    color: #fff;
}
.shopify-payment-button__button {
    background: transparent !important;
    color: #0AA9BD !important;
    border-color: #0AA9BD !important;
}
.shopify-payment-button__button:hover {
    color: #fff !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
31 0 13

Amazing! This worked perfectly. However, the featured product on the home page still has the transparent ATC button...how do I change that color to match the other ATC buttons? 

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@maurant 

yes, please

.product-form__cart-submit {
    background: #0AA9BD !important;
    color: #fff !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
31 0 13

Amazing! This guy is an expert in shopify web development & coding. Appreciate your time 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@maurant 

Thanks for your compliment and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Fnoces
Visitor
1 0 1

hi, i'd like to know how can you help me change the background color of the add to cart button on the product page? It's only a pure line box now. 

 https://ohcharm.com/products/curtain-tiebacks

 

color code is: #000c69

 

Thank you 

KetanKumar
Shopify Partner
36839 3635 11972

@Fnoces 

i can see this 

KetanKumar_0-1611466037058.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Wendi
Visitor
2 0 0

Any change you could take a look at mine as well, I can't find a solution to change the button color?