Good Evening,
I noticed that when the videos are set on the product page as showing first before the image they do not auto-play on the collection page. Please see current state and examples attached. The image with the yellow highlights is what our website currently shows.
Is there a way we can get them to auto-play on the collection pages also?
Please visit our website: TRACKSUIT AND SWEATSUIT DEAL | YONICQUE – Yonicque
Thank you
Theme does not provide any video references on collection page, so adding them videos would require theme code edit.
Editing theme code will make future theme version updates problematic.
Possible solutions:
Also – beware of showing multiple videos on the same page – this will eat the bandwidth and CPU → may easily make your page unresponsive.
Can look annoying too.
I considered this comment - Can look annoying too. Thank you for the feedback @tim_tairli
you might be using video as first media in your product page, try switching it with a image media. This will definitely solve your problem
Videos don’t auto-play on collection pages by default in most themes. To enable this, you’d need to edit your theme code to add video support there. Keep in mind this can affect page load and might require a developer if you’re not comfortable with code. Alternatively, consider using GIFs or switching the first media to an image to avoid this issue.
@tim_tairli Can you help me to hide the icons on the product page until the customer passes the add to cart button? Please see image.
Wrong thread, but anyways – use this “Custom section”-> “HTML” block code.
The code is 90% the same and still tracks the header, but adds some vertical offset if on product page and device is narrow:
<script>
document.addEventListener('DOMContentLoaded', ()=>{
const header = document.querySelector('.shopify-section[id$=header]');
if (!header) return;
const cartButton = document.querySelector('.product-single__meta .add-to-cart');
// add offset if on product page and device is mobile
const options = cartButton && window.innerWidth < 600 ? { rootMargin: "400px 0px 0px 0px" } : null;
let callback = (entries) => {
for (var entry of entries) {
if (entry?.target == header ) {
document.documentElement.setAttribute('header-visible', entry.isIntersecting);
}
}
}
let observer = new IntersectionObserver(callback, options);
observer.observe(header);
});
</script>
<style>
#smile-ui-lite-container,
#shopify-chat,
[class*=kl-teaser],
#trustedsite-tm-image,
.jdgm-revs-tab-btn {
transition: opacity 0.5s linear;
}
[header-visible="true"] :is(
#smile-ui-lite-container,
#shopify-chat,
[class*=kl-teaser],
#trustedsite-tm-image,
.jdgm-revs-tab-btn
){
opacity:0;
pointer-events:none;
}
</style>
it is google policy that does not allow auto play videos on your website with sound you need to mute the video find the code in your theme editor find the video tag in video tag add muted like
<video muted loop autoplay> liquid{{section.settings.video | video_tag: muted
Hello @yonicque,
Most native Shopify themes don’t support autoplaying video media directly on the collection grid out of the box, but you can achieve this seamlessly using a dedicated app.
Take a look at the EasyBoost Product Videos Demo. The EasyBoost app automatically checks if a product has an associated video and can display/autoplay it on your collection pages exactly the way you described.
It’s a solid, plug-and-play alternative to rewriting your theme’s theme code. Hope this helps!