FROM CACHE - en_header

Changing button colours

Solved
shaunsnaith
Tourist
33 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)

Accepted Solutions
Kinjaldavra
Shopify Partner
2302 569 1408

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
Build your professional store with GemPage Page Builder

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1408

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
Build your professional store with GemPage Page Builder

View solution in original post

Replies 8 (8)
dmwwebartisan
Shopify Partner
11139 2393 3433

@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 | Click here GemPages The most powerful Shopify page builder.
shaunsnaith
Tourist
33 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

 

ZestardTech
Shopify Expert
3662 606 848

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
Kinjaldavra
Shopify Partner
2302 569 1408

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
Build your professional store with GemPage Page Builder
shaunsnaith
Tourist
33 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 569 1408

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
Build your professional store with GemPage Page Builder
shaunsnaith
Tourist
33 0 1

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

shaunsnaith
Tourist
33 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.