Need Help: Play Video on Hover Instead of Secondary Image (Code-Level Support)

Technical Q&A
, ,

Topic summary

Goal: Replace the secondary image on product cards with an auto-playing video when hovered.

What was tried: Placing a video as the second media after the main image. It didn’t work for this store/theme.

Key guidance:

  • Some Shopify themes support showing a video as the hover media if it’s the second slot in product media.
  • If not supported, custom coding is required within the product card template. CSS alone isn’t sufficient.

Requests/next steps:

  • Share store URL and password (if applicable) so contributors can review and provide a tailored code solution.
  • One responder offered to handle it via collaborator access; provide collaborator request code and store URL.

Status: No code solution posted yet. The issue remains open pending store details and a custom implementation.

Summarized with AI on December 10. AI used: gpt-5.
1

Hi everyone,

I need some assistance at the code level for my Shopify store.
Right now, when a customer hovers over a product card, the theme shows the secondary image. Instead of this, I want a video to automatically play on hover.

Is there a way to implement this using custom code?
If anyone has a code snippet, tutorial, or guidance on how to achieve hover-to-play video on product cards, it would be greatly appreciated.

Thanks in advance!

1 Like
2

Hey @gh0st

In the product media, have you tried to put the video in the second slot after the main product image? Some theme support that feature by default so give that a try.

If that doesn’t works then yes custom coding would be required indeed.

Best,
Moeed

3

Hey @gh0st,

Welcome to Shopify Community,

Could you please share your store url and password [if applicable] so that I can take a look and provide you with the solution code.

Thanks

4

Thanks for the message. Indeed, yes I did it the same way you said but it didnt work.

6

Then yep custom coding would be required within your product card file as it’s not only only possible with only CSS so drop your collaborator request code along with your store URL and I’ll get that sorted out for you.

Best,
Moeed