Video autoplay on hover in the featured collection section

Technical Q&A
, , ,

Topic summary

Goal: Make a product video autoplay on hover over the first product image in the “featured collection” section of the Shopify Cascade theme.

Proposed approach: Modify the Liquid template that outputs product images (suggested: featured-collection.liquid or similar) to render both an image and a hidden video inside a shared wrapper (class example: .product-media). Add JavaScript (in theme.js/global.js) to swap visibility and control playback on hover, and add CSS for styling.

Key implementation details: On mouseenter, hide the image, show the video, and call video.play(). On mouseleave, hide the video, show the image, pause the video, and reset currentTime to 0. Code snippets (HTML/JS) were provided.

Current blocker: The requester cannot find the exact code location in the theme to replace and shared a Loom video of their code for guidance.

Status: Unresolved/ongoing. Next needed step is pinpointing the exact file/section in Cascade where product images are generated and the precise insertion point. Links and code snippets are central to understanding the task.

Summarized with AI on December 21. AI used: gpt-5.
1

Im working in the theme called Cascade - i need a video to autoplay when hovering over the first product picture, in the section “featured collection”

this is the webshop im working on:[ undabrand.com](http:// undabrand.com)

can anybody help me?

Thanks in advance

/Laurits

2

Hi,

Hope this will help

At featured-collection.liquid or similar look for the code that generates product images

Replace that with code which will load both the image and the video

Code example

Add javascript for autoplay (at theme.js or global.js or similar)

Code example

document.addEventListener('DOMContentLoaded', function() {
  var productMedia = document.querySelectorAll('.product-media');

  productMedia.forEach(function(media) {
    var image = media.querySelector('.product-image');
    var video = media.querySelector('.product-video');

    // Play video on hover
    media.addEventListener('mouseenter', function() {
      video.style.display = 'block';
      image.style.display = 'none';
      video.play();
    });

    // Stop video on mouse leave
    media.addEventListener('mouseleave', function() {
      video.style.display = 'none';
      image.style.display = 'block';
      video.pause();
      video.currentTime = 0;  // Reset video
    });
  });
});

use CSS to style the video

3

I cant find that bit in the code.. i’ve linked to a loom that showes the code

can you tell from there where i should replace?

https://www.loom.com/share/5567e2aac8a24621b1d76da17b8aa89e?sid=06febf45-956b-4c05-8577-a3759ebef614