Step-by-Step Guideline: 👇
Step 1: Navigate to the Publish tab ➔ On-site ➔ select Product Pages/ Other Pages tab ➔ Select the page you would like to add a background video to.
Step 2: Click on the page ➔ You will be redirected to the product details page ➔ Add video widget
Step 3: Choose whether you want to create a new video component or would like to re-use an existing one.
You can re-use other page components with a single click if you have already created them. It will save you time when you want to add videos to many products.
Step 4: Select the video playlist type
If you want to learn more about each video playlist type, check out the manual playlist article & the automated playlist article.
Step 5: If you choose to create a new video widget, simply click on the second option and start selecting your video widget type from the widget theme gallery.
Step 6: Select the format of the video: Fit to screen or Full screen.
Fit to screen = The video will be resized to fit the dimensions of the screen or container in which it is displayed while maintaining the aspect ratio of the original video. This means that the entire video will be visible, but some parts of the video may be cut off if the aspect ratio of the screen or container is different from that of the video.
Full screen = The video will be expanded to fill the entire screen, regardless of the original aspect ratio. This means that the entire video will be visible, but some parts of the video may be stretched or distorted to fit the screen.
The background widget will automatically fit to the screen by default to prevent confusion when the container lacks dimensions.
Step 7: Upload the Fallback image from your computer. This image will be used as a placeholder while your video is still loading.
The placeholder image for a background video should ideally be a high-quality, static image.
The image should have a similar composition or subject matter to the video that will replace it.
The image should have a resolution that is appropriate for the display size.
The aspect ratio of the image should match the aspect ratio of the video that will eventually replace it.
It's recommended to use an image format that is widely supported by most browsers, such as JPEG, PNG, or GIF.
The image file size should be optimized for faster page loading times.
Step 8: Enable color overlay over your background video.
The purpose of the overlay is to adjust the color of the video and create a visually appealing effect.
Step 9: Enable play/pause controls on your background video
You're also able to select between desktop and mobile and implement different settings based on the device the majority of your website traffic comes from.
Step 10: Include video content for both desktop and mobile directly from the product page details.
Step 11: Install the background video on your Shopify pages by following the installation tutorial.
Didn't find what you were looking for?
Check out the rest of our articles, or reach out to our support team by chat or email.