How to Add a Video as a Product Image in Squarespace

Super excited about solving this one for a client! This solution uses a script in your sitewide Code Injection to pull a video from the “Additional Info” section of a product above the product images. I’ve only ever worked with it in a stacked product image gallery, so I can’t vouch for it in other configurations.

Step 1: Add a video block in “Additional Info”

In the individual product where you want to add the video, click on “Additional Info” and add a video block. If you have other content blocks in the “Additional Info” section, I recommend putting this video block at the very bottom so it doesn’t mess up your formatting. It won’t appear in the “Additional Info” section in the end, but that’s where you need to put it for now.

Save your changes.

Step 2: Add a code to move the video block

Next, navigate to Website/Pages->Website Tools->Code Injection. Paste the following in the Header section:

<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>

Once you save your changes and refresh the page, when you view your product item, the video should have disappeared from the Additional Info section and appeared above your product image(s). Voila!

Note: If you’re using Squarespace 7.0, you need to disable Ajax loading in your site design settings for this solution to work properly.