How to Create a Hoverable Dropdown Menu in Shopify Dawn Theme

By default, the Shopify Dawn theme (and many themes based on it) requires customers to click on a menu item to reveal the dropdown sub-menus. However, many store owners prefer a hover effect for better desktop usability.

In this tutorial, I will walk you through how to implement a hoverable dropdown menu for your store's header. We will use the Dawn theme as a base, but this code works for most free themes available on the Shopify Theme Store.

Prerequisites

Before editing your code, it is highly recommended to create a backup.

1. Go to your Shopify Admin > Online Store.
2. Either verify your theme is integrated with GitHub, or click the three dots next to your current theme and select Duplicate.

This ensures you have a save point in case anything goes wrong.

Step 1: Create the JavaScript File

We need to create a new script file that handles the mouseover events.

1. In your Shopify Admin, go to Online Store > Themes.
2. Click the three dots on your active theme and select Edit code.
3. In the file directory on the left, collapse the folders and locate the Assets folder.
4. Click Add a new asset.
5. Select Create a blank file, ensure the extension is set to .js, and name the file menu-dropdown.
6. Click Done.

Once the file is created (menu-dropdown.js), copy and paste the following code into the file. This script identifies menu items and sets attributes to open them when the mouse rolls over them.

// menu-dropdown.js
const detailsElements = document.querySelectorAll('header details');

detailsElements.forEach(details => {
  details.addEventListener('mouseover', () => {
    details.setAttribute('open', true);
    details.querySelector('summary').setAttribute('aria-expanded', 'true');
  });

  details.addEventListener('mouseout', () => {
    details.removeAttribute('open');
    details.querySelector('summary').setAttribute('aria-expanded', 'false');
  });
});

Note: This script targets the <details> elements used in Dawn's header structure.

Step 2: Link the Script in the Header

Now that we have created the script, we need to load it within the theme's header section.

1. In the search bar at the top left of the code editor, type header.
2. Under the Sections folder, click on header.liquid.
3. Scroll down (or search) to find a suitable place to include the script. Usually, near the bottom of the file or near other script tags is fine.
4. Paste the following code snippet to link your new asset:

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

Step 3: Save and Test

1. Click Save on both menu-dropdown.js and header.liquid.
2. Click Preview store.

When you hover your mouse over the parent menu items in your navigation bar, the dropdowns should now open automatically without requiring a click.