[Horizon] How to display thumbnails on menu links to improve user experience on the Shopify theme "Horizon"

This customization automatically displays product thumbnail images on menu links in the Horizon theme header. No theme file editing is required — just paste the code into a Custom Liquid section. It supports both the desktop mega menu and the mobile drawer menu.

Desktop (Mega Menu) Example

Child menu items (2nd level) show 48px thumbnails, while grandchild items (3rd level) show 28px thumbnails to visually distinguish the hierarchy.

Mobile (Drawer Menu) Example

On mobile, grandchild menu items are indented so that the right edge of the thumbnail aligns with the parent menu items.

Setup: Add a Custom Liquid Section to the Header Group

In the theme editor, add a Custom Liquid section to the "Header group" and paste the code. No theme file (vendor file) editing is required.

How It Works

The script works as follows:

1. On page load, it finds all product links (URLs containing /products/) in header-menu (desktop) and header-drawer (mobile)
2. Extracts each product handle and fetches the product image URL in parallel via /products/{handle}.js
3. Converts the image URL to 100px width using the CDN resize feature and prepends an <img> to each link
4. Uses MutationObserver to monitor DOM changes in the menu and re-insert thumbnails as needed

Note: Why MutationObserver Is Required

The Horizon theme optimizes page load speed by performing hydration on the header section — it initially returns lightweight HTML, then replaces it with full HTML via the Section Rendering API. This replacement removes JS-inserted elements, so monitoring DOM changes and re-inserting thumbnails is necessary.

This was not required in Dawn, but any JS customization to the header or cart drawer in Horizon will need similar handling.

Note: Supported Link Types

This script identifies product links by URL (containing /products/), so thumbnails are automatically displayed for any navigation link pointing to a product page. Links to collections, blog posts, or external URLs are not affected. This method only works for product links.

Note: Customizing Thumbnail Sizes

You can adjust the sizes by changing the width / height values of .menu-thumb in the CSS. The margin-left: 16px for mobile grandchild menus is calibrated to the size difference between parent and child (48px - 32px), so adjust accordingly if you change the sizes.