Changing button colours

Solved
shaunsnaith
Tourist
28 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?

dmwwebartisan
Shopify Partner
8570 2008 2711

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
shaunsnaith
Tourist
28 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

 

0 Likes
Pallavi
Shopify Expert
2367 396 513

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
0 Likes
Natztech
Shopify Partner
1901 493 1175

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
shaunsnaith
Tourist
28 0 1

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

0 Likes
Natztech
Shopify Partner
1901 493 1175

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
shaunsnaith
Tourist
28 0 1

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

0 Likes