How to Add Hover Drop-Down Menus to the Shopify Sense Theme

By default, the Shopify Sense theme requires users to click on main menu items to reveal drop-down sub-menus. While functional, many store owners prefer a smoother user experience where menus expand simply by hovering over them.

In this tutorial, I will walk you through how to convert the default click-to-open behavior into a hover drop-down. We will also implement a toggle in the Shopify Customizer so you can easily enable or disable this feature without touching the code again.

Prerequisites

Before we begin editing code, it is crucial to create a backup of your live theme.

1. Navigate to Online Store > Themes.
2. Click the Actions (three dots) button on your current theme.
3. Select Duplicate.

This creates a save point. If anything goes wrong, you can easily revert your site to this version.

Step 1: Locate the Header File

1. From your Shopify Admin, go to Online Store > Themes.
2. Click Actions > Edit Code.
3. In the file search bar, type header.
4. Open the header.liquid file located in the Sections folder.

Step 2: Implement the JavaScript Logic

We need to add a script that listens for mouse movements. When a user hovers over a menu item, the script will force the open attribute to true.

1. Scroll to the bottom of header.liquid until you see the {% schema %} tag.
2. Click right before the schema tag starts.
3. Paste the following code logic.

Note: We are wrapping this in a Liquid condition so we can toggle it later in the settings.

{% if section.settings.enable_hover %}
  <script>
    let items = document.querySelectorAll(".header__inline-menu details");
    items.forEach(item => {
      item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
        item.querySelector("summary").setAttribute("aria-expanded", "true");
      });
      item.addEventListener("mouseout", () => {
        item.removeAttribute("open");
        item.querySelector("summary").setAttribute("aria-expanded", "false");
      });
    });
  </script>
{% endif %}

This script grabs all header items and sets event listeners for mouseover (to open) and mouseout (to close).

Step 3: Add the Toggle Setting to Schema

Now, let's add the checkbox to the Shopify Customizer so you can control this feature.

1. Inside the header.liquid file, look inside the {% schema %} section.
2. Search for enable_sticky_header (or sticky).
3. Add the following JSON object immediately after the sticky header setting (ensure you place a comma between settings objects):

{
  "type": "checkbox",
  "id": "enable_hover",
  "label": "t:sections.header.settings.enable_hover.label",
  "default": true
}

Important: The id here (enable_hover) must match the ID used in the liquid if statement in Step 2.

Step 4: Update the Language File

To make sure the label shows up correctly in the Customizer (instead of an error code), we need to define the label text in your locale file.

1. In the file sidebar, locate the Locales folder.
2. Open en.default.json (or your specific language file).
3. Search for sticky to find the header section.
4. Add the new label definition under the header settings:

"enable_hover": {
  "label": "Enable hover menu"
}

Step 5: Testing and Caveats

How to Test

1. Click Save on your code files.
2. Open the Theme Customizer.
3. Click on the Header section.
4. You should now see a checkbox labeled "Enable hover menu".
5. Check the box and view your site. Your menus should now drop down on hover.

A Note on Menu Structure

This implementation relies on CSS mouse tracking. If you have a large gap between your main menu item and a small sub-menu, the mouse might "lose" the hover state before reaching the sub-menu, causing it to close.

• Works well: Large sub-menus or tight spacing.
• Needs caution: Small sub-menus with large vertical gaps.

Conclusion

You now have a functioning hover menu in the Sense theme! In Part 2 of this series, I will cover how to make the parent menu items clickable links, which is a common requirement when switching from click-based to hover-based navigation.