How to Open Menu on Mouse Hover in Shopify Header Menu

By Kanchan Kateriya | 7/9/2024

Want to make your Shopify store's menu open when you hover over it? Follow these easy steps to add this feature.

Step 1: Access Theme Code

Log in to Shopify Admin: Go to Online Store > Themes. Find the Dawn theme and click on "Actions" > "Edit code".

Step 2: Create a New JavaScript File

Create a New File: In the theme editor, look at the left sidebar and click on "Assets". Click on "Add a new asset". Select "Create a blank file" and name it custom-menu.js. Click "Add asset".

Step 3: Add JavaScript Code to the New File

Add Code: Open the newly created custom-menu.js file under "Assets". Add the following JavaScript code:

document.addEventListener('DOMContentLoaded', function() {
    let menuItems = document

    for (const menuItem of menuItems) {
        menuItem.addEventListener("mouseover", () => {
            menuItem.setAttribute("open", true);
            menuItem.addEventListener("mouseleave", () => {

            menuItem.querySelector("ul").addEventListener("mouseleave", () => {

Step 4: Reference the JavaScript File in the Header

Update header.liquid: In the theme editor, open the header.liquid file. Scroll the file and add the following line where all Rreference files are added:

<script src="{{ 'custom-menu.js' | asset_url }}" defer="defer"></script>

Step 5: Save Changes and Test

Save and Preview: Save your changes in the theme editor. Preview your Shopify store to ensure the hover effect works. Test on different devices to ensure the menu functions correctly across various screen sizes.


By following these steps, you can make your Shopify Dawn theme menu open on hover. This small change can improve usability and make it easier for customers to navigate your store. If you need any help, feel free to ask!

Video Tutorial

Here's a video tutorial for how to make the Shopify Dawn theme menu open on hover. Check out the video:

How to Create a Mega Menu in Shopify

You can also check out this guide of How to Create a Mega Menu in Shopify.

Copyright © 2024 Scale-up print. All Rights Reserved.