autoplay video thumbnail

Store Design

Topic summary

A user seeks to enable autoplay for a product video thumbnail on their Shopify store. Another participant notes that autoplay typically requires videos to be muted due to browser restrictions.

Troubleshooting Process:

  • The user shares their product page link (thernoo.com)
  • Support initially requests the product-media-gallery.liquid file code
  • After review, support identifies the issue is actually in the product-thumbnail.liquid file
  • User provides the correct file code

Solution Attempted:

  • Support provides replacement code for the product-thumbnail.liquid file
  • After implementing the new code, the user reports the video now displays differently (shows as a static thumbnail)

Current Status:
The discussion remains unresolved. The code modification changed the video display behavior but did not achieve the desired autoplay functionality. Further troubleshooting appears needed.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

woodesther_0-1744081699355.png
woodesther_0-1744081699355.png354×546 89.8 KB

Good evening. I wanna know is there a way to autopay this video ?, please

2

Yes, you can usually autoplay videos, but often only if they are muted due to browser restrictions for better user experience.

3

Hi @woodesther ,

Please send the website link, I will check it for you

4

Okay thank you

5

Here’s the link i have a video before last element:

https://thernoo.com/products/samantha-sexy-fitted-evening-gown

6

Hi @woodesther ,

Please send me the code of product-media-gallery.liquid file, I will check and guide it

7

{% comment %}
Renders a product media gallery. Should be used with ‘media-gallery.js’
Also see ‘product-media-modal’

Accepts:

  • product: {Object} Product liquid object
  • variant_images: {Array} Product images associated with a variant
  • limit: {Number} (optional) When passed, limits the number of media items to render

Usage:
{% render ‘product-media-gallery’ %}
{% endcomment %}

{%- liquid
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif

if limit == 1
assign single_media_visible = true
endif

assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
assign media_count = media_count | minus: variant_images.size | plus: 1
endif

if media_count == 1 or single_media_visible
assign single_media_visible_mobile = true
endif

if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == ‘show’ or section.settings.mobile_thumbnails == ‘columns’ and media_count < 3
assign hide_mobile_slider = true
endif

if section.settings.media_size == ‘large’
assign media_width = 0.65
elsif section.settings.media_size == ‘medium’
assign media_width = 0.55
elsif section.settings.media_size == ‘small’
assign media_width = 0.45
endif
-%}

<media-gallery
id=“MediaGallery-{{ section.id }}”
role=“region”
{% if section.settings.enable_sticky_info %}
class=“product__column-sticky”
{% endif %}
aria-label=“{{ ‘products.product.media.gallery_viewer’ | t }}”
data-desktop-layout=“{{ section.settings.gallery_layout }}”

