Shopify Craft Theme: How to Add Hover Drop-Down Menus

Shopify's Online Store 2.0 themes are excellent, but many merchants find the default navigation behavior frustrating. By default, the Craft theme requires users to click parent menu items to reveal drop-down sub-menus. Depending on your site's UX, this extra click can be a friction point for customers.

In this tutorial, I will walk you through how to implement a hover drop-down menu for the Shopify Craft theme. We will also create a custom toggle in the theme editor to turn this feature on or off and ensure parent menu items remain clickable.

Prerequisites: Backup Your Theme

Before editing code, safety comes first. If you are working on a live site, I strongly recommend duplicating your theme.

1. Go to Online Store > Themes.
2. Click Actions > Duplicate on your current theme.
3. Work on the copy so your live visitors don't see changes while you are coding.

Once you are ready, click Actions > Edit Code.

Step 1: Implement the Hover Logic

The primary file we are editing is header.liquid. This file controls your navigation bar. We need to add a JavaScript snippet that detects mouse movement over the menu items.

1. Open sections/header.liquid.
2. Scroll to the bottom of the file and locate the {% schema %} tag. We want to work right before this tag.
3. Insert the following logic (conceptually) or the specific code snippet provided in the video resources:

This script essentially targets the <details> elements in your header. It adds an event listener so that:

• On Mouse Over: It sets the open attribute to true.
• On Mouse Out: It removes the open attribute.

Once saved, your menus will open on hover, but we need to refine the functionality to make it a toggleable feature.

Step 2: Create a Theme Setting Toggle

To make this feature user-friendly, we will add a checkbox to the Shopify Customizer. This allows you to enable or disable the hover effect without touching code again.

1. Stay in header.liquid and look inside the {% schema %} section.
2. Search for enable_sticky_header to find the existing settings.
3. Immediately after the sticky header setting object, add a new setting for the hover feature:

{
  "type": "checkbox",
  "id": "hover",
  "label": "t:sections.header.settings.hover.label",
  "default": false
}

Note: Ensure you place a comma after the previous setting object to maintain valid JSON format.

Step 3: Wrap the Script in a Conditional

Now that we have a setting, we need to tell the JavaScript to only run if that box is checked.

Go back to the script you added in Step 1. Wrap the script tags in a Liquid conditional statement:

{% if section.settings.hover %}
  <script>
    // Your hover script logic here
  </script>
{% endif %}

Step 4: Fix Missing Translations

After saving the schema change, you might see a "Missing Translation" error in your theme editor. This is because we referenced a label that doesn't exist yet in the language files.

1. Open the locales folder in your file tree.
2. Open en.default.schema.json (or your primary language file).
3. Search for sticky_header to find the relevant section.
4. Add the label for your new setting:

"hover": {
  "label": "Enable hover on menu items"
}

Ensure your commas are placed correctly—JSON requires a comma between items, but no comma after the last item in a list.

Step 5: Make Parent Links Clickable

By default, parent items in the Craft theme are buttons that toggle the menu. Now that hover handles the opening, we want clicking the parent item to actually navigate to that page (e.g., clicking "Shop" should take you to the Shop collection).

We need to modify the HTML in header.liquid to render an <a> tag instead of a <span> or <button> when hover is enabled.

1. Search for header__menu-item or locate the <span> tag inside the summary element.
2. You can verify you are in the right place by adding the word "TEST" inside the tag and previewing the theme.
3. Replace the standard title span with a conditional snippet:

{% if section.settings.hover %}
  <a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset">
    {{ link.title | escape }}
  </a>
{% else %}
  <span class="header__menu-item list-menu__item link link--text focus-inset">
    {{ link.title | escape }}
  </span>
{% endif %}

Step 6: Update Sub-Menu Links

If you have nested menus (grandchild items), you need to repeat Step 5 for the sub-menus.

1. Search for the sub-menu rendering logic (look for details tags inside the main loop).
2. Locate the child link title logic.
3. Apply the same conditional logic: If section.settings.hover is true, render an <a> tag; otherwise, keep the default behavior.

UX Tip: Drop-Down Alignment

One technical note regarding CSS and User Experience: Hover menus work best when there is no gap between the menu item and the drop-down content.

If you have a very short menu list (e.g., 2 items) and the user's mouse leaves the list area while trying to navigate down, the menu might close unexpectedly. Ensure your drop-down lists are populated or styled to prevent the mouse from "falling off" the element during navigation.

Conclusion

You now have a fully functional hover menu in the Shopify Craft theme that preserves the ability to click parent links. By wrapping this in a schema setting, you’ve maintained the flexibility of the Online Store 2.0 architecture.