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

Store Design
, ,

Topic summary

Goal: show a video icon on collection pages for products that already have a video in their image gallery (Fabric Magic theme). The current AI-generated video integration isn’t working because it can’t be added within the collection section.

Guidance provided:

  • The collection section primarily renders product listings (the product grid). To display a video elsewhere, add a Video section or a Custom Liquid section on the home page and paste the video code there. (Custom Liquid = a section that accepts custom code.)
  • If the icon/video must appear on collection pages, edit the collection liquid template (the collection.liquid file) to insert the necessary code.

Status: no code shared and no fix confirmed. Next step is to modify collection.liquid or use a homepage section workaround. The issue remains open.

Summarized with AI on December 16. AI used: gpt-5.
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