Retina includes a Video section to enhance your pages. This section is ideal for storytelling, social proof, and demonstrating the value of your product and brand.
Video Section Settings
Click the Video section to open its settings.
Aspect ratio
An aspect ratio is the ratio of its width to its height. In the video section, select one of two options for the Aspect ratio setting: 16:9 and 4:3.
Enable Video Autoplay and Looping
For product videos, activate autoplay by selecting enable Autoplay video. Repeat the video automatically at its end by activating Autoloop video.
Mute Video
Enable Mute video to disable the sound by default. Customers can still unmute the video with the player's controls.
Darken Video
Reduce the brightness of the video by selecting Darken video. There is also an Overlay feature to consider as an alternative.
Add the Video Link
There are two options for connecting a video: Video link and HTML5 MP4 File URL.
Video link
Add a YouTube or Vimeo URL to the Video link field to connect it with the section.
HTML5 MP4 File URL
Upload your video file to the Files portion of your Shopify Settings, then connect it with the section using the HTML5 MP4 File URL field.
Connect an MP4 file
- In the Shopify admin editor, open Settings
- Open Files
- Click Upload files
- Locate the file on your device
- Once uploaded, click the Link icon to copy the file URL
- Paste this URL to the HTML5 MP4 File URL field
Add Cover Image
Click Select Image to add a static image as a cover for the video. Merchants often use this to highlight a particular shot or frame from the video.
Overlay
Add text and an overlay to add clear messaging to your video section.
Show text when video is playing
Activate Show text when video is playing to have the text remain visible while the video plays. Leave this disabled to limit the text to before the video plays.
Headings
Add an optional Heading and Subheading with the provided fields.
Text position
Control the position for the text by selecting an option from the Text position dropdown.
The options are:
- Top left
- Top center
- Top right
- Center left
- Center
- Center right
- Bottom left
- Bottom center
- Bottom right
Overlay opacity
Use the Overlay opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting to 0%.
Colors
Select an Overlay color and Text color. These should contrast one another for the best results.
Add a Button
Pair a call-to-action button with the Play video button by adding text to your Button label field and connecting a page URL with the Button link field.