← All sections

Hover Reveal Index

A magazine-style product index: hover a name and the product floats into view.

ProCollections35 settingsInstall
Full screen ↗

Install

One file: sections/mf-hover-reveal-index.liquid. It appears in the theme editor as EX · Hover reveal index.

  1. Connect EXPERAISE Sections to Claude (once). In Claude Code:
    terminal
    claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"
    In the Claude app: Settings → Connectors → Add custom connector → https://sections.experaise.com/api/mcp. Full setup
  2. Ask Claude. It fetches sections/mf-hover-reveal-index.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.
    prompt
    Install the EXPERAISE Sections section "Hover Reveal Index" (hover-reveal-index) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor.
  3. Customize. Online Store → Themes → Customize → Add section → EX · Hover reveal index. Every text, color and product is a setting.
Pro

The Liquid for Hover Reveal Index is part of Unlimited

The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.

Get Unlimited · €99/year →What's included
Why it converts

Editorial curation: a confident, numbered short list feels premium, and every row is one click from its product page.

Specs

File: sections/mf-hover-reveal-index.liquidIn the theme editor: EX · Hover reveal indexBest on: index, collection, page templatesSettings: 35Validated: Shopify Theme Check, no external assets

About this section

Hover Reveal Index is a Shopify Online Store 2.0 collection section that presents products as a magazine-style editorial index. Each row shows a running number, the product name in large display type, the product type and the price, with the compare-at price, an optional discount percentage and a sold-out label read from Shopify. Rows come from a collection chosen in the theme editor, or the current collection on a collection page, and every row links to its product page. Above the list sit an eyebrow, a two-line heading with an italic serif second line, a short text, a View all link with the product count and an outlined numeral; below it, a note and a button. On desktop, hovering a row dims the others, rolls the name into italic serif or slides it right, draws a hairline and reveals a floating product image that follows the cursor with eased lag, tilts with cursor speed and crossfades between products. Merchants set the number of products, main or second image, image width, tilt, image layer, name size, spacing and the background, text and accent colors. Phones and touch tablets get compact rows with inline thumbnails, and the row crossing the middle of the screen becomes active while scrolling. With reduced motion, transitions are removed and the image snaps into place without tilt. The conversion principle is editorial curation: a short, confident list reads as a selection rather than a catalogue and sends clicks straight to product pages. One self-contained .liquid file with no external fonts, libraries or images.

Questions

Where do the rows come from?

From the collection selected under Products, limited by Products to show (3 to 12). On a collection template you can leave the setting empty and the section lists the current collection. Until a collection is chosen, it shows placeholder names with gradient art so the layout never looks empty.

How does the floating image work?

On devices with a mouse, the image of the hovered product follows the cursor with a short eased delay and tilts in the direction of movement, up to the angle set in Tilt with cursor speed. Moving to another row crossfades to that product. Choose whether it sits behind or above the names.

What happens on phones, tablets and with reduced motion?

Without hover, each row shows its thumbnail inline and the row in the middle of the screen is highlighted as the shopper scrolls. Keyboard focus highlights rows too. With reduced motion, transitions are removed and the image no longer tilts or trails the cursor.

Will it work with my theme?

Yes. It is one section file for any Online Store 2.0 theme such as Dawn or Horizon. It inherits your theme font for the names, uses a system serif for the italic accent, and every link is a normal product or collection URL.

More sections