Video Section

The video section displays a video on your page. You can upload a video file directly to Shopify or embed videos from YouTube, Vimeo, or other video hosting services.

Overview

This section lets you add video content to any page. Videos can be uploaded directly to Shopify or embedded from external services like YouTube or Vimeo. You can add a heading and description above the video, and control how the video plays.

Where to Use

  • Homepage: Product demonstrations, brand videos
  • Product pages: Product videos, how-to guides
  • About pages: Company story, behind-the-scenes
  • Collection pages: Collection showcases
  • Any page: Video content needs

Settings

Content

Heading

  • Optional heading above the video
  • Your main message or video title
  • Tip: Keep it concise (5-7 words)

Heading Size

  • Controls the visual size of the heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip: Larger sizes (3XL, 4XL) for more impact

Description

  • Optional text below the heading
  • Supports rich text formatting (bold, italic, links)
  • Tip: Brief description of what the video shows

Text Alignment

  • How heading and description align
  • Options: Left, Center, Right
  • Default: Center
  • Tip: Center works well for most cases

Video

Video File

  • Upload a video file directly to Shopify
  • Formats: MP4, WebM, MOV
  • Note: If both file and URL are provided, the file takes priority
  • Tip: Uploaded videos give you full control

Video URL

  • Enter a video URL from YouTube, Vimeo, or direct link
  • YouTube: https://www.youtube.com/watch?v=VIDEO_ID or https://youtu.be/VIDEO_ID
  • Vimeo: https://vimeo.com/VIDEO_ID
  • Direct: Direct link to video file (MP4, WebM)
  • Note: Only used if no video file is uploaded
  • Tip: YouTube/Vimeo videos don't use your hosting bandwidth

Aspect Ratio

Controls the video's width-to-height ratio:

16:9 (Default)

  • Standard widescreen format
  • Best for: Most videos, YouTube-style content

4:3

  • Traditional TV format
  • Best for: Classic videos, square-ish content

1:1

  • Square format
  • Best for: Social media-style videos, Instagram

21:9

  • Ultra-wide format
  • Best for: Cinematic videos, wide landscapes

Autoplay

  • Video starts playing automatically when page loads
  • Default: Disabled
  • Note: Video automatically mutes when autoplay is enabled (required by browsers)
  • Tip: Use for background videos or attention-grabbing content

Loop

  • Video repeats automatically when it ends
  • Default: Disabled
  • Tip: Good for background videos or short clips

Muted

  • Video plays without sound
  • Default: Disabled
  • Note: Automatically enabled when autoplay is on
  • Tip: Use for background videos or when sound isn't needed

Show Controls

  • Displays video player controls (play, pause, volume, etc.)
  • Default: Enabled
  • Tip:
    • Enable: Users can control playback
    • Disable: Cleaner look, but users can't control video

Layout

Full Width Section

  • Makes the section span the full screen width
  • Default: Disabled (constrained to page width)
  • Tip: Full width for maximum impact

Colors

Color Scheme

  • Select a color scheme for text and background
  • Controls heading, description, and section colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your video

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Video Source Options

Option 1: Upload Video File (Recommended)

How to Use:

  1. Click "Video file" setting
  2. Upload your video file (MP4, WebM, MOV)
  3. Video will be hosted on Shopify

Pros:

  • ✅ Full control over video
  • ✅ No external dependencies
  • ✅ Works offline
  • ✅ No branding from video platforms

Cons:

  • ⚠️ Uses Shopify storage
  • ⚠️ May affect page loading speed
  • ⚠️ File size limits

Best for:

  • Product videos
  • Brand videos
  • Exclusive content

Option 2: YouTube URL

