How to add hover effect to "Add To Cart" becoming Cart icon

Store Design

Topic summary

A Shopify store owner seeks help adding a hover effect where the “Add To Cart” button transforms into a cart icon when users hover over it.

Initial Problem:

  • User wants the button text to disappear and be replaced by a cart icon on hover
  • Provides before/after screenshots showing desired effect

Solution Provided:
A community member shares custom CSS code to be added to the theme.min.css file:

  • Uses CSS pseudo-elements (::before) with the ‘fontello’ icon font
  • Implements opacity and scale transforms for smooth transition
  • Hides button text on hover while displaying the icon

Follow-up Issues Resolved:

  • Initial code caused button blackout; fixed by adding font-family specification
  • User successfully changed icon from “Cart” to “Bag” by modifying the icon code
  • Applied same logic to “Featured Products” section with minor CSS selector adjustments

Status: Resolved successfully. The solution works across multiple sections of the store. One user notes theme.min.css may not be available in Dawn theme (potential compatibility consideration).

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
6

To help understand the solution, I just re-format it:

.paymentButtonsWrapper #AddToCart::before {
position: absolute;
font-family: ‘fontello’;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 12px;
content: ‘\e802’;
opacity: 0;
transform: scale(0);
transition: all 0.9s;
}

.paymentButtonsWrapper #AddToCart {
position: relative;
}

.paymentButtonsWrapper #AddToCart:hover::before {
opacity: 1;
transform: scale(1);
}

.paymentButtonsWrapper #AddToCart.add-to-cart–secondary:not(.disabled):hover span {
display: none;
}

1 Like