How Do I Add A Visually Stunning Mega Menu With Custom Images On Shopify's Dawn Theme In Just A Few Simple Steps ?
Introduction : In the world of e-commerce, providing a seamless and visually appealing navigation experience is key to keeping visitors engaged and encouraging them to explore your store further.
One effective way to achieve this is by incorporating images into your navigation menus, particularly in mega menus. Mega menus are expansive dropdown menus that display multiple options and subcategories, making it easier for users to find what they're looking for.
The instructions below can be used to add images to your navigation menus ( mega menu) for Shopify default dawn theme.
Step 1 : 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
Step 2 :Add Image Collection Metafields
You define a new metafield specifically for images.
You can then upload an image directly from your computer or provide a URL to an image hosted elsewhere.
Step 3 : Add images to the mega menu :
1st :- 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
},
2nd :- Create new 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 {
max-width: 100%; /* Full width of the column */
height: auto;
border-radius: 10px; /* Adjust the radius value as needed (ex: 10px for
rounded corners, 50% makes the image a circle) */
/* Additional styles if needed */
}
.mega-menu__column {
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
text-align: center;
/* Additional styles if needed */
} .mega-menu__list.megamenu-with-image {
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(calc((100% - (5 * 4rem)) / 6),
((100% - (5 * 4rem)) / 6)));
} .mega-menu__link.hide-title {
display: none;
}
.menu-backdrop {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
z-index: 3; /* Ensure it's above other content but below the menu */
} < /style>
{ % if megamenu_backdrop_toggle %}
< style>
#menu-backdrop {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Semi-transparent black */
z-index: 3;
/* Ensure this is below the mega menu's z-index */
}
< /style>
< script>
document.addEventListener('DOMContentLoaded', function () {
const menuBackdrop = document.getElementById('menu-backdrop');
// Select all mega menu details elements by class
document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
megaMenu.addEventListener('toggle', function () {
// Check if any mega menu is open
const isAnyMenuOpen = [...document.querySelectorAll('.mega-
menu')].some(menu => menu.hasAttribute('open'));
// Show or hide the overlay based on if any menu is open
menuBackdrop.style.display = isAnyMenuOpen ? 'block' : 'none';
});
});
// Add event listener to the overlay to close all menus when clicked
menuBackdrop.addEventListener('click', function () {
document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
megaMenu.removeAttribute('open');
});
menuBackdrop.style.display = 'none';
});
});
< /script>
{ % endif %}
3rd :- 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 'megamanu-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 %}
Conclusion :
Creating a captivating header image for your Shopify store featuring Mega Manu can significantly enhance its visual appeal and draw in potential customers. With Mega Manu as the focal point, your header can convey a sense of excitement and nostalgia, appealing to fans of the iconic character. By incorporating vibrant colours, dynamic imagery, and clear branding, you can effectively communicate the essence of your shop and encourage visitors to explore further. Ultimately, a well-designed header image featuring Mega Manu can leave a lasting impression and contribute to the overall success of your Shopify store.
Comments