How to Make Shopify Menu Show Subcategories on Hover Instead of Click?

Store Design
, , , ,
1

Currently, my Shopify menu has several main categories.

When I click on a category, a dropdown menu appears showing the subcategories.

However, I want to change this behavior so that the subcategories appear automatically when hovering over the main category, without requiring a click.

Is there a way to achieve this using Shopify’s built-in settings, or do I need to modify the theme’s code (e.g., CSS or JavaScript)? Any guidance would be appreciated!

My theme: Spotlight 15.2.0

2 Likes
2

Hey @Tokyoproducts

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @Tokyoproducts

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

4

Hi @Tokyoproducts ,

Go to Online Store, then Theme, and select Edit Code.
Search for global.js file add the provided code at the end of the file.

document.addEventListener("DOMContentLoaded", function () {
  const menuItems = document.querySelectorAll(".header__menu-item");

  menuItems.forEach((item) => {
    const details = item.closest("details");

    if (details) {
      item.addEventListener("mouseenter", function () {
        details.setAttribute("open", "true");
      });

      details.addEventListener("mouseleave", function () {
        details.removeAttribute("open");
      });
    }
  });
});
5

Hi @Tokyoproducts

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Edit code > theme.liquid
  2. Add this code before the close tag https://prnt.sc/LihO9oW3K5Tp

I hope this helps

Best,

Daisy

1 Like
6

Hi Daisy,

It works, thank you so much for your support.

Regards,

Yamazaki