Solved

Is changing individual button colours possible on Shopify?

shaunsnaith
Tourist
56 0 1

Hello everyone, we are trying to change the colour of our 'add to basket' buttons but the only thing I can change is whole colour theme.  We'd like to try an orange 'add to basket' button to make it more prominent but we don't want the rest of the site such as menus and links etc. to be orange, we'd like that to stay as the theme colour.  Is this possible?  the web address is www.advancedacoustics-uk.com

We want to try F78E28 as the button colour and DF7004 as the hover colour.  Can anyone help with this please?

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @shaunsnaith 

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

.btn.auto-width.add-to-cart.addtocart{
	background: #F78E28 !important;
}
.btn.auto-width.add-to-cart.addtocart:hover{
	background: #DF7004 ;
}

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @shaunsnaith 

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

.btn.add-to-cart.addtocart{
	border: transparent;
}
.product-variants:hover .btn.auto-width.add-to-cart.addtocart{
	background: #048204 !important;
	}

 

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12280 2546 3694

@shaunsnaith 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.customer-links ul li.cart-info a, .customer-links ul li.cart-info span.icon-cart{
color: #F78E28 !important;
}

.customer-links ul li.cart-info a:hover{
color: #DF7004 !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
shaunsnaith
Tourist
56 0 1

OK, I have done that but it has changed the cart colours not the add to basket buttons:

https://prnt.sc/1gjotxn

It is this button I'd like to change if possible;

https://prnt.sc/1gjpmn5

 

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @shaunsnaith 

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

.btn.auto-width.add-to-cart.addtocart{
	background: #F78E28 !important;
}
.btn.auto-width.add-to-cart.addtocart:hover{
	background: #DF7004 ;
}

 

shaunsnaith
Tourist
56 0 1

Thank you @Kinjaldavra that's worked but it stays the same colour when you hover over it.  Also is it possible to remove the border?

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @shaunsnaith 

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

.btn.add-to-cart.addtocart{
	border: transparent;
}
.product-variants:hover .btn.auto-width.add-to-cart.addtocart{
	background: #048204 !important;
	}

 

shaunsnaith
Tourist
56 0 1

Do I paste that as well as the previous code or instead of the previous code?

shaunsnaith
Tourist
56 0 1

Apologies that I'm resurrecting this post again but we have now upgraded to the avenue 2.0 and we want to do the same thing as above but having problem with the code.  Just to recap we want the learn more and add to cart buttons to be orange, not theme blue.   We don't want the rest of the theme turning orange just to those two buttons.  I understand I have to do it in assets - styles.css but he code in there looks completely different to before.

Can anyone help with the code?

Thanks in advance.

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

.customer-links ul li.cart-info a, .customer-links ul li.cart-info span.icon-cart{
color: #F78E28 !important;
}
.customer-links ul li.cart-info a:hover{
color: #DF7004 !important;
}

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing