Product Hero videos are designed to engage customers specifically on Product Detail Pages (PDPs). They differ from the similarly named Hero Videos, which share a similar form factor but do not dynamically respond to product pages. Product Hero videos are unique in that they dynamically pull in all videos tagged with the product the customer is browsing, ensuring the content is relevant and tailored to the customer’s current interests.

When the customer clicks on the floating video thumbnails, they expand into an interactive video carousel. This carousel features videos demonstrating the corresponding product, providing a dynamic and engaging experience that highlights the product's features and benefits.

Let’s run through the steps to set up and use Product Hero videos on your Product Detail Pages (PDPs).

Firstly, gather the videos you wish to feature in your Hero Video set. These could be videos from your Instagram feed, TikTok clips, user-generated content (UGC), or any videos you've uploaded. Make sure these videos are added to your media library for easy access during the setup process.

Use the Add Media button to choose where to add your media from:
​

Ensure that all your product-related videos are properly tagged with the relevant products. This tagging will enable the dynamic pulling of videos associated with the products customers are browsing.

Click to 'Edit media' on a video you've added to your Media Library...

• Begin by typing the name of the product you wish to tag in the video.

• As you type, a list of matching products will appear in the results.
• Click on the appropriate product from the list of results to select it.

• Alternatively, you can copy and paste the URL of the product directly from its product page.

• Once you have tagged the video with the correct product, click to save the changes.

Pro tip:
To make tagging videos easier or to find videos with no tags or the fewest tags, follow these steps:
​
• Navigate to the media library

Filter by Media Type: Use the filter option to select “Media Type” and choose “Video” from the dropdown menu. This will display only the videos in your library.

• Sort the filtered videos by selecting the “Sort by” option and choosing “Fewest Tags”. This will bring videos with no tags or the fewest tags to the top of the list.

By using this method, you can quickly identify and tag videos, ensuring they are properly categorised and easily found for dynamic integration on your Product Detail Pages (PDPs).

From your Visual Shopping Menu navigate to your Hero Product Videos and open the editor to begin customising your Hero product video sets.

Scroll down the settings on the left hand side to customise the appearance of your videos. Start by customising the floating video thumbnails to make them visually appealing and attention-grabbing. Ensure they are strategically placed on your Product Detail Pages (PDPs).

Tailor the appearance of your Hero Video to match your brand’s aesthetic. You have multiple customisation options at your disposal, including adjusting backdrop colours, border colours, carousel layouts, video filters, play button colours etc.. Experiment with these settings to achieve the look that best represents your brand.

Customising Floating Video Positioning: One common customisation involves adjusting the position of the floating video to avoid conflicts with messaging buttons typically found on the bottom right or left of the screen.

Control the ‘Gap’: Adjust the gap from the bottom and side screen edges to ensure the floating video does not interfere with other elements.

By fine-tuning these settings, you can ensure the floating video is unobtrusive and effectively placed.

Explore the customisation settings to tailor the appearance of your Hero Video to match your brand’s aesthetic.

You can preview what your hero video looks like in your backoffice by clicking on the floating video cover:

For stores using Shopify Themes 2.0, you can easily add your Hero Video by using the 'Sauce Hero Product Video Block'.

In your theme editor navigate to your product template you wish to add the Hero Product videos to.

Locate and add the Hero Product videos block to your product template.

Add a section, navigate to the “Apps” menu, select the “Sauce Hero Product Videos” block from the list of available app blocks.

If you have multiple templates, repeat the process to add the Hero Product videos block to each one.

Since the Hero Product videos float above the page, you don’t need to place the block in a specific section. Just ensure it appears within the body of the page.

By following these steps, you can ensure that Hero Product videos are included across all relevant product templates, enhancing the customer experience on each Product Detail Page (PDP).

If your site operates on a different platform or you prefer a more manual approach, use the embed code provided and insert it into an HTML embed block on your product template. This ensures your Product Hero Videos are prominently displayed to visitors as soon as they arrive on your product pages.

Once you’ve followed these steps, your Hero Product Videos should be successfully integrated into your PDPs. This visually engaging feature is now ready to capture the attention of your visitors, providing them with an immersive experience with your products and brand.

Setting up Hero Product Videos on your store’s PDPs is a straightforward process that can significantly enhance the visual appeal, product discoverability, and engagement of your site. By carefully tagging and arranging your videos, customising the display to fit your brand, and correctly embedding the feature on your PDPs, you’ll create inviting and impactful first impressions for your visitors.