Displaying on product pages

To display videos on product pages, we need to first create a collection. We can either create a new collection, or edit an existing one.

1: Create a collection

Navigate to the Collections area, then click on the Add new collection button.

Give your collection a title and ensure that the Status dropdown is set to Active.

2: Add from video library

Next, click the Add from video library button to include some videos into your collection.

If you have not already added some videos, you can upload them directly, or import them from Instagram and TikTok.

Within the modal, click the checkboxes of all videos you wish to include in the collection. Then click the Import button.

3: Publish your collection

Once you have added some videos, click on the Publish button.

Select the Product Page tab and you’ll have various options. If no rules are set, this collection will be displayed on all product pages. Alternatively, you can search for products by title to only display the collection on specific product pages.

The Product types tab allows you to display the collection on specific product categories.

Tip

If a product does not appear in the dropdown, click on the Sync products button to ensure that all products are loaded.

4: Display on the product page

Next, we’ll open the Shopify theme editor and place the widget into the template. A quick way to get there is to click this product page link.

This opens the product page theme editor. You can hover over the area where you would like to display the CommerceGurus Shoppable Widget and press the Add section or plus icon.

Within the modal select the Apps tab and in that, click CommerceGurus Shoppable Video.

See the video below for a demonstration: