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.
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.
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.
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 (",)
Copied!