Shopify Mega Menus: How to Dynamically Update Product Cards on Hover in Horizon Theme

Hey everyone, as a Shopify expert who spends a lot of time digging through community discussions, I often see recurring questions about making our stores more interactive and user-friendly. One such gem popped up recently from a store owner, @Tsmitty45, asking about a really neat feature for mega menus: having product cards dynamically update when you hover over or select a collection link in the header submenu.

It’s a fantastic idea, right? Imagine your customer hovers over "Men's Apparel," and immediately, the product cards in the mega menu swap to show top products from that collection. It’s slick, it’s intuitive, and it can seriously enhance the browsing experience. But, as often happens with these kinds of nuanced UI features, the answer isn't always a simple "yes" or "no." Let's dive into what the community had to say about making this happen with the Horizon theme.

The Core Challenge: Dynamic Product Displays in Horizon's Mega Menu

Tsmitty45's question was pretty straightforward: is it possible to have the adjacent product cards in the Horizon theme's header submenu update to match the selected collection? And if not, would it qualify for Shopify's complimentary design support?

Right off the bat, several community experts like umerzaman152, devcoders, and Jennifer_Lawrence confirmed the general consensus: the Horizon theme doesn't support this functionality natively. Umerzaman152 pointed out that while the header menu can show featured collection or product cards, they're static. Hovering or selecting a menu item won't automatically swap those cards to match the specific item's collection.

Jennifer_Lawrence advised checking the Header section in the theme editor first. If there isn't a setting specifically for tying a mega menu collection link to product cards, then it's definitely not a built-in feature. It's always a good first step to poke around your theme's customization options before assuming you need custom work.

Complimentary Design Support: A Shot in the Dark?

The second part of Tsmitty45's question revolved around complimentary design support. This is a common query when features aren't native, and it's where things can get a little fuzzy. AlexCharter and Jennifer_Lawrence both clarified that whether a request qualifies for complimentary design support is entirely up to Shopify's support team, not something the community can confirm.

Their advice is solid: if you're going this route, contact Shopify's Help Center directly. Be very specific about what you want the menu to do. AlexCharter suggested wording it as "one concrete change: which submenu item, which collection, and that the product cards should swap when that collection is selected." This gives Shopify's team a clear picture of your needs. Just be aware, as Jennifer_Lawrence noted, that eligibility depends on their current scope and the complexity of your request. Don't be surprised if they say it falls outside their support, in which case, a custom developer is your next best bet.

The Custom Code Solution: Taking Matters into Your Own Hands

This is where the community really shines! While the native theme might not do it, umerzaman152 alluded to a custom code change, and Ploqo followed up with an incredibly detailed, step-by-step guide on how to implement this dynamic product card swapping. This is exactly the kind of practical solution real store owners need when exploring what's possible on platforms like Shopify.

Ploqo’s method involves a bit of Liquid and JavaScript to make those cards switch on hover. It's important to remember what Jennifer_Lawrence mentioned: code edits like these aren't preserved if the theme gets updated, and you'll own the upkeep. That's the trade-off for custom functionality, but for many, it's worth it!

Here’s how Ploqo laid out the custom code implementation:

First, Ploqo shared some awesome screenshots demonstrating the desired effect:

Now, let's get into the step-by-step:

1. Go to Online Store > Themes. Click … next to your Horizon theme, then click Edit code.

2. Open snippets, then click mega-menu-list.liquid.

3. Press Ctrl+F (or Cmd+F on Mac) and search for when 'featured_collections'. Press Esc, then press the Up arrow once and Home. Your cursor should now be in front of the line . Paste this Liquid code snippet:

{% if eager_loading %}
  {% for sub_link in parent_link.links %}
    {% if sub_link.type == 'collection_link' %}
      

        {% for item in sub_link.object.products limit: max_featured_products %}
          

            {% render 'resource-card',
              resource: item,
              resource_type: 'product',
              image_hover: true,
              image_aspect_ratio: content_aspect_ratio,
              image_sizes: image_sizes,
              product_view_context: 'dialog'
            %}
          
        {% endfor %}
      

4. Press Ctrl+End (or Cmd+End on Mac) to go to the very bottom of the file. Paste this JavaScript code on a new line, then click Save:

5. Finally, you need to configure your menu and theme settings. Go to Content > Menus and open your header menu. Ensure the links under your main mega menu item (e.g., "Shop") are set to link to collections. Also, in your theme's Header section (within the Customize editor), make sure Menu style is set to Featured products.

After these steps, you should be able to hover over each collection in your mega menu's "Shop" submenu, and the product cards will dynamically change to display products from that specific collection!

So, there you have it. While the Horizon theme might not offer this dynamic mega menu feature out-of-the-box, the incredible Shopify community has once again come through with a robust, actionable custom code solution. It's a fantastic example of how a little bit of custom development can elevate your store's user experience. Just remember the trade-offs: managing custom code means you're responsible for its upkeep, especially if Shopify rolls out theme updates. Always test thoroughly in a duplicate theme before pushing live! Happy customizing!