Added a custom cart icon to Crave theme, zoom on hover no longer works

Store Design

Topic summary

Issue: In the Shopify Crave theme, a custom cart icon in the header did not “zoom on hover” like the search, account, and favorites icons. The desired behavior is a hover-based enlargement effect consistent across all navbar icons.

Fix: Add a code snippet to theme.liquid above the closing tag. Steps: Online Store > Themes > More Actions > Edit code; open theme.liquid and paste the snippet before .

Outcome: The change restored the zoom-on-hover effect for the custom cart icon, matching the other icons. The user confirmed the fix worked perfectly.

Notes:

  • The exact code snippet content is not shown in the thread; it appears to involve CSS/JS injected in the head to enable hover scaling.
  • theme.liquid is the main layout file that defines site-wide head elements and assets.

Status: Resolved. No remaining questions or disagreements. The solution is implemented and functioning as intended.

Summarized with AI on January 8. AI used: gpt-5.
1

I have four icons in my navigation bar. Two are the standard Crave search and account icons, one was installed with an app for favorites, and the last one is a shopping cart I replaced the standard Crave shopping bag with. All but the custom cart icon allow for zoom on hover. How can I get this icon to behave the same as the other three icons?

Thank you

2

Hi @Mugbarista

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
3

Thank you so much this worked perfectly!

4

Glad that i can help. Let me know if you have any questions