← All sections

Shoppable Reels

Customer videos in a swipeable rail, each with a glassy one-tap add to cart.

ProSocial proof25 settingsInstall
Full screen ↗

Install

One file: sections/mf-shoppable-reels.liquid. It appears in the theme editor as EX · Shoppable reels.

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

The Liquid for Shoppable Reels 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

UGC video next to a one-tap add turns social-style browsing into a purchase without a product-page detour.

Specs

File: sections/mf-shoppable-reels.liquidIn the theme editor: EX · Shoppable reelsBest on: index, product, page templatesSettings: 25 · blocks: ReelValidated: Shopify Theme Check, no external assets

About this section

Shoppable Reels is a Pro Shopify Online Store 2.0 section that shows customer videos as a horizontal rail of vertical 9:16 cards, like the feeds shoppers already scroll. Each reel block takes a Shopify-hosted video, an optional poster image, a product, a caption and a creator handle. Videos are muted, looped and inline; an IntersectionObserver plays each one only while at least half of it is visible and pauses it otherwise, a thin progress bar tracks playback, and every video card has its own pause button. At the bottom of each card sits a glassy product chip with the product image, title, price (compare-at price struck through, or Sold out) and a + button. Single-variant products are added in one tap with Shopify's AJAX Cart API; products with options open a small variant menu first. The section then dispatches cart:refresh and mf:cart:added, announces the result to screen readers and, if JavaScript fails, submits the real product form. When a block has no video yet, the card becomes an animated gradient reel: drifting color fields, the product photo floating with a light sweep, a caption sticker, a typing bubble, an equalizer and the creator avatar. The rail uses CSS scroll snap with previous and next buttons on desktop and native swiping on touch; cards lift on hover. Merchants set the heading, card width, autoplay, labels, padding and colors. With reduced motion, videos stay paused and decorative animation stops. It ships as one self-contained file with scoped CSS and JavaScript and no external assets.

Questions

Where do the videos come from?

Upload vertical videos to Shopify (Content > Files) and pick one in each Reel block's Video setting. Shopify hosts and streams them. Videos load only when they are about to play, play muted on loop while at least half visible, and pause as soon as they scroll away.

What happens when someone taps the + button?

For single-variant products the item is added to the cart straight away through Shopify's AJAX Cart API, the button turns into a check and a cart:refresh event lets compatible cart drawers update. Products with options first show a small menu of variants with their prices. If the request fails, the real product form submits normally.

Can I add reels before I have videos?

Yes. A block without a video shows a designed animated card: soft moving color fields, your product photo (or the poster image) floating, the caption as a sticker and the creator handle, so the section looks finished while you collect customer content.

Is autoplaying video accessible?

Videos are muted, each video card has a labelled pause button, and nothing plays for visitors who prefer reduced motion; decorative animation also stops for them. The rail scrolls with the keyboard buttons or by swiping, and add-to-cart results are announced in a live region.

More sections