Step-by-Step Guideline: 👇
Step 1: Go to the Widgets section ➔ Click New widget ➔ All widgets ➔ Choose Ambient video
Step 2: Click the three dots icon and select rename widget to name your widget and start using it.
Step 3. Select a video to serve as the background for desktop and mobile view.
Step 4: Widget design - select the format of the video: Fit to screen or Fill container.
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.
Fill container = 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. You will need to define a container height in your Shopify theme code.
Step 5: 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 6: Enable display play/volume/Full screen controls on your background video, you can also change the Icon size and position.
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 7: Install the background video on your Shopify pages by following these installation steps:
Follow the instructions below to learn how: 👇
Step 1: Navigate to the Widgets section → Select the widget that you want to install → Publish widget
Published widget
You will be guided toward two options:
👉 Published with Shopify themes
👉 Published with HTML code
Step 2: Go to your Shopify store. Under Online Store → click Themes → Customize
Step 3: In the App embeds tab enable the Videowise app extension.
Step 4: Go back to the Sections tab and select the page from the Search Bar
Step 5: Click Add Section (to add a new section to the page) on the left menu, or Add Block (to add a block in an already existing section).
Step 6: In the search tab, type Videowise, and select Videowise Videos from the apps.
Step 7: A Videowise Embed section has popped up ➔ Go back to the Videowise app ➔ Copy the code from the Published tutorial page ( Step 1) ➔ Paste it here
Step 8: Click Save when you are ready and it’s done!
Pro tip: After installing any widget, please perform a hard reload (CTRL-SHIFT-R for Windows or Command-SHIFT-R for Mac) on the page with the installed widget in order to refresh the cache and thus making sure you are seeing the latest version of the page