How can I keep the autoplay feature for videos on mobile with the Dawn theme?

Technical Q&A
, ,
1

Hello,

my store is https://7colors-8972.myshopify.com/

I wanted an autoplaying video for my featured product. I see from the forums this is an ongoing problem (and I think Shopify should definitely address this once and for all in the theme options).

To achieve it I found this solutions in another thread – I added

at the end of theme.liquid and it works perfectly. Genius – if you’re required a click to make the video start, just emulate the click. Love it.

Unfortunately on mobile resolutions (<750px width) the responsive theme just puts an image preview and clicking it opens a lightbox with the video in it. Not exactly a good mobile experience.

How do I preserve the featured product preview block so that it keeps on being a video and not just a preview that opens a lightbox? I’ve been a developer for many years and the css/liquid structure is so dense I can’t figure it out after many hours of staring at the code.

2

To whoever needs this in the future. It’s not perfect but.
section-main-product.css , there is

.product-media-modal__content > *:not(.active), .product__media-list .deferred-media { display: none; }

commenting this out will solve the problem, but will prevent all deferred media to not get loaded until shown, so it’s a hit on bandwidth and also slightly screws up the gallery.

then you can add

.product__media-toggle, .product__media-icon { display: none; }

to your custom css to remove the play icon.

3

@Amidee ,

This is what worked for me.

  1. Create a backup:
  • Go to Online Store > Themes > Edit Code
  • Navigate to Snippets folder
  • Click “+ Add a new snippet”
  • Name it product-thumbnail-backup.liquid
  • Copy ALL content from product-thumbnail.liquid
  • Paste into the new backup file
  • Save the backup file

2. Update the original file:

  • Go back to product-thumbnail.liquid
  • Replace all content with the new code
  • Save changes

3. Add required CSS:

  • Open Sections folder

  • Find main-product.liquid or `base.css’.

  • Add the new styles at the top of the file or if using `base.css’, bottom, without style tags.

  • Save changes

4. If anything goes wrong:

  • Simply copy content from product-thumbnail-backup.liquid
  • Paste back into product-thumbnail.liquid
  • Save to restore previous version

main-product.liquid

product-thumbnail.liquid

{%- 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 -%}

  {%- comment -%}
    Custom video implementation:
    - Replaced deferred-media with direct video element for better mobile/desktop consistency
    - Added autoplay, muted, and loop for background-video-like behavior
    - Wrapped in deferred-media div to maintain styling/layout
    - Removed controls for cleaner look
  {%- endcomment -%}
    {%- if media.media_type == 'video' -%}
    

      
    

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

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