Featured video
Overview:
The Featured Video section is designed to showcase a single featured video such as a product demonstration, promotional content, tutorial, brand story, or customer testimonial. It supports Shopify-hosted videos, YouTube/Vimeo embeds, cover images, accessibility text, responsive media settings, customizable layouts, color schemes, and spacing controls to create an engaging video experience across the storefront.
Section Configuration
Video Settings:
| Setting | Description |
|---|---|
| Shopify Hosted Video | Uploads a video directly to Shopify for native playback. |
| Embedded Video URL | Adds a YouTube or Vimeo video URL for embedded playback. |
| Cover Image | Uploads a thumbnail image displayed before the video starts playing. |
| Alt Text | Defines descriptive text for accessibility and screen readers. Helps improve accessibility and SEO. |
Layout:
| Setting | Description |
|---|---|
| Media Ratio | Controls the video aspect ratio such as Adapt, Square, Portrait, Landscape, or Fit to Box. |
| Desktop Video Height | Controls the video height on desktop devices when Fit to Box mode is selected. Available in Small, Medium, Large, or Full Height. |
| Mobile Video Height | Controls the video height on mobile devices when Fit to Box mode is selected. Available in Small, Medium, Large, or Full Height. |
| Container Layout | Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the featured video section background and content. |
Inner Spacing:
These settings control spacing inside the featured video section.
| Setting | Description |
|---|---|
| Top Padding (Desktop) | Adds spacing inside the top area of the section on desktop devices. |
| Bottom Padding (Desktop) | Adds spacing inside the bottom area of the section on desktop devices. |
| Left Padding (Desktop) | Controls inner left spacing on desktop devices. |
| Right Padding (Desktop) | Controls inner right spacing on desktop devices. |
| Top Padding (Mobile) | Adds spacing inside the top area of the section on mobile devices. |
| Bottom Padding (Mobile) | Adds spacing inside the bottom area of the section on mobile devices. |
| Left Padding (Mobile) | Controls inner left spacing on mobile devices. |
| Right Padding (Mobile) | Controls inner right spacing on mobile devices. |
Outer Spacing:
These settings control spacing outside the featured video section.
| Setting | Description |
|---|---|
| Top Margin (Desktop) | Adds spacing outside the top area of the section on desktop devices by default 60px. |
| Bottom Margin (Desktop) | Adds spacing outside the bottom area of the section on desktop devices by default 60px.. |
| Left Margin (Desktop) | Controls outer left spacing on desktop devices by default 70px.. |
| Right Margin (Desktop) | Controls outer right spacing on desktop devices by default 70px.. |
| Top Margin (Mobile) | Adds spacing outside the top area of the section on mobile devices by default 35px.. |
| Bottom Margin (Mobile) | Adds spacing outside the bottom area of the section on mobile devices by default 35px.. |
| Left Margin (Mobile) | Controls outer left spacing on mobile devices by default 12px.. |
| Right Margin (Mobile) | Controls outer right spacing on mobile devices by default 12px.. |