Changing button colours

[shaunsnaith]

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?

[Kinjaldavra · 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 ;
}

[dmwwebartisan]

@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!

[shaunsnaith]

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 · 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]

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 · 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]

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

[shaunsnaith]

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]

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;
}