Add the hover effect back on my custom cart icon and change color anytime

Store Design
, , ,

Topic summary

A user replaced their custom cart icon SVG but lost the hover effect and can’t change its color with transparent header settings.

Proposed Solution:

  • Locate the cart icon HTML code (typically an <a> tag with image/SVG)
  • Add CSS for hover effects using filter: brightness() for images or fill property for SVGs
  • Include transitions for smooth color changes
  • Add specific CSS rules for transparent headers (.header--transparent) and scrolled states (.header--scrolled)

Current Status:
User clarified they only replaced the SVG link in the icon-cart.svg asset file and is asking where to find the code to implement the suggested CSS changes. The issue remains unresolved with implementation details pending.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I changed my custom cart icon but the hover effect was gone and i also can’t change the color of it like the usual with my transparent header settings. Shop is https://hallie-td.myshopify.com/ pass is 123.

Screenshot 2025-06-09 154709.png
Screenshot 2025-06-09 154709.png1817×585 110 KB

2

Hi,

Hope this will work

  • Find your cart icon code , something like this:
Cart
  • Add CSS (for hover color)

Css example

/* Cart icon hover effect */
.custom-cart-icon img {
  transition: filter 0.3s ease, opacity 0.3s ease;
  filter: brightness(1); /* Normal look */
}

/* When mouse hovers over it */
.custom-cart-icon:hover img {
  filter: brightness(0.5); /* Darker on hover, or change as needed */
}

/* Optional: Color tint if using SVG with fill */
.custom-cart-icon svg {
  transition: fill 0.3s ease;
  fill: white; /* default color */
}

.custom-cart-icon:hover svg {
  fill: #ff6a00; /* change to any color you want on hover */
}
  • For transparent headers (common in Luxe theme), Add this snippet in same CSS file:
.header--transparent .custom-cart-icon svg {
  fill: white; /* Icon color on transparent background */
}

.header--scrolled .custom-cart-icon svg {
  fill: black; /* Icon color after scrolling */
}
3

where can i find the code? i just replaced the svg link in the icon-cart.svg asset