← All sections
Product Corridor
Your products stream toward the shopper down a 3D corridor, so the range sells itself.
Install
One file: sections/mf-product-corridor.liquid. It appears in the theme editor as EX · Product corridor.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"https://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-product-corridor.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Product Corridor" (product-corridor) 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. - Customize. Online Store → Themes → Customize → Add section → EX · Product corridor. Every text, color and product is a setting.
Pro
The Liquid for Product Corridor 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.
Why it converts
Show the range before describing it: products in motion answer 'is there something for me?' and one CTA routes that intent.
Specs
About this section
Product Corridor is a Shopify Online Store 2.0 hero section that leads with products instead of describing them. Two mirrored rails of cards travel out of a vanishing point toward the shopper; each card grows and sweeps outward as it approaches, filling the screen with the collection. Cards come from a collection the merchant picks, using the main or the second product image, or from up to twelve uploaded Card image blocks. Gradient art cards can be interleaved between them, in a spectrum palette or tinted from the brand accent color, and they double as the designed fallback when nothing is configured. The copy frames the corridor: eyebrow, a two-line heading whose second line can be plain, italic serif or gradient, rich text, a button that defaults to the chosen collection, a secondary link and a star-rated proof line. The theme editor controls cards per rail, speed, corridor height, corner radius, minimum height, spacing, a legibility fade and the background, text and accent colors. The motion is pure CSS: the 3D path is precomputed as keyframes, so the corridor is complete on the first frame without JavaScript. A small custom element pauses it off-screen and adds an optional desktop camera that drifts toward the cursor. On phones the corridor gets its own row between heading and copy; with reduced motion it freezes as a finished still. The conversion principle is range as proof: breadth seen at a glance, then one call to action into the collection. One self-contained .liquid file with no external fonts, libraries or images.
Questions
Where do the cards come from?
Card image blocks come first: if you add blocks with images, the corridor uses only those. Otherwise it uses the products of the collection selected under Cards, with the main or the second product image. With neither, it shows gradient art cards so the section never looks empty.
Will it slow down my store?
The animation is CSS keyframes on transform only, so it runs on the GPU. Card images are lazy-loaded with responsive widths, and the animation pauses whenever the section is off-screen. The JavaScript only handles that pause and the optional cursor camera.
How does it behave on phones and with reduced motion?
On screens under 750px the corridor gets its own row between the heading and the copy, so nothing overlaps, and the cursor camera is off. When a visitor prefers reduced motion, every card stops mid-flight and the corridor stays as a complete still image.
Which images give the best result?
Portrait or square images with a centered subject, because cards crop to an 18:25 portrait frame. Lifestyle shots, often the second product image, give the most editorial look; plain packshots work well with gradient art cards interleaved.