Skip to main content
All CollectionsVideo WidgetsSetting Up and customizing video widgets
How to create a product gallery video
How to create a product gallery video

Follow these instructions to create, edit and install the product gallery video widget on your Shopify Store.

V
Written by Videowise Support
Updated over a week ago

Follow the instructions below to learn how to create a product video widget: 👇
​

Step 1: Go to the Widgets section ➔ Click New widget ➔ All widgets ➔ Select Product gallery video


​Step 2: Name your widget and start using it.
​

Step 3: Select your page and add video to it.

Step 4: Choose videos from various categories such as uploads, Instagram, TikTok, and YouTube videos as well as Collect and Find UGC → Confirm

Widget design

Content

In the Content section, you'll need to select your product image. You have two options:

  • Change image: You can always change your image by uploading a product image from your computer to use as a placeholder while your video is still loading.

  • Default image: If you don't upload a product image from your computer, we'll automatically use the default image from the product. We no longer use the white default image.

Click "Done" once you finish.

Style

You can choose whether to disable or show the play button.

If you opt to display the play button:

  • Select from four different play button styles.

  • Customize the icon color and background color according to your preferences.

  • Click Save changes

Settings

Player Controls: You have the option to enable or disable starting the video on mute, allowing fullscreen controls, and autoplay.

These settings are enabled by default, and we recommend keeping them enabled for optimal user experience.

Collection page:

Enabling the option to display videos on the collection page will apply videos from your product page to the collection page as well.

Install your widget

You have 2 installation options: Shopify themes and legacy.

Shopify themes

The product gallery video will be placed on the position you've set in the product media gallery.

This option is straightforward, just make sure you choose the position of your widget by going to Settings ➔ General Settings ➔ Gallery Position.

The Product widget settings enable Videowise to play the PDP widget only if found in those specified containers.
​
​How to get it: Those query selectors can be found with right click -> Inspect element on product and collection pages and getting the first container above the Videowise widget <div>
​
​Usecase: When you have enabled a PDP widget to play on collection page, you need this setting so our widget won't start in the recommended products section.

These settings are primarily intended for those assisting the Customer Success team with implementations. The selection of these query options varies for each client.

Once you've chosen the widget's position, go back to Install widget ➔ just click "Mark as installed", and it will be added to your page exactly where you want it.

Make sure in your Shopify theme editor to opt for thumbnails to ensure the play button remains visible on the widget: Navigate to Product Information ➔ Desktop Layout ➔ Thumbnails ➔ Save.

If the new position doesn't seem to have taken effect, it might be due to your browser's cache. Try clearing your cache and refreshing the page (CTRL-SHIFT-R for Windows or Command-SHIFT-R on Mac) to ensure you're seeing the latest version of your store page.

Legacy

Now, let's discuss the legacy option, which involves Videowise generating an image for your desired video.

  1. Download this image

  2. Upload the image to the product photo carousel in your Shopify account.
    ​

Follow the instructions below to complete this process:

Step 1. Navigate to your Shopify admin ➔ Products ➔ Choose your product page ➔ Navigate to the Media section ➔ Click Add image or Add from URL.

Download image: If you choose the legacy option, make sure to upload an image from your computer in the Content section to replace the default one. This image will be downloaded and uploaded in your Media section ( Add image).

Step 2. Upload image or select from existing ➔ Copy image URL ➔ Click Add file.

Step 3. Once the image is uploaded, you can simply drag & drop it to position it within the product media gallery. This determines where the product widget will be installed.

Step 4. You're all done! Go to your product page to see your product video widget in action.
​

Didn't find what you were looking for?
​

Talk to your support team by chat or email.

Did this answer your question?