Video as front

Ask & Offer
1

Hi everyone,

I’m using Shopify with the Horizon theme and I’m wondering if it’s possible to customize the product cards on collection/category pages so that videos can be displayed instead of just the video thumbnail/poster image.

What I would like is:

  • If the first product media is a video, it should autoplay, be muted, loop, and play inline directly on the collection page.

  • The video should display and play in the product grid rather than showing a static thumbnail.

  • I would also like the option to use videos with sound, where customers can click/tap the video to unmute and hear the audio.

  • Ideally, this could be enabled or disabled on a per-product basis.

Has anyone implemented something similar in the Horizon theme? If so, could you point me in the right direction or share what files/snippets need to be modified?

Thanks in advance!

2

Hi @Celinajes

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

this is the direct link to the product: Natalie Maria Scandinavian | Carry Me Brush – Namiso Thank you :slight_smile:

5

Hello @Celinajes
In card-product.liquid, find where the first media image renders and replace with:

{% if product.metafields.custom.autoplay_video == true and product.media[0].media_type == ‘video’ %}

{% else %}
{{- product.media[0] | image_url: width: 533 | image_tag -}}
{% endif %}

In assets/global.js, add at the bottom:

document.querySelectorAll(‘.card-product__video’).forEach(video => {
video.addEventListener(‘click’, () => { video.muted = !video.muted; });
});

Per-product control: Go to Settings → Custom data → Products → add a boolean metafield custom.autoplay_video, then toggle it per product in the admin.