I’m not familiar with the crave theme, but as a Shopify theme it should use Dawn as its base and therefore the class names should be the same. Easiest thing to do to check is to duplicate your theme and then follow the first part of each of the instructions, go to the file and search for the tag that will be replaced if all the tags are there id give it a shot, but if you are not familiar with code and you hit a snag you’ll need a coder.
Topic summary
Goal: Autoplay short product videos as the secondary media on collection cards (on hover) and autoplay on the product page.
Core solution (Dawn v6):
- Place the product video as the second media item. Browsers block autoplay with sound, so videos must be muted.
- Update CSS (base.css, component-card.css) to treat video like the secondary image and reveal it on hover.
- In card-product.liquid, render the second media with video_tag (muted, loop, autoplay, no controls).
Key limitations/notes:
- No hover on mobile devices, so this effect won’t trigger on handhelds.
- Works on Dawn; other themes (Lorenza, Crave, Taste) may differ and need theme-specific adjustments. One user broke images on Taste; use the code editor’s “Recent changes” to revert and always duplicate your live theme before editing.
Latest update (Dawn 13):
- Updated Gist adds JS to play on mouseenter and pause on mouseleave, preventing background playback. Users can add video.currentTime = 0 on mouseleave to reset to start.
- Another tweak allows media in any order (images/videos not restricted to 2nd slot).
Open items:
- Product page autoplay: still inconsistent (works with thumbnail carousel, not with two-column layout). Thread remains partially unresolved.