Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
can anybody help me?
Thanks in advance
/Laurits
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
<div class="product-media">
<img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" class="product-image">
<video src="{{ your_video_url }}" muted loop class="product-video"></video>
</div>
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
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025