How to Use:

  1. Go to your YouTube video
  2. Copy the URL (e.g., https://www.youtube.com/watch?v=VIDEO_ID)
  3. Paste into "Video URL" field

Supported Formats:

  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID

Pros:

  • ✅ No storage used
  • ✅ Fast loading (YouTube CDN)
  • ✅ Easy to update
  • ✅ YouTube features (captions, etc.)

Cons:

  • ⚠️ YouTube branding
  • ⚠️ Requires YouTube account
  • ⚠️ Dependent on YouTube

Best for:

  • Marketing videos
  • Tutorials
  • Public content

Option 3: Vimeo URL

How to Use:

  1. Go to your Vimeo video
  2. Copy the URL (e.g., https://vimeo.com/VIDEO_ID)
  3. Paste into "Video URL" field

Pros:

  • ✅ No storage used
  • ✅ Professional platform
  • ✅ Less branding than YouTube
  • ✅ Good quality

Cons:

  • ⚠️ Requires Vimeo account
  • ⚠️ Dependent on Vimeo

Best for:

  • Professional videos
  • High-quality content
  • Brand videos

Option 4: Direct Video URL

How to Use:

  1. Host video on your server or CDN
  2. Get direct link to video file (MP4, WebM)
  3. Paste into "Video URL" field

Pros:

  • ✅ Full control
  • ✅ No platform branding
  • ✅ Custom hosting

Cons:

  • ⚠️ Requires hosting setup
  • ⚠️ Bandwidth costs
  • ⚠️ More technical

Best for:

  • Custom hosting solutions
  • High-traffic sites with CDN

Video Playback Settings Guide

Autoplay + Muted

  • Use when: Background video, attention-grabbing
  • Note: Automatically mutes when autoplay is enabled
  • Best for: Hero videos, background content

Autoplay + Loop + Muted

  • Use when: Continuous background video
  • Best for: Ambient videos, background loops

Controls Enabled

  • Use when: Users need to control playback
  • Best for: Product videos, tutorials, important content

Controls Disabled

  • Use when: Clean, minimal look
  • Best for: Background videos, autoplay videos
  • Note: Users can't pause or control video

Common Use Cases

Product Demonstration

  • Video: Product in use
  • Heading: "See It In Action"
  • Description: Brief product overview
  • Settings: Controls enabled, no autoplay
  • Source: Uploaded file or YouTube

Brand Story

  • Video: Company story video
  • Heading: "Our Story"
  • Description: Company mission
  • Settings: Controls enabled
  • Source: YouTube or Vimeo

Background Video

  • Video: Ambient, looping video
  • Heading: (Optional)
  • Settings: Autoplay, loop, muted, no controls
  • Source: Uploaded file
  • Aspect Ratio: 16:9

Tutorial Video

  • Video: How-to guide
  • Heading: "How to Install"
  • Description: Tutorial overview
  • Settings: Controls enabled
  • Source: YouTube

Tips & Best Practices

✅ Do's

  • Optimize video files: Compress videos for faster loading
  • Use appropriate aspect ratio: Match your video's native ratio
  • Add descriptions: Help users understand the video
  • Test playback: Verify video works on different devices
  • Consider autoplay: Use sparingly, only when appropriate
  • Use YouTube/Vimeo: For better performance and no storage use
  • Add headings: Help users understand what they're watching

❌ Don'ts

  • Don't use huge files: Large videos slow down your site
  • Don't autoplay with sound: Always mute autoplay videos
  • Don't skip descriptions: Help users understand the video
  • Don't forget mobile: Test how videos look on phones
  • Don't use low quality: Use high-quality videos
  • Don't ignore loading speed: Optimize video files
  • Don't disable controls unnecessarily: Users may want to control playback

Video File Guidelines

Recommended Formats

  • MP4: Most compatible, recommended
  • WebM: Good compression, modern browsers
  • MOV: Apple format, less compatible

File Size

  • Target: Under 10MB for short videos
  • Maximum: Keep under 50MB if possible
  • Tip: Compress videos before uploading

Video Quality

  • Resolution: 1080p (1920x1080) is usually enough
  • Frame Rate: 30fps is standard
  • Bitrate: Balance quality and file size

Optimization Tips

  • Use video compression tools
  • Consider shorter videos
  • Use appropriate resolution (don't use 4K unless needed)
  • Test file size vs quality

YouTube/Vimeo Best Practices

Getting Video URLs

YouTube:

  1. Go to your video on YouTube
  2. Click "Share" button
  3. Copy the URL
  4. Paste into "Video URL" field

Vimeo:

  1. Go to your video on Vimeo
  2. Copy the URL from address bar
  3. Paste into "Video URL" field

Privacy Settings

  • YouTube: Public or Unlisted (not Private)
  • Vimeo: Public or Password-protected
  • Note: Private videos won't embed

Aspect Ratio Guide

16:9 (Widescreen)

  • Best for: Most videos, YouTube content
  • Common: Standard video format
  • Use when: Standard video content

4:3 (Traditional)

  • Best for: Classic videos, older content
  • Use when: Video is in 4:3 format

1:1 (Square)

  • Best for: Social media videos, Instagram-style
  • Use when: Square video content

21:9 (Ultra-wide)

  • Best for: Cinematic videos, wide landscapes
  • Use when: Ultra-wide video content

Troubleshooting

Video Not Playing

  • Check: Verify video file is uploaded or URL is correct
  • Check: Test video URL in browser
  • Check: Ensure video format is supported
  • Check: For YouTube/Vimeo, ensure video is public

Video Not Autoplaying

  • Check: Enable "Autoplay" setting
  • Note: Video must be muted for autoplay to work
  • Check: Some browsers block autoplay
  • Tip: Autoplay may not work on all devices

Video Too Large/Small

  • Solution: Adjust "Aspect Ratio" setting
  • Solution: Match aspect ratio to your video's native ratio
  • Check: Video container size in layout settings

Controls Not Showing

  • Check: Enable "Show controls" setting
  • Check: Verify setting is saved
  • Note: Controls may vary by video source

YouTube/Vimeo Not Embedding

  • Check: Video URL is correct format
  • Check: Video is public (not private)
  • Check: URL includes video ID
  • Try: Copy URL directly from share button

Video Loading Slowly

  • Solution: Compress video file
  • Solution: Use YouTube/Vimeo instead of upload
  • Solution: Reduce video resolution
  • Solution: Use CDN for direct videos

Mobile Issues

  • Check: Test on actual mobile devices
  • Check: Ensure video format is mobile-compatible
  • Check: Video file size isn't too large
  • Tip: YouTube/Vimeo usually work better on mobile

Related Sections

  • Slideshow - Image/video carousel
  • Hero - Hero banner with video background
  • Image with Text - Image and text content

Next Steps: