Adding Dynamic Icon / Image Before Menu Title - Hover to Open

Adding Dynamic Icon / Image Before Menu Title - Hover to Open

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify 2.0 FREE themes

Shopify is a popular e-commerce platform that enables online merchants to create and manage their online stores easily. One of the ways to enhance the appearance and user experience of a Shopify store is by adding icons to the menu links. These icons can help to make the navigation more intuitive and visually appealing.

In addition, the hover to open function is added as a great way to enhance the user experience and make it easier for users to access the menu.

It's important to note that for optimal results, the image you choose to add should be in PNG format and have a transparent background. To see the best possible outcome, please refer to the image provided below.

Image properties


I manage to write a code that can add an image of choice before the menu title without disrupting the menu list. No need to use javascript, just HTML and CSS.

I added the hover to open function as well. 

You can check the demo store using the password "made4uo."

What you are buying:

  • Add an icon before the menu title in your header

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Online store > Themes > Actions > Edit code.

2. Open the Sections folder, and find the header.liquid. Inside the header liquid look for this piece of code "header__inline-menu." Use Ctrl + F to find inside the code editor. Replace the code with the code below. Please refer to image below on which code to delete. 

Code to delete

3. We need to add dynamic image, therefore we need a blocks for the image. Go all the way down to schema, and find the last "]." Replace the bracket with the code below. Please refer to the image below on which bracket to delete and replace. 

Replace last bracket

All you need to do is add your images, and change the settings in the header. Click the header, and you should see the  MENU ICON / IMAGE SETTINGS at the very bottom.

Add the image / icon using the block according to the position in the menu. Drag to reposition.

That's it (",)

Back to blog

Leave a comment