The Video section is a cinematic, full-bleed media container built to bring high-energy sneaker campaigns, streetwear lookbooks, unboxing reels, and brand origin stories to life on your storefront. Whether configured as the main hero banner at the very top of your homepage or embedded between product drops, this section delivers broadcast-quality motion graphics without sacrificing page loading performance.
Powered by Sneax’s modern Shopify OS 2.0 block architecture, the Video section allows you to layer real-time titles, subheadings, countdown drop clocks, and animated call-to-action buttons directly over the playing video.
Accessing the Video Section Settings #
- From your Shopify Admin, navigate to Online Store > Themes.
- Click Customize next to Sneax.
- In the top template selector, open the template where you want the video banner (e.g., Home page).
- In the left-hand sidebar, click (+) Add section and select Video (or click an existing Video section).
- Add individual Theme Blocks (such as Title, Subtitle, Text, Button, or Countdown) underneath the section to layer your message over the video.
1. Media Sourcing & Device Pairing Settings #
Choose how your video is hosted and provide independent media for desktop versus mobile screens:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Source | Select | Uploaded | Uploaded, URL, Image | Governs video delivery: Uploaded MP4 file, YouTube/Vimeo streaming link, or static photograph. |
| Video (Desktop) | Video Picker | Blank | MP4 / WebM file | Upload a wide (16:9) video file to Shopify Files for high-performance desktop playback. |
| Video URL (Desktop) | Video URL | Default link | YouTube / Vimeo URL | Streaming link from YouTube or Vimeo for desktop displays. |
| Fallback image (Desktop) | Image Picker | Blank | Image file | Static photograph used if video hosting is disabled or loading. |
| Mobile video | Video Picker | Blank | MP4 / WebM file | Dedicated vertical video file tailored specifically for smartphone screens. |
| Mobile video URL | Video URL | Default link | YouTube / Vimeo URL | Mobile-specific YouTube or Vimeo streaming link. |
| Mobile fallback image | Image Picker | Blank | Image file | Dedicated vertical photograph for handheld displays. |
Tri-Source Video Delivery #
- Uploaded (Recommended): Uploads MP4 or WebM video files directly to Shopify’s global CDN. Provides the fastest hardware-accelerated playback with zero third-party video ads, watermarks, or cookies.
- URL: Embeds an external stream from YouTube or Vimeo. Sneax includes custom two-way JavaScript integration that synchronizes play/pause and mute controls seamlessly.
- Image: Disables video playback and displays a high-resolution photograph with responsive WebP scaling.
Dedicated Desktop vs. Mobile Video Pairing #
A wide landscape (16:9) video that looks great on computer screens often looks tiny or awkwardly cropped on a vertical smartphone screen. Sneax solves this by offering separate Mobile video and Mobile video URL upload slots. You can provide an expansive 16:9 video for desktop and a full-bleed vertical 9:16 video reel for mobile phones!
2. Playback, Audio & Interactive Controls #
Control how your video plays, loops, and sounds across different browsers:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Autoplay | Checkbox | Disabled | Toggle | Starts video playback automatically as soon as the page loads. |
| Loop | Checkbox | Enabled | Toggle | Automatically restarts the video from the beginning for an infinite seamless loop. |
| Muted | Checkbox | Disabled | Toggle | Silences video audio by default. |
Browser Autoplay Compliance #
Global web browser security standards (Apple Safari, Google Chrome, iOS, Android) mandate that videos must be Muted for automatic playback to function. If you turn on Autoplay, you must also enable Muted.
Floating Play/Pause & Mute/Unmute Controls #
When a video is playing, Sneax renders sleek, semi-transparent floating control buttons:
- Play/Pause Button: Positioned in the top-left corner, allowing visitors to pause or resume playback at any time.
- Mute/Unmute Button: Positioned in the top-right corner, letting shoppers unmute audio with a single tap.
3. Aspect Ratio & Overlay Contrast Settings #
Customize container proportions, text overlay alignment, and readability tints:
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Desktop aspect ratio | Select | 16/9 | 16/9, 1/1, 3/2, 4/3, unset | Controls the aspect ratio container on desktop screens. |
| Mobile aspect ratio | Select | 2/2.5 | 2/2.5, 2/3, 2/4.5 (9:16), 2/5, 1/1, 3/2, 16/9, 4/3, unset | Controls the aspect ratio container on mobile phones. |
| Overlay color scheme | Color Scheme | scheme-1 | Theme Schemes | Sets the color scheme used for the text card and tint. |
| Overlay opacity | Range Slider | 80% | 0% – 80% (step 5%) | Darkness of the protective color overlay placed over the playing video. |
| Desktop content position | Select | Middle-center | 9 Screen Anchors | Governs where overlaid text and buttons sit on desktop monitors. |
| Content direction | Select | Horizontal | Horizontal, Vertical | Controls whether child blocks arrange in a side-by-side row or vertical stack. |
| Section width | Select | Page-width | Page-width, Full-width | Set to Full-width for an edge-to-edge cinematic hero banner. |
| Top padding | Range Slider | 0px | 0px – 200px (step 5px) | Vertical spacing above the video. |
| Bottom padding | Range Slider | 0px | 0px – 100px (step 1px) | Vertical spacing below the video. |
Protecting Text Legibility with Overlay Opacity #
Videos often alternate between bright and dark scenes, which can make white text hard to read. The Overlay opacity slider applies a tinted color film between 0% (completely transparent) and 80% (solid dark tint). Setting opacity between 20% and 40% preserves video vibrancy while ensuring your headlines and buttons remain razor sharp.
9 Desktop Content Anchors #
Use Desktop content position to anchor your text and call-to-action buttons away from focal points in your footage:
Top-left,Top-center,Top-rightMiddle-left,Middle-center(Default),Middle-rightBottom-left,Bottom-center,Bottom-right
4. Content Customization with Theme Blocks #
Because Sneax leverages Shopify’s modular OS 2.0 block architecture, the Video section accepts any universal Theme Block (@theme) or App Block (@app).
Click (+) Add block under the Video section to layer interactive elements:
- Subtitle Block (
subtitle): Add an uppercase kicker tag (e.g., “AUTUMN / WINTER LOOKBOOK”). - Title Block (
title): Add bold campaign headlines (e.g., “THE RETRO ARCHIVE”), with multiline formatting and scale options fromH1toH6. - Text Block (
text): Add supporting editorial narrative copy with adjustable opacity. - Countdown Block (
countdown): Display a live drop timer over the video to build hype for limited sneaker releases. - Button Block (
link): Insert call-to-action buttons (e.g., “SHOP THE LOOKBOOK” or “ENTER RAFFLE”) equipped with 9 animated vector icons. - Group Block (
group): Bundle multiple buttons together to display side-by-side dual CTAs (e.g., “Shop Men” + “Shop Women”).
5. Spacing & Mobile Optimization #
- Desktop Spacing: Fully adjustable top padding (
0px–200px) and bottom padding (0px–100px). Set both to0pxfor seamless edge-to-edge banners. - Mobile Auto-Halving: Top and bottom padding values are automatically reduced by 50% on mobile screens (
< 767px). - LCP Performance Boost: When the Video section is positioned as the first section on your homepage (
section.index == 1), Sneax automatically sets media preloading toeagerwithfetchpriority="high"to maximize Core Web Vitals.
Sneaker Store Best Practices #
- Upload Compressed 1080p MP4 Videos:
- For background hero loops, keep video clips between 6 and 15 seconds long. Compress files using tools like Handbrake to keep the file size under 10MB for instant playback on mobile networks.
- Provide a Dedicated 9:16 Vertical Reel for Mobile:
- In the Mobile video setting, upload a vertical 9:16 video clip and set Mobile aspect ratio to
2/4.5 (9:16). This turns your mobile homepage into an immersive, full-screen TikTok/Reels-style experience.
- In the Mobile video setting, upload a vertical 9:16 video clip and set Mobile aspect ratio to
- Layer a Live Drop Countdown Over Video:
- When preparing for a high-heat sneaker drop, layer a Countdown block directly over a looping teaser video clip with a Button block (“Set Drop Reminder”). This creates unmatched visual urgency.