Jump to content

How to add a video as product images

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
33 minutes ago, BurakD said:

How to add a video as product images

It isn't currently possible to place videos in the Images section of a Product Page, but you can add them to the Additional Info section of the page by adding Video Blocks. These guides should provide you with more information.

Did this help? Please give feedback by clicking an icon below  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • 4 weeks later...

Can anyone help me replace the Product Image with a Video?

I've tried several workarounds, but to no avail. If it's indeed possible to feature a video in place of the image, that would be best, but I won't assume it's an easy customization. So, a compromise we could probably live with would be to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages, i.e. above both the product info and product image. (Full page width is fine for the video; if only it were possible to add a section to the top of a product page!)

If you visit http://peoplepoweredgiftcards.com/marketplace/p/viewpoint-brewing-co you will see that I've added an Additional Info block (in this case an embedded video). So, that's my starting point. Any help would be much appreciated. Thanks in advance!

Link to comment
  • 5 months later...
On 2/9/2023 at 8:55 AM, dadocinqo said:

Can anyone help me replace the Product Image with a Video?

I've tried several workarounds, but to no avail. If it's indeed possible to feature a video in place of the image, that would be best, but I won't assume it's an easy customization. So, a compromise we could probably live with would be to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages, i.e. above both the product info and product image. (Full page width is fine for the video; if only it were possible to add a section to the top of a product page!)

If you visit http://peoplepoweredgiftcards.com/marketplace/p/viewpoint-brewing-co you will see that I've added an Additional Info block (in this case an embedded video). So, that's my starting point. Any help would be much appreciated. Thanks in advance!

I'm a bit late but yes, you can accomplish this with our Product Gallery Video Plugin.

 

Founder - SQSPThemes.com

 

Link to comment
  • 2 months later...
On 2/9/2023 at 7:55 AM, dadocinqo said:

to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages

Hi, not sure if you ever solved this. I just came up with a solution for a client that works perfectly. If you add a video block in the Additonal Info section, this code pops the video above your image gallery. You need to add it to your sitewide Code Injection, in the Header Code area:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-block-video").insertBefore('.ProductItem-gallery-slides');
  });
</script>

You can see the result live here: https://ademiboutique.squarespace.com/shop/paris. This is a 7.0 Brine site but as far as I can tell should work the same on 7.1. I can only vouch for it working with a single video block in the Additional Info section. Hope this helps though it was a while ago you asked the question!

Link to comment
  • 1 month later...
On 9/27/2023 at 3:40 PM, Inscape said:

Hi, not sure if you ever solved this. I just came up with a solution for a client that works perfectly. If you add a video block in the Additonal Info section, this code pops the video above your image gallery. You need to add it to your sitewide Code Injection, in the Header Code area:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-block-video").insertBefore('.ProductItem-gallery-slides');
  });
</script>

You can see the result live here: https://ademiboutique.squarespace.com/shop/paris. This is a 7.0 Brine site but as far as I can tell should work the same on 7.1. I can only vouch for it working with a single video block in the Additional Info section. Hope this helps though it was a while ago you asked the question!

Hmm... this didn't work for me, but I wonder if it's the new site style (I created my site in May 2023 I think)... 

If anyone has follow-ups on making this work on the latest version of Squarespace, I'm all ears! Thanks.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.