Clickable videos on Collection List section

[ablakart]

Hi Shopify Community,

I’m looking to be able to implement clickable videos on the Collection List section of this page: The Nice List // Holiday 2025 (TEST) – Hiro Clark - see below

At the moment I can only go with images for this section but I would need to be able to either upload an image or a video and make sure it can have a link wiht both options.

Let me know if someone can help!

Thanks,
Antoine

[kazi_1]

Hello @ablak
This requires customization of your theme’s Liquid template.

[PaulNewton]

Hi @ablakart first check the themes settings/docs.
Some themes allow the second media to be a video/gif that can active when the product-card is hovered over.

Beyond that this becomes an advanced theme customization beyond the scope of the forums.
Reach out if you want this done properly(click profile pic on forums for options to connect).

Keep in mind there can be UX issues in making a product card “clickable” but not actually go to the product creating customer confusion.
This is why in some themes it’s a secondary intent through hovering to show another media.

If you must DIY, you can burn your time hoping the sidekick assistant can generate such a section and the correct interactivity.
Use autoplay in moderation with care, Do NOT force autoplay with audio as browsers may denylist your site from autoplaying any video to the customer thus hurting conversions.

[hammad-ali]

Hi @ablakart,

You can make videos clickable in the Collection List section by slightly editing the Liquid code of that section.

Here’s how to do it:

1. Go to Online Store → Themes → Edit code → Sections → collection-list.liquid

2. Locate the code that outputs the collection image — it usually looks like this:

   {{ collection.image | image_url: width: 800 | image_tag }}
   
   

3. Replace it with this conditional setup:

   {% if collection.metafields.custom.video_url %}
     <a href="{{ collection.url }}" class="collection-video">
       <video autoplay muted loop playsinline>
         <source src="{{ collection.metafields.custom.video_url }}" type="video/mp4">
       </video>
     </a>
   {% else %}
     <a href="{{ collection.url }}">
       {{ collection.image | image_url: width: 800 | image_tag }}
     </a>
   {% endif %}
   
   

4. Then, create a metafield for your collections:

   • Go to Settings → Custom data → Collections → Add definition

   • Name it “Video URL”

   • Namespace and key: custom.video_url

   • Type: “URL”

Now you can paste a video link (like from your Shopify files or CDN) into that metafield for any collection you want to display a video instead of an image.

The video will autoplay, loop, and be fully clickable just like the image version.

If you want , i can do this for you, you do not need to worry.

Hope this helps!
If you ever need help adding custom features or enhancing your Shopify design, I provide professional and friendly services at affordable rates.
– Hammad | Shopify Developer with SEO and CRO expertise

[hammad-ali]

While videos look attractive, they can slow down your store’s loading speed — especially on mobile. Slow sites can reduce conversions and SEO performance. It’s best to use lightweight, compressed videos or keep them only on limited sections for testing.

[Tapita-support2]

Hi @ablakart,

You can easily achieve that using the Tapita: AI Sections & Blocks app — it lets you add videos (with links or buttons) directly in your Collection or any custom section, no coding needed.

For example, you can try the free section Tpt – Video Grid #1.

Once you’ve added it, open the Theme Editor → select the section → edit the Button Label and Button Link fields to make your video clickable.

You can see more video section demos here!

Or, if you want a direct “Shoppable video” option. This is for you Tpt – Shoppable Video #1

Hope this helps,
Sophia, The Tapita team.