Collection page videos allow brands to enhance their collection pages with dynamic video content, replacing static product images with engaging videos. By incorporating videos into your collection pages, you can showcase your products in a visually appealing and interactive way, encouraging customers to click through to your product pages.
Collection page videos seamlessly integrate with your existing product listings and offer the following features:
Replace product images with videos on collection pages
Limit the number of videos per page to avoid overwhelming customers
Space out videos across the collection page for a balanced presentation
Set-up
Assigning Videos to Products
To assign a video to a product for use on collection pages, follow these simple steps:
Open a Collection grid product videosproject in the Onsite tab.
Navigate to the Videos section in your admin panel
Select the collection you want the product videos you want the video to appear on
Select a product and a video to replace the product's image within the collection grid
**Please note, only products appearing in the selected collections will have a video takeover. If a product is not featured in the collection, the collection product grid will not be affected**.
Once you’ve implemented the code in your liquid, the videos will replace the product images.
Configuring Collection Page Video Settings
To customize the behavior and appearance of collection page videos:
Go to the Design section in your admin panel
Adjust the following settings as needed:
Play mode: Video to play automatically or on click.
Delay: Set a delay before video playback begins (if auto-play is enabled)
Play videos: Choose if videos on the same collection page should play together or one at a time.
Playback mode: Videos should loop or only play a single time.
Show product image when video not playing
Hide videos on mobile
Controls: Add play or mute buttons as needed
Installation:
Please consult with a developer to add the below code or reach out to our support to implement. Exact implementation will depend on your site’s setup for the videos to replace the product images.
Please note, for the video controls and click-through analytics to be functional, the code must be placed above the product card’s <a>
Go to your theme’s liquid section of the main collection product grid
Find the section within the liquid code where the product cards are rendered to identify product card file
Go to the product card’s liquid file and search for an img
Put the provided code in the same container as the image as first
Best Practices
To make the most of the collection page video feature, consider the following best practices:
Select high-quality, visually compelling videos that effectively showcase your products
Use concise videos that quickly capture the essence of the product
Experiment with playback settings to find the right balance for your brand and customers
Regularly update your video content to keep your collection pages fresh and engaging
By following these guidelines and leveraging the collection page video feature, you can create a more dynamic and engaging shopping experience for your customers, potentially increasing product discovery and sales.