How to Create Autoplay Video Hover Effect on Shopify Products: Step-by-Step Guide

In the world of online shopping, making your products stand out is key to attracting customers. One way to do this is by adding a video hover effect. These videos can help showcase your products in a more engaging way, giving shoppers a better idea of what they're buying. Also, these dynamic previews provide shoppers with an immersive experience, enticing them to explore your products further and ultimately buy them. What this custom feature does is makes the video to appear as the secondary image on the collection page and autoplay when hovered over. In this blog, we'll show you how to easily add videos to your Shopify store's product pages.

Implementing autoplay video feature on Shopify, step by step guide is only for down theme:-

Step 1: Start by logging in to your Shopify dashboard where you manage your store.

Step 2 : Once logged in, go to the "Online Store" section to access your store's settings.

Step 3: In the "Online Store" section, find the "Themes" option and select "Edit Code" to customize your theme.

Step 4 :In the "Online Store" section, find the "Themes" option. Click on it, and then select "Edit Code." This will take you to the backend of your Shopify theme.

Step 5 : Look for the "Card-Product.liquid" file in the list of theme files. This is where you'll be making changes to display your videos.

step 6 : Look for the "Card-Product.liquid" for style.

 Find the section of code that deals with displaying product images You will see two image tags next to each other. Replace the second image tag with the code for embedding your video. This will make your video show up where the second product image would normally be.

The below code consists of step 5, 6 :

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% liquid
assign alternateMediaIsVideo = false
if card_product.featured_media.media_type == 'video'
assign alternateMediaIsVideo = true
endif
%}
{% unless alternateMediaIsVideo %}
sizes="(min-width: {{ settings.page_width }}px) {{
settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3)
, calc((100vw - 35px) / 2)"
alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce"
{ % unless lazy_load == false %}
loading="lazy"
{ % endunless %}
width="{{ card_product.featured_media.width }}"
height="{{ card_product.featured_media.height }}"
>
{ % else %}
{{
card_product.featured_media
| video_tag:
controls: false,
muted: true,
loop: true,
autoplay: true,
image_size: '1066x',
class: 'motion-reduce'
}}
{ % endunless %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%}
{ % liquid
assign alternateMediaIsVideo = false
if card_product.media[1].media_type == 'video'
assign alternateMediaIsVideo = true
endif
% }
{ % unless alternateMediaIsVideo %}
sizes="(min-width: {{ settings.page_width }}px) {{
settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px)
calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3),
calc((100vw - 35px) / 2)"
alt=""
class="motion-reduce"
loading="lazy"
width="{{ card_product.media[1].width }}"
height="{{ card_product.media[1].height }}"
> { % else %}
{{ card_product.media[1]
| video_tag:
controls: false,
muted: true,
loop: true,
autoplay: true,
image_size: '1066x',
class: 'motion-reduce'
}}
{ % endunless %}
{%- endif -%}

Step 7: Once you've made the necessary changes, be sure to save your work. This ensures that your video will appear on your product pages.

Step 8: Return to the customization panel in your Shopify admin to further configure the display settings for your product images and videos.

Step 9: Go to the featured collection section in your theme customization settings and scroll down and enable the display of the second image on hover.

Step 10: Click the "Show Second Image Hover" option to enable the hover effect that will enable the auto playing product videos on the collection page.

Thus, by following these steps, you can easily add an autoplay to a product video on product hover on collection page & product page. To make a product video play automatically when you hover over it, whether on the collection page or product page in Shopify, you need to modify the code a bit. You'll add a special tag for the video that tells it to play automatically when it's loaded. You also need to make sure this only happens when there's actually a video to play, and not just an empty space. Finally, you might need to add some extra code to make it all work smoothly, like CSS or JavaScript, to trigger the hover effect and start the video playing. This makes the product preview dynamic easier for users to see what the product is like without having to click on anything, improving their shopping experience.