Add a Video section to play videos hosted on YouTube, Vimeo, or your Files admin.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Video.
Customize section settings
Click Video to open general settings for the section.
Content width
Select Regular, Wide, or Full width to control the Content width (horizontal space occupied by the video section).
Connect video
Your video must be uploaded to your Files or hosted by YouTube or Vimeo.
To connect a video uploaded to your store's Files, click Select video below Shopify-hosted video.
To connect a video hosted by YouTube or Vimeo, add the video link to the URL field.
Aspect ratio
Control the video dimensions by selecting 16:9, 21:9, or 4:3 for the Video aspect ratio setting.
Playback
For the Playback setting, select Play button to have the customer control the video. Select Autoplay to have the video start playing automatically.
Repeat the video automatically at its end by enabling Play video on loop.
Select Mute video to disable sound for the video.
Cover image
Click Select image to connect an image to show before the play button is activated.
For the best results, select an image with the same aspect ratio selected for the Video aspect ratio setting.
Colors
Customize the Play button color, Text color, and Image overlay color. Adjust the Image overlay opacity slider to control the color's level of transparency.
Margins
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Add heading and text content
There are two blocks included in the Video section: Heading and Text. Customize the preloaded blocks and add more by selecting (+) Add block.
Heading block
Click the preloaded Heading block to customize its content.
Add a Heading by customizing the provided field. Adjust the Heading size and Mobile heading size to increase or decrease the font size.
Text block
Click the preloaded Text block to customize its content.
Add Text by customizing the provided field. Adjust the Text size and Mobile text size to increase or decrease the font size.
Changelog
December 3rd, 2024
- Updates to link hover states and animations
November 6th, 2024
- Minor bug fixes.
September 25th, 2024
- Video added to Theme Sections.