Videos on Product Collection Grid instead of Images

[victoria_m]

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!

[LitCommerce]

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' -%}
<video src="{{ nameVideo | asset_url }}" alt="" title="" class="lazyloaded " tabindex="-1" width="100%" muted="" loop="" playsinline="" data-autoplay="true" preload="auto" data-expand="-10">
</video>
{%- 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.