Hello,
How to make this menu with image on mobile menu?
This will require some code. Are you capable of coding ?
yes, but maybe you have the code off this?
To add images to your mobile menu in Shopify, follow these steps:
1. Add Images in the Navigation Menu
- Go to Shopify Admin > Online Store > Navigation.
- Edit your Main Menu or Mobile Menu.
- Add custom links and include image URLs (use a tool like Shopify Metafields if needed for image URLs).
2. Modify the Code for the Mobile Menu
- Go to Online Store > Themes > Actions > Edit Code.
- Find and open header.liquid or navigation.liquid (in the Snippets or Sections folder).
- Replace the existing mobile menu code with this:
{% if settings.mobile_menu == true %}
<ul class="mobile-menu-list">
{% for link in linklists.main-menu.links %}
<li class="menu-item">
<a href="{{ link.url }}" class="menu-link">
{% if link.metafields.menu_link_image %}
<img src="{{ link.metafields.menu_link_image }}" alt="{{ link.title }}" class="menu-item-image" />
{% endif %}
<span class="menu-item-text">{{ link.title }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
3. Style the Mobile Menu
Add this CSS to Assets > theme.scss.liquid:
/* Mobile Menu Styling */
.mobile-menu-list {
list-style: none;
padding: 0;
}
.menu-item {
display: flex;
align-items: center;
}
.menu-item-image {
max-width: 30px;
margin-right: 10px;
}
.menu-item-text {
font-size: 16px;
}
4. Save and Test
- Save the changes.
- Test your mobile menu to see the images next to the menu items.
This code will add images to the mobile navigation items. You can modify the image URLs and styles as needed.
OKey, thank you, but last question. if i have in menu like 6 pages like in my example.If I use 5 pages in menu, how do I assign separate pictures to each one? i understand that your code is for one menu item? ar not?
Good morning
Thank you for your valuable information.
Could you make me a video tutorial to illustrate all of this?
Thank you very much in advance.