Want to add video icon on collection page for the product having video in image section already

Store Design
, ,
1

hi i am using fabric magic theme and i have ai to develop product video intend but its not working as intended bcz it cannot be added in collection section in them theme

can anyone help me in sorting this out

2

@venusgemsindia collection section code is to show the products, you can add video section or custom liquid section on home page to show your video by putting video code into it.

If you need it in collection section only then need to add code in collection liquid template.

3

Hii @venusgemsindia,

There are three solution options:

Option 1: Use a Shopify App

There are apps designed to add videos to collection pages:

  1. Product Video Gallery / Video Gallery for Shopify
  2. Vimeo / YouTube video apps that can integrate with collection items
  • Install the app from Shopify App Store
  • Link your AI-generated video to the product
  • Configure the app to show video thumbnails in collection pages

Option 2: Custom Code

  • If you need video support in collections, you must edit the product card snippet.

Steps:

  1. Go to Online Store → Themes → Edit code
  2. Open:
snippets/card-product.liquid
  1. Locate where the product image is rendered
  2. Add a condition to show a video if available

Example (simplified):

{% assign video = product.media | where: 'media_type', 'video' | first %}

{% if video %}
  {{ video | media_tag: autoplay: true, loop: true, muted: true }}
{% else %}
  {{ product.featured_image | image_url: width: 600 | image_tag }}
{% endif %}

Note:

  • Videos in collection grids can impact performance
  • Always keep them muted & short

Option 3: Metafield-Based Video

If your AI tool outputs a hosted video:

  1. Create a product metafield (type: file or URL)
  2. Reference it inside card-product.liquid
  3. Use <video> only when the metafield exists
4

how to add it in collection liquid template

5

@venusgemsindia upload video to content, copy the URL link.

Then go to edit code option of the theme and open collection.liquid page

then you can use html video tag to copy paste video link and it should work fine, you can show video at top or the bottom of the collection products. But since you are editing the template, it will be shown on all collection pages

7

Hey @venusgemsindia,

Could you please share your store url and password [if applicable] so that I can take a look and provide you the solution code.

Thanks

8

db6ect-0t.myshopify.com

here is our shopify url

10

@venusgemsindia did you try to add video in collection template?

11

Hello!

You can add a video to a collection section in your theme editor by either using your theme’s built in video block, or if your theme has a ‘custom liquid’ block you can paste in the video embed from your video platform. If you are hosting your video on YouTube, you can right click the video on YouTube and click ‘Copy embed code’. Then, paste that code into your ‘custom liquid’ block.

I’ve released an app that can help easily embed YouTube videos in particular on your store by simply pasting the video url into the app, without messing with code: UWidget: YouTube Widgets

Let me know if this works for you!