Video settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

The Video settings group provides centralized control for video presentation and playback across your entire storefront. These settings allow you to define consistent standards for embedded and hosted videos, shaping how they look and behave for all visitors. By adjusting these options, you streamline design consistency and user experience, while still retaining flexibility for individual section or block overrides if needed.

⚠️ Important: Setting strong global defaults in Video settings helps promote a cohesive appearance and user experience for all video content.

Video settings

The Video settings group gathers essential configuration options for managing video sources, display ratios, and user controls. These settings enable you to enforce a polished and dependable experience for all video assets throughout the storefront.

Video source URL

Specify a default external video link, accepting sources from YouTube or Vimeo. The default is _https://www.youtube.com/watch?v=9VUPq3SxOc. This URL is used as the video source unless you have provided an uploaded video file.

Using a video source URL harnesses major streaming platforms for reliable delivery and seamless embedding.

Hosted video upload

Alternatively, you can upload a video file from your store’s file library to use as the standard source. This option increases control over playback, site branding, and overall site performance.

Using a custom hosted video is helpful for exclusive content, campaigns, or when you wish to avoid external platforms.

Video poster image

Select a static image to display before the video starts or while it is loading. The poster acts as a preview or fallback, keeping the area visually engaging even if the video cannot be played immediately.

Poster images reinforce your brand and ensure that your video area remains attractive and informative, regardless of playback status.

Aspect ratio

Control the overall shape and proportions of videos for desktop and larger screens.

1. Available options are:

   1. default

   2. landscape

   3. portrait

   4. square

   5. ultrawide

   6. widescreen

2. The default value is default.

Setting a consistent aspect ratio prevents awkward cropping or empty space and ensures visual harmony with other page elements.

Aspect ratio (mobile)

Configure a different aspect ratio specifically for mobile devices.

1. All desktop aspect ratio options are also available:

   1. default

   2. landscape

   3. portrait

   4. square

   5. ultrawide

   6. widescreen

2. The default value is default.

You might consider using a portrait or square ratio for mobile, maximizing visibility and impact on smaller, vertically oriented screens.

Maximum video width

Set the maximum width for videos, controlling their display size.

1. Minimum value is 0 px (meaning unrestricted, which is the default).

2. Maximum value is 1600 px, adjustable in increments of 16 px.

3. The default is 0 px.

Constraining maximum width helps maintain design consistency across varied layouts and device sizes.

Autoplay video

Enable this setting to start video playback automatically when the video loads or becomes visible. The default is off.

Autoplay can create an engaging experience for sections such as hero banners, but browser and device settings may restrict its function if audio is enabled.

Loop video

Check this setting to have videos automatically restart after reaching the end. The default is off.

Looping videos is often used for background animations or sections where a continuous motion enhances visual interest.

Mute video

Control whether video sound is muted on start. The default is enabled.

Enabling mute is strongly recommended if autoplay is active, since most browsers require muted playback for automatic starts.

Show video player controls

Decide whether to display playback controls such as play, pause, and volume. The default is enabled.

Keeping controls visible supports accessibility, helping all users interact with video content as needed.

Usage notes

1. Selecting a high-quality poster image boosts both visual appeal and user experience when a video is loading or unavailable.

2. Separate aspect ratio controls for desktop and mobile screens allow you to optimize video framing for any device, responding to real-world responsive design requirements.

3. Limiting maximum video width helps keep videos proportionate to surrounding content on both large and small screens.

4. Simultaneously enabling both autoplay and loop may be useful for dynamic backgrounds, but always consider overall user expectations and accessibility needs.

5. Displaying video controls is recommended for any informative or instructional video, supporting user autonomy and accessibility.

💡 Tip: Preview your Video settings on different devices and screen sizes to confirm appearance, playback performance, and user accessibility.

⚠️ Important: While these global defaults support strong consistency, adjust settings at the section or block level wherever unique behaviors or presentations are needed.

Setting up the Video settings group provides a strong foundation for a unified, accessible, and responsive video experience in your storefront.