How to Create Hoverable Dropdown Menus in Shopify Dawn Theme

By default, Shopify's Dawn theme requires customers to click on menu items to reveal dropdown options. While this is functional, many store owners prefer a hoverable dropdown experience to improve navigation flow and user experience.

In this tutorial, I will walk you through how to implement a hover-to-open navigation menu in the Dawn theme. The outcome will be a seamless dropdown that activates when your mouse hovers over the menu item, rather than requiring a click.

Prerequisites: Backup Your Theme

Before making any changes to your site's code, it is crucial to create a backup. This ensures that if any errors occur, you can easily revert to a working version of your store.

1. Log in to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Click Actions on your current theme.
4. Select Duplicate.

Once you have your backup secured, follow the steps below.

Step 1: Open the Code Editor

To add the hover functionality, we need to edit a specific Liquid file.

1. Go to Online Store > Themes.
2. Click Actions > Edit code.

Step 2: Locate the Header Section

We need to find the file that controls the header navigation.

1. In the file directory sidebar, scroll down to the Sections folder.
2. Search for or locate the file named header.liquid.
3. Open the file.

Step 3: Insert the Hover Script

We need to add a snippet of JavaScript that targets the menu items and changes the behavior from "click" to "mouseover."

1. Scroll down to approximately line 500 in header.liquid.
2. Look for the line containing render 'cart-notification'.
3. Create some empty space right above that line.
4. Copy and paste the following code snippet into that space:

<script>
  let items = document.querySelectorAll(".header__inline-menu details");
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
      item.addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    });
  });
</script>

How This Code Works

• Selection: The script grabs all menu items that contain dropdowns (specifically targeting the <details> tag used in Dawn).
• Event Listener: It adds a mouseover event. When your mouse hovers over the item, the script forces the menu to open.
• Clean Up: It ensures the menu closes when your mouse leaves the area.

Step 4: Save and Test

1. Click the Save button in the top right corner of the editor.
2. Navigate to your live storefront.
3. Refresh the page.

Hover over your menu items. You should now see the dropdowns appear automatically without clicking.

Conclusion

That's it! You have successfully converted your Dawn theme navigation from a click-based interaction to a hover-based interaction. This simple change can make your store feel more responsive and easier to navigate for desktop users.

If you found this tutorial helpful, consider checking out more custom coding tutorials for Shopify to further optimize your store.