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.
1

On my Featured Product it displays a thumbnail of the video instead of auto playing the video of the product. When you click on the thumbnail it takes you to another page to click on the video to play. Is there a way that instead of a thumbnail the video just plays instead?

The website address is: www.helpcomputercentre.co.uk and it’s at the top of the home page.

Thanks in advance for any help :blush:

2

hi @helpcomp

May I suggest these steps:

  1. Go to Store Online-> theme → edit code
  2. Sections/featured-product.liquid
  3. Copy code below after that paste before {% schema %}

Hope can help

EBOOST

3

Unfortunately that didn’t work

4

hi @helpcomp

Did you apply this script? I dont see it on your store. If it is not work you can try to code below?

  1. Go to Store Online-> theme → edit code
  2. Layout/theme.liquid
  3. Copy and insert code below to before tag

EBOOST

5

I removed the code from the first try. Unfortunately the 2nd attempt hasn’t worked either but I’ve kept the code in for you to see. Thanks for your help :slightly_smiling_face:

6

hi @helpcomp

You can try this script below. It seems we need trigger play for video as well.

Hope can help

EBOOST

1 Like
7

Thank you so much, you’re an absolute genius!!!

8

Sorry to be a nuisance, is there a way to get it working on mobile too? Thanks again

9

hi @helpcomp

you can add more CSS below:

EBOOST

10

I really can’t thank you enough! Working perfectly

11

Sorry, being a nuisance again, it’s stopped showing the pictures now on the other featured products

12

hi @helpcomp

all code for only this block. And you need note “#MediaGallery-template–16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87” that is an ID of block. If you remove this block after add it again you need check this ID after update again.

OR

EBOOST

.

13

Unfortunately neither worked, both stop the video playing again

14

hi @helpcomp

you can try to update CSS below:

NOTE: only update .featured-product .product__modal-opener to .featured-product .product__modal-opener.product__modal-opener–video

Hope can help

EBOOST

15

The script worked great for product page video, thank you!
using Dawn v10.0.0

16

Can you please help me by telling where to paste all these codes?

17

Hi @yami1 ,

You can update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Layout/theme.liquid
  2. Copy and insert code to before tag
18

I can’t access the code, can you please put it here again? Thanks!!

19

Hi @ritamopinto14 ,

You try to get code here 2640367/2642389/sections/video_seperata_mobile_deskotp.liquid at main · eboost10/2640367 · GitHub