How can I create a hover effect for these specific icons?

Shopify Discussion

Topic summary

A Shopify store owner wants to add hover effects to three header icons: Account, Wishlist, and Cart. Specifically, they want text labels to appear when users hover over each icon.

Proposed Solutions:

  • Add custom CSS to the theme’s liquid files (theme.liquid or header section)
  • Use CSS pseudo-elements (::before or ::after) to display text on hover
  • Alternatively, unhide existing text elements in the HTML if they already exist

Technical Approach:
The solution involves customizing the theme code by locating the icon elements in the theme files and applying CSS hover states. One responder suggests using pseudo-elements with appropriate styling and layout adjustments.

Status: The discussion remains open with technical guidance provided but no confirmed implementation. The store owner has not indicated whether they successfully applied the solution or require further assistance.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want hove effect for those icons

Account

Wishlist

Cart

Screenshot 2024-01-01 124236.png
Screenshot 2024-01-01 124236.png470×193 4.46 KB

My Store

https://lacasa.co.at/

2

Hi @Abdallahsherif ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about Want To Make Text Hover For This Icons, let’s try this solution:
Online Store ->Theme ->Edit code → theme.liquid


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly
3

Thanks for you @PageFly-Theodor

I want when put my mouse on Account Icon It hovers me Text “Account”

Cart icon hover me Text “Cart”

Wishlist icon hover me Text “Wishlist”

4

If you want that, you have to customize the theme or use HTML/liquid element

5

you can do it ?

6

You can find the code on the internet and add it to theme.liquid

7

@Abdallahsherif Similar to above but you either need to unhide any existing text that may exist in the html, or use a psuedo element and do all the styling that will need which includes adjusting how it’s layout.

i.e.


If you need this customization fully implemented then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.