Animated hero preview

Both panes below start as a still image, play once when scrolled into view, then rest on a frame that should be indistinguishable from where they started. If you can spot the moment it stops, the clip is not a clean cycle.

Clip
spin-demo.mp4 from bundled demo asset
Still
the clip's own frame 0
Product
Alimento BIO de Liberación Lenta para Orquídeas
Viewport
—
Reload with animation off Reload with debug logging

Frame 0 is used as the featured image here, preview only. Every still on this page is the clip's own first frame, which is the agreed approach going forward: when a product gains an animation, its featured image becomes frame 0 of that clip. Nothing on the live product has been changed — it keeps its own photo and has no clip assigned, so the real product page does not animate. The swap happens in this page's own script, for display.

Large · 600px idle
Small · 375px idle

What to check

  1. The still paints immediately. Nothing should pop in or shift.
  2. The animation starts only after the page has settled, not during load.
  3. It plays exactly once and holds. It must not loop.
  4. The resting frame matches the opening still. Use the seam test to confirm.
  5. Hover any card or hero to replay it.
  6. Open DevTools → Network and confirm the clip is requested after the largest image, never before it.
  7. Enable reduced motion in your OS, reload, and confirm no clip is requested.

In context

Everything below is the theme's real markup at real sizes, laid out inline rather than inside a device frame. Shopify blocks its own pages from being framed, so a fake device switcher is not possible here, and would have lied about breakpoints anyway. Resize this window, or open this page on your phone, and the layout responds exactly as the live collection and product pages do.

Collection grid

The real card-product snippet, four times, at the saved production settings from templates/collection.json: 4 columns on desktop, 2 on mobile, adapt ratio, secondary image and quick add on. Identical to a real collection page apart from having the same product four times.

Cards animate on hover only. Nothing moves, and not a single video byte is fetched, until you hover a card. Touch devices have no hover state, so there the cards stay plain images.

Resolved: a card can only have one hover behaviour, so the rule is now in the theme itself. A product with a clip drops its second-image swap and animates instead; a product without a clip keeps the second-image swap exactly as it works today. The demo product below has no clip assigned, so this preview simulates the animated case by suppressing its swap image.

Product page

Below is the theme's production featured-product section, the same one used on the live landing pages, configured with the standard blocks: gallery, title, price, variant picker, quantity selector, buy buttons and USPs. The animation is layered onto its gallery by this preview, so nothing about the live product had to change. Its gallery, thumbnails and info column are the real components, so the spacing and type you see here are the spacing and type a customer sees.

Tarro de pellets con tapa negra, alimento bio de liberación lenta para orquídeas

Alimento BIO de Liberación Lenta para Orquídeas

€11,99
€11,99
Impuesto incluido. Los gastos de envío se calculan en la pantalla de pago.
Tamaño:
Ver todos los detalles