{{ 'accessibility.skip_to_product_info' | t }}
    {%- if product.selected_or_first_available_variant.featured_media != null -%} {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
  • {%- assign media_position = 1 -%} {% render 'product-thumbnail', media: featured_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, media_fit: section.settings.media_fit, constrain_to_viewport: section.settings.constrain_to_viewport, lazy_load: false %}
    • {%- endif -%} {%- for media in product.media -%} {% if media_position >= limit or media_position >= 1 and section.settings.hide_variants and variant_images contains media.src %} {% continue %} {% endif %}

    {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

  • {%- liquid assign media_position = media_position | default: 0 | plus: 1 assign lazy_load = false if media_position > 1 assign lazy_load = true endif -%} {% render 'product-thumbnail', media: media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, media_fit: section.settings.media_fit, constrain_to_viewport: section.settings.constrain_to_viewport, lazy_load: lazy_load %}
    • {%- endunless -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- for media in product.media -%} {% if media_position >= limit or media_position >= 1 and section.settings.hide_variants and variant_images contains media.src %} {% continue %} {% endif %} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} {%- endunless -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- if first_3d_model -%} {% render 'icon-3d-model' %} {{ 'products.product.xr_button' | t }} {%- endif -%} {%- liquid assign is_not_limited_to_single_item = false if limit == null or limit > 1 assign is_not_limited_to_single_item = true endif -%} {%- if is_not_limited_to_single_item and media_count > 1 and section.settings.gallery_layout contains 'thumbnail' or section.settings.mobile_thumbnails == 'show' -%} {% render 'icon-caret' %}
    {%- capture sizes -%} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 8rem) / 3) {%- endcapture -%}

    {%- if featured_media != null -%}
    {%- liquid
    capture media_index
    if featured_media.media_type == ‘model’
    increment model_index
    elsif featured_media.media_type == ‘video’ or featured_media.media_type == ‘external_video’
    increment video_index
    elsif featured_media.media_type == ‘image’
    increment image_index
    endif
    endcapture
    assign media_index = media_index | plus: 1
    -%}

  • {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-0 {%- endcapture -%} {{ featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape }}
    • {%- endif -%} {%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} {%- liquid capture media_index if media.media_type == 'model' increment model_index elsif media.media_type == 'video' or media.media_type == 'external_video' increment video_index elsif media.media_type == 'image' increment image_index endif endcapture assign media_index = media_index | plus: 1 -%}
  • {%- if media.media_type == 'model' -%} {%- render 'icon-3d-model' -%} {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} {%- render 'icon-play' -%} {%- endif -%} {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-{{ forloop.index }} {%- endcapture -%} {{ media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: media.alt | escape }}
    • {%- endunless -%} {%- endfor -%}
{% render 'icon-caret' %} {%- endif -%}
8

Hi @woodesther ,

I checked and it is in product-thumbnail.liquid file, sorry, please resend me this code.

I will check it,

9

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:

  • media: {Object} Product Media object
  • media_count: {Number} Number of media objects
  • position: {String} Position of the media. Used for accessible label.
  • desktop_layout: {String} Layout of the media for desktop.
  • mobile_layout: {String} Layout of the media for mobile.
  • loop: {Boolean} Enable video looping (optional)
  • modal_id: {String} The product modal that will be shown by clicking the thumbnail
  • xr_button: {Boolean} Renders the “View in your space” button (shopify-xr-button) if the media is a 3D Model
  • constrain_to_viewport: {Boolean} Force media height to fit within viewport
  • media_fit: {String} Method (“contain” or “cover”) to fit image into container
  • media_width: {Float} The width percentage that the media column occupies on desktop.
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render ‘product-thumbnail’,
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

{%- liquid
unless lazy_load == false
assign lazy = ‘lazy’
endunless

assign desktop_columns = 1
if desktop_layout == ‘columns’ and media_count > 1
assign desktop_columns = 2
endif

assign mobile_columns = 1
if mobile_layout == ‘columns’ and media_count > 1
assign mobile_columns = 2
endif

if media.media_type == ‘image’
assign image_class = ‘image-magnify-’ | append: section.settings.image_zoom
endif
-%}

{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}

{% case media.media_type %} {% when 'video', 'external_video' %} {{- 'icon-play.svg' | inline_asset_content -}} {% when 'model' %} {{- 'icon-3d-model.svg' | inline_asset_content -}} {% else %} {{- 'icon-zoom.svg' | inline_asset_content -}} {% endcase %} {%- render 'loading-spinner' -%}
{{ media.preview_image | image_url: width: 1946 | image_tag: class: image_class, loading: lazy, sizes: sizes, widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946' }}
{{ 'products.product.media.open_media' | t: index: position }}

{%- if media.media_type != ‘image’ -%}
{%- if media.media_type == ‘model’ -%}

{%- else -%}

{%- endif -%}


{%- if media.media_type == ‘model’ -%}
{{ ‘products.product.media.play_model’ | t }}

{{- ‘icon-3d-model.svg’ | inline_asset_content -}}

{%- else -%}
{{ ‘products.product.media.play_video’ | t }}

{{- ‘icon-play.svg’ | inline_asset_content -}}

{%- endif -%}

{{
media.preview_image
| image_url: width: 1946
| image_tag:
loading: lazy,
sizes: sizes,
widths: ‘246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946’
}}


{%- liquid
case media.media_type
when ‘external_video’
assign video_class = ‘js-’ | append: media.host
if media.host == ‘youtube’
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: ‘lazy’
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: ‘lazy’
endif
when ‘video’
echo media | media_tag: image_size: ‘2048x’, autoplay: true, loop: loop, controls: true, preload: ‘none’
when ‘model’
echo media | media_tag: image_size: ‘2048x’, toggleable: true
endcase
-%}

{%- if media.media_type == ‘model’ -%}

{%- if xr_button -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“{{ product.title | escape }}”
data-shopify-xr-hidden

{{- 'icon-3d-model.svg' | inline_asset_content -}} {{ 'products.product.xr_button' | t }} {%- endif -%} {%- else -%} {%- endif -%} {%- endif -%}
10

Hi @woodesther ,

Please change all code:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:
- media: {Object} Product Media object
- media_count: {Number} Number of media objects
- position: {String} Position of the media. Used for accessible label.
- desktop_layout: {String} Layout of the media for desktop.
- mobile_layout: {String} Layout of the media for mobile.
- loop: {Boolean} Enable video looping (optional)
- modal_id: {String} The product modal that will be shown by clicking the thumbnail
- xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
- constrain_to_viewport: {Boolean} Force media height to fit within viewport
- media_fit: {String} Method ("contain" or "cover") to fit image into container
- media_width: {Float} The width percentage that the media column occupies on desktop.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

{%- liquid
unless lazy_load == false
assign lazy = 'lazy'
endunless

assign desktop_columns = 1
if desktop_layout == 'columns' and media_count > 1
assign desktop_columns = 2
endif

assign mobile_columns = 1
if mobile_layout == 'columns' and media_count > 1
assign mobile_columns = 2
endif

if media.media_type == 'image'
assign image_class = 'image-magnify-' | append: section.settings.image_zoom
endif
-%}

{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}

{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}

{%- if xr_button -%}

{%- endif -%}
{%- else -%}

{%- endif -%}
{%- endif -%}
11

I replaced all the code with this one you just gave in product-thumbnail, liquid, and the video say like this

woodesther_0-1744161942438.png
woodesther_0-1744161942438.png393×477 73.9 KB