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.
---
In this customization, we’re adding a hover effect to our navigation menus. This is a nice way to give your customers a more interactive experience and when paired with images can really help show off your store’s visuals.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Edit Theme Code
Add new setting in header.liquid schema
{
"type": "checkbox",
"id": "menu_hover",
"label": "Open menu with hover (dropdown and megamenu only)",
"default": false
},
Add hover effect to the mega menu code
Create new asset megamenu-hover.js
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('.header__inline-menu > ul > li');
let activeMenuItem = null;
menuItems.forEach((item, index) => {
const detailsElement = item.querySelector('details');
if (!detailsElement) {
return;
}
item.addEventListener('mouseenter', () => {
if (activeMenuItem && activeMenuItem !== item) {
const previousDetailsElement = activeMenuItem.querySelector('details');
if (previousDetailsElement) previousDetailsElement.removeAttribute('open');
}
detailsElement.setAttribute('open', true);
activeMenuItem = item;
});
item.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!item.matches(':hover')) {
detailsElement.removeAttribute('open');
if (activeMenuItem === item) activeMenuItem = null;
}
}, 500); // Adjust delay as needed
});
});
});
Add js file at end of header-mega-menu.liquid
{%- if section.settings.menu_hover -%}
<script src="{{ 'megamenu-hover.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
Add hover effect to the dropdown menu code
Create new asset header-dropdown-hover.js
document.addEventListener('DOMContentLoaded', function() {
let openMainMenu = null;
const handleMenuOpening = (detailsElement, isSubMenu = false) => {
if (!isSubMenu) {
if (openMainMenu && openMainMenu !== detailsElement) {
openMainMenu.removeAttribute('open');
}
detailsElement.setAttribute('open', '');
openMainMenu = detailsElement;
} else {
detailsElement.setAttribute('open', '');
}
};
const mainMenuDetails = document.querySelectorAll('.header__inline-menu > ul > li > header-menu > details');
mainMenuDetails.forEach(detailsElement => {
const summaryElement = detailsElement.querySelector('summary');
summaryElement.addEventListener('mouseenter', function() {
handleMenuOpening(detailsElement);
});
detailsElement.addEventListener('mouseleave', function() {
setTimeout(() => {
if (!detailsElement.matches(':hover')) {
detailsElement.removeAttribute('open');
if (openMainMenu === detailsElement) {
openMainMenu = null;
}
}
}, 1000); // Delay in ms
});
});
const submenuDetails = document.querySelectorAll('.header__submenu details');
submenuDetails.forEach(detailsElement => {
const summaryElement = detailsElement.querySelector('summary');
summaryElement.addEventListener('mouseenter', function(event) {
event.stopPropagation();
handleMenuOpening(detailsElement, true);
});
detailsElement.addEventListener('mouseleave', function() {
setTimeout(() => {
if (!detailsElement.matches(':hover')) {
detailsElement.removeAttribute('open');
}
}, 1000); // Adjust delay as needed
});
});
});
Add js file at end of header-dropdown-menu.liquid
{%- if section.settings.menu_hover -%}
<script src="{{ 'header-dropdown-hover.js' | asset_url }}" defer="defer"></script>
{%- endif -%}