Add a video instead of an image in the product page's main images slideshow

Add a video instead of an image in the product page's main images slideshow


We want to display our video intro in all the product pages right before the main image shows up.

The video link is: https://youtu.be/DGGouJ4F_kU

Sample product page: https://www.fadstop.com/products/2018-best-selling-adorable-talking-hamster

How can we do that?


Hi, one way to do it is to add the video link inside the ALT of the product image. This will replace the main product image and play a video. Here's an example: 



You need to use the youtube.com EMBED video script, for example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/k5X93J4Z384" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can make the width/height bigger if needed. You can even make it auto-play when the page load.

Here's an example of a larger video that auto-plays using the following embed code:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/k5X93J4Z384?&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    • Related Articles

    • How to add custom colors into the color swatches for variants/options on the product page

      When I add a single color name like red, green it works fine but when the color name is like dark grey, indigo blue it's not showing up any color? You need to create custom colors from theme settings. If you want to define the Dark grey color, please ...
    • Product Page Upsell

      1) HOW DOES IT WORKS? Create a navigation menu called Product upsell. The handle needs to be: product-upsell 2) WHERE IS IT DISPLAYED? In a specific product page: Add a menu item and name it following this structure: products/product-handle And/Or In ...
    • Recommended image sizes for the slideshow

      Our theme allows you to upload different images for the slides on desktop versus on mobile. Then you can decide if you display those images on desktop only, desktop & mobile or mobile only. Desktop image sizes recommended FLEXIBLE SLIDESHOW SECTION ...
    • Latest releases of the Konversion theme

      Versioning logic - Version X.Y.Z X means a major change in theme due to a change in Shopify's core Y means a big enough change that involves new key features and/or big change/fix X means small bug fixes and small features release. Make sure you have ...
    • Custom page design with builder

      Create a custom page Create a new page and select a page template bottom left. You have 5 custom page templates by default. Which means you can create 5 different custom page templates. Here's an example of a page created with the Page Builder ...