Want personalized guidance adding this to your store?
Check out our Insiders community: https://www.skool.com/the-prompted
Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.
---
Your navigation menu is how your customers know where to find your products. It’s like the map to your store. And the menu options with the free Shopify themes like Dawn are actually pretty good, but there’s one thing they lack - and that’s the option to add photos.
In this customization, we’re adding images to our mega menus, drawer menus and dropdown menus.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Create image file metafields
Create new metafield
For any object (ex: product, collection, page, etc) that you want to assign a menu image, create a new metafield with the following properties:
- Name: Header Menu Image
- Namespace and key: custom.header_menu_image
- Type: File
Add images to the mega menu
Add settings in the schema of header.liquid
{
"type": "select",
"id": "mega_menu_images_toggle",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "featured",
"label": "Featured"
},
{
"value": "metafield",
"label": "Metafield"
}
],
"default": "none",
"label": "Mega menu collection image type"
},
{
"type": "checkbox",
"id": "mega_menu_images_title",
"label": "Hide the collection title (when mega menu images is active)",
"default": false
},
{
"type": "checkbox",
"id": "megamenu_backdrop_toggle",
"label": "Add a backdrop to darken rest of page when megamenu is open",
"default": true
},
Create new snippet file megamenu-image-custom.liquid
<ul class="mega-menu__list megamenu-with-image page-width">
{%- for childlink in link.links -%}
{% assign image_url = '' %}
{% if menu_images_toggle == 'featured' %}
{% if childlink.object.featured_image %}
{% assign image_url = childlink.object.featured_image | img_url: 'master' %}
{% endif %}
{% elsif menu_images_toggle == 'metafield' %}
{% assign image_url = childlink.object.metafields.custom.header_menu_image | img_url: 'master' %}
{% endif %}
<li>
<div class="mega-menu__column">
{% if image_url != blank %}
<a href="{{ childlink.url }}">
<img src="{{ image_url }}" alt="{{ childlink.title | escape }}" class="mega-menu__image">
</a>
{% endif %}
<a id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}" href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %} {% if menu_titles_toggle %}hide-title{% endif %}" {% if childlink.current %} aria-current="page" {% endif %}>
{{ childlink.title | escape }}
</a>
</div>
</li>
{%- endfor -%}
</ul>
<style>
.mega-menu__image {
width: 100%;
border-radius: 10px; /* Adjust the radius value as needed (ex: 10px for rounded corners, 0px for square corners, 50% makes the image a circle) */
object-fit: cover;
aspect-ratio: 1 / 1;
}
.mega-menu__column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.mega-menu__list.megamenu-with-image {
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(calc((100% - (5 * 4rem)) / 6), calc((100% - (5 * 4rem)) / 6)));
}
.mega-menu__link.hide-title {
display: none;
}
.menu-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
</style>
{% if megamenu_backdrop_toggle %}
<style>
#menu-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 3;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuBackdrop = document.getElementById('menu-backdrop');
document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
megaMenu.addEventListener('toggle', function () {
const isAnyMenuOpen = [...document.querySelectorAll('.mega-menu')].some(menu => menu.hasAttribute('open'));
menuBackdrop.style.display = isAnyMenuOpen ? 'block' : 'none';
});
});
menuBackdrop.addEventListener('click', function () {
document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
megaMenu.removeAttribute('open');
});
menuBackdrop.style.display = 'none';
});
});
</script>
{% endif %}
Add if-else statement in header-mega-menu.liquid
{% if section.settings.menu_type_desktop == 'mega' and section.settings.mega_menu_images_toggle != 'none' %}
{% render 'megamenu-image-custom',
link:link,
menu_images_toggle: section.settings.mega_menu_images_toggle,
menu_titles_toggle: section.settings.mega_menu_images_title,
megamenu_backdrop_toggle: section.settings.megamenu_backdrop_toggle
%}
{% else %}
.... existing code.....
{% endif %}
Edit the theme.liquid file
<div id="menu-backdrop"></div>
Add images to the drawer menu and dropdown menu
Add settings in the schema of header.liquid
{
"type": "select",
"id": "dropdown_menu_images_toggle",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "featured",
"label": "Featured"
},
{
"value": "metafield",
"label": "Metafield"
}
],
"default": "none",
"label": "Dropdown menu collection image type"
},
{
"type": "range",
"id": "menu_dropdown_width",
"label": "Dropdown Menu Width",
"default": 25,
"min": 20,
"max": 40,
"step": 1
},
{
"type": "select",
"id": "drawer_menu_images_toggle",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "featured",
"label": "Featured"
},
{
"value": "metafield",
"label": "Metafield"
}
],
"default": "none",
"label": "Drawer menu collection image type"
},
{
"type": "range",
"id": "menu_images_size",
"label": "Menu Image Size",
"info": "Applies to drawer and dropdown menu",
"default": 60,
"min": 50,
"max": 100,
"step": 1,
"unit": "px"
},
{
"type": "checkbox",
"id": "menu_images_border_toggle",
"label": "Enable Menu Border",
"info": "Use with Dropdown and Drawer menu with images",
"default": false
},
{
"type": "color",
"id": "menu_images_border_color",
"label": "Menu Images Border Color",
"default": "#eaeaea"
},
Create new snippet file menu-image-custom.liquid
{% if menu_images_toggle != 'none' %}
{% assign menu_image_url = '' %}
{% if menu_images_toggle == 'featured' %}
{% if link.object.featured_image %}
{% assign menu_image_url = link.object.featured_image | image_url: width: menu_images_size, height: menu_images_size %}
<img src="{{ menu_image_url }}" alt="{{ link.title | escape }}" class="header-menu-image">
{% endif %}
{% elsif menu_images_toggle == 'metafield' %}
{% if link.object.metafields.custom.header_menu_image %}
{% assign menu_image_url = link.object.metafields.custom.header_menu_image | image_url: width: menu_images_size, height: menu_images_size %}
<img src="{{ menu_image_url }}" alt="{{ link.title | escape }}" class="header-menu-image">
{% endif %}
{% endif %}
{% endif %}
<style>
{% if menu_images_toggle and menu_images_border_toggle %}
.menu-drawer__menu {
list-style: none;
padding-left: 0; /* Remove default padding */
}
.menu-drawer__menu li {
border-top: 1px solid {{ menu_images_border_color }};
}
.menu-drawer__menu li:last-child {
border-bottom: 1px solid {{ menu_images_border_color }};
}
.header__submenu > li:not(:last-child) {
border-bottom: 1px solid {{ menu_images_border_color }};
}
.header__submenu.header__submenu > li:not(:last-child) {
border-bottom: 1px solid {{ menu_images_border_color }};
}
.header__submenu.list-menu {
padding: 0;
}
.header__submenu.header__submenu {
margin: 0;
}
{% endif %}
.header-menu-image {
margin-left: auto; /* This ensures that the link (image) is pushed to the far right */
}
.list-menu--disclosure.list-menu--images {
width: {{ menu_dropdown_width }}rem;
}
</style>
Add code in header-drawer.liquid
Change link: link to link: childlink or link: grandchildlink as required
{% render 'menu-image-custom',
link:link,
menu_images_toggle: section.settings.drawer_menu_images_toggle,
menu_images_size: section.settings.menu_images_size,
menu_images_border_toggle: section.settings.menu_images_border_toggle,
menu_images_border_color: section.settings.menu_images_border_color
%}
Add code in header-dropdown-menu.liquid
Change link: link to link: childlink or link: grandchildlink as required
{% render 'menu-image-custom',
link:childlink,
menu_images_toggle: section.settings.dropdown_menu_images_toggle,
menu_dropdown_width: section.settings.menu_dropdown_width,
menu_images_size: section.settings.menu_images_size,
menu_images_border_toggle: section.settings.menu_images_border_toggle,
menu_images_border_color: section.settings.menu_images_border_color
%}
add class list-menu--images to
<ul
id="HeaderMenu-MenuList-{{ forloop.index }}"
class="header__submenu list-menu list-menu--disclosure list-menu--images color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
role="list"
tabindex="-1"
>