← All sections

Product Wall 3D

Your catalog on a tilted, living wall, so shoppers see the range before reading a word.

ProHero & banners29 settingsInstall
Full screen ↗

Install

One file: sections/mf-product-wall-3d.liquid. It appears in the theme editor as EX · Product wall 3D.

  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-product-wall-3d.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.
    prompt
    Install the EXPERAISE Sections section "Product Wall 3D" (product-wall-3d) 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 · Product wall 3D. Every text, color and product is a setting.
Pro

The Liquid for Product Wall 3D 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

Abundance as a quality signal: a moving wall of real products proves range and momentum at a glance; one CTA routes the intent.

Specs

File: sections/mf-product-wall-3d.liquidIn the theme editor: EX · Product wall 3DBest on: index, collection, page templatesSettings: 29Validated: Shopify Theme Check, no external assets

About this section

Product Wall 3D is a Shopify Online Store 2.0 hero section that turns a collection into a living wall. Product cards sit on a plane tilted back in 3D and turned 45 degrees, and every column scrolls on its own loop, alternating up and down, under a soft accent glow. Cards come from the collection the merchant picks, using the main or the second product image, and each card links to its product. On hover a card lifts, the others dim, and a chip facing the viewer shows the product name and price, with the compare-at price struck through or a sold-out label. Gradient art cards can be interleaved and form the designed fallback. The copy sits on the left or centered over the wall: eyebrow, a two-line heading whose second line can be plain, italic serif or gradient, rich text, one button that defaults to the collection, the collection's product count and a star-rated proof line. The theme editor controls columns from four to six, loop speed, tilt intensity, card radius, minimum height, spacing and the background, text and accent colors. The loop is pure CSS on transform and pauses off-screen. On desktop the wall can lean toward the cursor; on touch screens it can spotlight a product every few seconds. Under 750px the wall becomes a full-bleed band above the copy, and with reduced motion it stays a complete still. The conversion principle is abundance as a quality signal: the range seen at once, then one call to action. One self-contained .liquid file.

Questions

Where do the cards come from?

From the collection selected under Wall, up to its first 24 products, using the main or the second product image. Each card links to its product page. Without a collection, the wall shows designed gradient art cards so it never looks empty.

How do shoppers see prices?

On desktop, hovering a card pauses its column, lifts the card and shows a chip with the product name and price, including a struck-through compare-at price or your sold-out label. On touch screens, the section can spotlight a product every few seconds instead.

Will it slow down my store?

The columns loop with CSS animations on transform only, so they run on the GPU, and they pause whenever the section is off-screen. Images are lazy-loaded with responsive widths. JavaScript only handles the pause, the optional cursor lean and the touch spotlight.

How does it behave on phones and with reduced motion?

Under 750px the wall becomes a full-bleed band at the top that fades into the background, with the heading, a full-width button and the stats below it. When a visitor prefers reduced motion, every column stops at its own offset and the wall stays a complete still image.

More sections