Videos on Product Collection Grid instead of Images

Store Design
1

Hi everybody,

I’d like to create a catalog product grid where 1 product on each row is displayed as a video, instead of an image. Similar to the product catalog on this website.

I’m using the Minimal theme.

Any ideas how I can edit the liquid to achieve this?

Thanks in advance!

2

Hi @victoria_m ,

Please follow these steps:

  • Step 1: Upload videos at settings > files. The name will be related to the handle of the product, as long as it is unique.
    Ex: SL65-NeoSage.mp4.

  • Step 2: Add tag in product. Create separate tags like: video_SL65-NeoSage . https://i.imgur.com/dtEVR8t.png

  • Step 3: Add code in item product, with Minimal theme, go to snippets/product-grid-item.liquid file:

{%- for tag in product.tags -%}
{%- if tag contains ‘video_’ -%}
{%- assign nameVideo = tag | remove: ‘video_’ | strip | append: ‘.mp4’ -%}

{%- endif -%}
{%- endfor -%}

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.