Featured product video to autoplay instead of thumbnail

Store Design

Topic summary

A store owner wants their Featured Product section to autoplay a video instead of displaying a clickable thumbnail that redirects to another page.

Solution Process:

  • Initial attempts involved adding JavaScript code to featured-product.liquid and theme.liquid files, but these didn’t work initially
  • The working solution required a script that triggers video autoplay, inserted before the </body> tag in theme.liquid
  • Additional CSS was needed to enable autoplay on mobile devices

Complications & Fixes:

  • After implementation, images on other featured products stopped displaying
  • This was resolved by updating CSS selectors to target only the specific video block using its unique ID (#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87)
  • The final fix involved modifying .featured-product .product__modal-opener to .featured-product .product__modal-opener.product__modal-opener--video

Outcome:
The solution successfully works on both desktop and mobile. Code snippets are available on GitHub for reference. Other users confirmed the script works on Dawn theme v10.0.0.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
10

I really can’t thank you enough! Working perfectly