Impulse - Add to Cart - Hover colour

Technical Q&A

Topic summary

Main issue: Change the hover color for the “Add to Cart” button in the Impulse Shopify theme. Initial CSS in theme.css.liquid didn’t affect hover state.

Actions taken:

  • Store URL shared for inspection (outbacklinen.co).
  • Two solutions suggested:
    • Add .btn.add-to-cart:hover with a new background and !important in Asset > theme.css.
    • Add a more specific selector in theme.liquid (inside a before ): .product-block button.btn.btn–full.add-to-cart:hover with background and color plus !important.

Outcome:

  • OP confirmed the Add to Cart hover fix worked.
  • OP requested similar change for the Checkout button.

Follow-up:

  • Helper showed via devtools that hover CSS applies (screenshot).
  • OP still sees a different orange shade even in incognito (screenshot).
  • Additional CSS provided: button.btn.cart__checkout.preOrderCheckout:hover with background and color plus !important, to be placed before .

Notes:

  • CSS hover is the mouse-over state; selector specificity and !important are used to override theme defaults.
  • Images/screenshots are central to verifying applied styles.

Status:

  • Add to Cart hover resolved.
  • Checkout hover fix proposed; confirmation pending (possible caching or specificity issues remain).
Summarized with AI on December 26. AI used: gpt-5.
1

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
meld78_0-1718771432589.png1920×1080 379 KB

1 Like
2

Hello @meld78

Can you share store URL?

3

sure can @niraj_patel https://www.outbacklinen.co/

4

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
ZestardTech_0-1718773297661.png1881×793 202 KB

5

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 on theme.liquid

.product-block button.btn.btn--full.add-to-cart:hover{ background: #5a553d !important; color: #ffffff !important; }

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

1 Like
6

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

7

techlyser_web_0-1718775774085.png
techlyser_web_0-1718775774085.png406×399 12.4 KB

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.

8

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

meld78_0-1718777141436.png
meld78_0-1718777141436.png1920×1080 272 KB

9

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 on theme.liquid

button.btn.cart__checkout.preOrderCheckout:hover{ background: #5a553d !important; color: #ffffff !important; }

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