Using the Video Section in eComm Performance
Supported Versions: The details shared in this article apply to the updated version of eComm Performance.
How to Use the Video Section
The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance customer's knowledge, either about your brand or by showing products being used or educational videos. This section is an effective way to bring life to your brand and show customers how a product works.
This section supports Youtube, Vimeo, or HTML5 videos and can be featured as a full screen or standard width. Other features include creating a placeholder image, text areas, and buttons. The 'Video' section also has the option to enable autoplay, where supported.
To set up the Video section, go into Customize (your Theme Editor) > Sections > Add Section > Video.
Video Section Settings
The settings in this section determine how this section will look and its layout.
Wide Display
You can enable 'wide display,' which means this section will spread out to the screen's full width. Otherwise, the section will not span its full width:
Aspect Ratio
An 'aspect ratio' is the ratio of its width to its height. There are two options in this section for aspect ratio: 16:9 and 4:3.
Autoplay
If you choose to enable the 'autoplay' setting, your video will automatically play if that is possible. Almost all of the major browsers have created some limitations on videos to prevent autoplay.
Autoloop
If you select the 'autoloop' setting, your video will start over automatically after it has ended.
Darken Video
By selecting the 'darken video' setting, this will add an overlay on top of your video.
Video Link
This is the setting where you add your video link! This section accepts both Vimeo and YouTube links.
Image
You have the option to place a banner image that will display before a viewer clicks the video. 1600 x 900px is the recommended image size.
Show Text on Video
If you enable the 'show text on video' setting, you can add any text or buttons that will display as content as the video plays.
Preheading/Heading/Subheading
The 'preheading,' 'heading' and 'subheading' fields are designed so that you can add text to your video section. If you have an image enabled, the text will automatically appear on the image but will go away once the video starts to play.
Text Position
You can position your text and any buttons that you have added. You can position your text either from the left, center, or right:
Text Alignment
In this section, you can choose where you want to align your text and buttons if you have any. You can align your text either from the left, center, or right:
Display Solid Text Background/Enable Background Transparency
If you have any text that you want to stand out against your video or image, you have the option to 'display solid background' and 'enable background transparency.' Enabling these settings will add a background behind the text and is a good idea if you're looking for more contrast for legibility purposes.
Button Labels/Button Links
You have two optional buttons that you can enable for the 'video' section. 'First button label' and 'Second button label' is where you can enter the text for the button, while 'First button link' and 'Second button link' is where you choose the link for the button.
You also can enable the 'Highlight first button' and 'Highlight second button' settings, which will display your buttons 'filled-in' instead of the outline design.
Examples
Here's how our 'Video' homepage section is set up in our demo shop for eComm Performance.
Section settings
- Wide display - enabled
- Aspect ratio - 16:9
- Autoloop video - enabled
- Video link - YouTube
- Image - added
- Preheading/Heading/Subheading- added
- Text position - center
- Text alignment - center
Mobile Layout
When viewing on a mobile device, the Video section will either stack vertically with the banner image on top of the text and buttons or with the text/buttons displaying on top of the image. This all depends on your mobile settings. When you click to open the video, it will open as a full screen, and the customer can then click the 'X' to return to the homepage.
The 'mobile' settings also give you the option to choose the text position and select different colors for the text if you decide to.
Show Text Below Image
The default setting on a mobile device has the text and buttons displaying below the video/image on mobile. You can choose to display them on top of the image by disabling the 'show text below image' setting.
Text
You can also choose to change the color of the text for mobile devices.
Related Articles
Using the Page Section on the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...Using The Testimonials Section on the eComm Performance
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Testimonials Section The eComm Performance theme includes a 'Testimonials' homepage section, which is an easy way for new visitors to ...Gallery Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Gallery Section The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to ...Map Section on the eComm Performance Guide
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Map Section The eComm Performance theme includes a 'Map' homepage section. This is a great way to give your site a local feeling, and ...Featured Products Section - eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Featured Products Section The eComm Performance theme has a 'Featured Products' section which is an easy way to showcase products and ...