Impulse - Add to Cart - Hover colour

Impulse - Add to Cart - Hover colour

meld78
Shopify Partner
57 0 11

I want to change the hover colour on the add to cart button and have the below code added to theme.css.liquid but it's not changing the hover color.

 

Screenshot below is showing the hover color (slight variation to regular add to cart button) 

 

can someone please assist?

 

Thank you

 

/* Custom styles for the "Add to Cart" button */
.btn.add-to-cart {
background-color: #cf6a00; /* Normal button color */
color: white; /* Normal text color */
border: none; /* Normal border */
padding: 10px 20px; /* Button padding */
text-align: center; /* Center text */
text-decoration: none; /* Remove underline */
display: inline-block; /* Inline-block display */
font-size: 16px; /* Font size */
margin: 4px 2px; /* Margin */
cursor: pointer; /* Pointer cursor */
transition: background-color 0.3s ease; /* Smooth transition */
}

.btn.add-to-cart:hover {
background-color: #5a553d; /* Hover button color */
color: #ffffff; /* Hover text color */
border: none; /* Hover border */
}

 

meld78_0-1718771432589.png

 

Replies 8 (8)

techlyser_web
Shopify Partner
1780 330 357

Hello @meld78 

Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
meld78
Shopify Partner
57 0 11
techlyser_web
Shopify Partner
1780 330 357

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.product-block button.btn.btn--full.add-to-cart:hover{
background: #5a553d !important;
color: #ffffff !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
meld78
Shopify Partner
57 0 11

amazing, that worked, thanks so much @techlyser_web ! Would you also be able to help me do the same for the checkout button?

techlyser_web
Shopify Partner
1780 330 357

techlyser_web_0-1718775774085.png

You can see that when you hover over the button the CSS property is being applied.

 

Was your question answered? Mark it as an Accepted Solution.

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
meld78
Shopify Partner
57 0 11

hm, strange, I'm using an incognito window and it's still showing me the other shade of orange

meld78_0-1718777141436.png

 

techlyser_web
Shopify Partner
1780 330 357

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
button.btn.cart__checkout.preOrderCheckout:hover{
background: #5a553d !important;
color: #ffffff !important;
}
</style>

Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

ZestardTech
Shopify Partner
5636 1030 1358

Hello There,

 

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

 

.btn.add-to-cart:hover {
background: #000 !important;
}

 

ZestardTech_0-1718773297661.png

 

 

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