Using video

Featured links

1. Company XYZ documentation on videos settings
2. Company XYZ documentation on section backgrounds settings
3. Shopify documentation on uploading and managing files
4. Shopify documentation on adding product media
5. Shopify documentation on accessibility for themes

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Align supports video across standalone media areas, section and banner backgrounds, product galleries, slideshows, navigation promos, and mixed-content layouts. Most placements use the same core controls for video source, framing, playback, posters, and overlays, although setting labels can vary by context.

Use this guide to prepare videos and choose practical settings in your Shopify store. For setting-specific details, see Video settings and Section background settings.

Choose a video source

Most Align video areas support one of three source types.

1. Shopify-hosted video
   1. Upload or select a file from your Shopify store files.
   2. Use this option when you need control over encoding, looping, file size, or background-style playback.
   3. Hosted video is required for section, banner, and hero background video treatments.
2. YouTube
   1. Paste the video page URL, not embed code.
   2. Use YouTube when the video already lives there and provider hosting meets your needs.
3. Vimeo
   1. Paste the video page URL, not embed code.
   2. Use Vimeo when the video already lives there and provider hosting meets your needs.

For file-upload steps, see Shopify documentation on uploading and managing files

Use one intended source for each video area. If both a hosted file and a service URL are available, the hosted file takes precedence. Clear the unused source to avoid ambiguity. External-video changes may need to be saved before the Shopify theme editor preview matches the storefront.

Tip

External videos load the poster first. The full player loads only after interaction or when an autoplay video becomes visible.

Prepare hosted video files

File weight directly affects loading time, especially on mobile. Shopify delivers hosted video with adaptive streaming (HLS), but encoding at a lower bitrate can still improve PageSpeed and perceived performance. Smaller source files remain important even when streaming is available.

Understand bitrate

Bitrate is the amount of video data encoded each second.

1. Higher bitrate provides sharper motion and detail, but creates larger files and heavier page weight.
2. Lower bitrate creates lighter files that start faster, but can reduce detail in fast-moving or dark scenes.

Most encoders show bitrate in kbps or Mbps. Treat it as a balance between visual polish and performance, rather than as a single maximum-quality setting.

Start with these encoding targets

1. General use — Use about 2500 kbps for standalone videos, hero clips, product media, and full-width section backgrounds.
2. Small or compact placements — Use about 1000–1500 kbps for menu promos, search banners, footer media, collage tiles, and other narrow frames.
3. Background and ambient clips — Keep files short, loop-friendly, and visually simple. These videos usually autoplay muted and should feel lightweight rather than cinematic.

Match the resolution to the size at which the video displays. A 1080p or 4K master shown in a small banner adds bandwidth without improving the visible result.

Autoplay surfaces, including backgrounds, slideshow videos, and featured hero clips, are especially performance-sensitive. Use short clips, muted playback, and conservative bitrates.

Use video in different placements

The same video concepts apply across many Align editor locations. These groups describe common roles rather than every individual section.

1. Standalone video areas
   1. Includes dedicated video sections and video blocks in mixed layouts.
   2. Supports hosted, YouTube, and Vimeo sources.
   3. Works well for demos, brand stories, explainers, and editorial media with optional captions and buttons.
2. Section and banner backgrounds
   1. Adds decorative motion behind headings, banners, heroes, and promotional content.
   2. Uses hosted files only.
   3. Usually autoplays muted, loops, and hides controls.
   4. May support separate desktop and mobile background files when screen sizes need different cropping.
3. Product imagery
   1. Includes product gallery video on product pages and featured-product areas.
   2. Can include optional hover video on product cards when hover media is enabled.
   3. Poster frames and playback controls are especially useful here because shoppers expect deliberate playback.
4. Slideshow and carousel media
   1. Video can replace or override slide imagery.
   2. Clips typically autoplay when their slide becomes active, so keep them short enough to feel intentional within the sequence.
5. Compact promo surfaces
   1. Includes small banner-style placements in navigation, search, and other high-density areas.
   2. These placements are the most sensitive to high bitrate and large file sizes.

For product gallery upload steps and supported media types, see Shopify documentation on adding product media

When a video feels heavy, check its placement first. A file that works well in a full-width hero may still be too large for a menu banner or card-sized frame.

Configure playback

These controls appear across video sections, video blocks, and other media-driven Align surfaces.

1. Autoplay
   1. Starts playback when the video enters view and pauses it after the video leaves view.
   2. Best for short ambient clips that support nearby content.
   3. Requires muted playback during normal storefront use.
2. Loop
   1. Repeats the clip continuously.
   2. Works well for backgrounds and short motion accents, but can distract from narrated or story-driven video.
3. Mute
   1. Keeps audio off until the shopper enables it through player controls.
   2. Autoplay-enabled videos are muted by default.
4. Show video player controls
   1. Shows native or provider controls for play, pause, scrubbing, volume, and fullscreen where supported.
   2. Keep controls visible for explainers, demos, and videos shoppers may want to replay or inspect closely.
   3. You can hide controls for decorative clips. On many surfaces, click and keyboard interaction still work when controls are hidden.

Note

If a video depends on spoken detail, turn autoplay off and keep controls visible so shoppers can choose when to listen.

Set posters, aspect ratio, and width

1. Poster image
   1. Provides an optional preview frame before playback starts.
   2. It is especially useful for hosted video and polished first impressions.
   3. External videos use provider thumbnails when no custom poster is set.
2. Aspect ratio
   1. Controls the visible frame shape on desktop and, where available, mobile.
   2. Use Default when the source dimensions already suit the layout.
   3. Set a separate mobile ratio only when phones need a different crop.
3. Maximum width
   1. Prevents a video from stretching wider than intended within a content area.
   2. A value of 0 uses the full available width.

Choose a poster that closely matches the video crop. This creates a smoother transition when playback begins.

Add overlays and controls-free playback

Many video areas support a color or gradient overlay and an Overlay style setting.

1. Show when paused
   1. Shows the overlay before playback and after a shopper pauses the video.
   2. Keeps playback visually clean while the video is running.
   3. Automatic viewport pauses on autoplay videos do not count as shopper pauses.
   4. This is the default for many video surfaces.
2. Always show
   1. Keeps the overlay visible over both the poster and playing video.
   2. Use it when the tint is part of the design, such as an editorial or branded treatment.
   3. This option forces controls off, regardless of Show video player controls.

When controls are hidden, many hosted and Vimeo videos can still start from the poster, then pause or replay through click or keyboard interaction. YouTube keeps its provider-owned play affordance rather than adding a second theme play icon.

Use overlays with strong text contrast. See Section background settings when video appears behind headings, buttons, or body copy. For broader guidance, see Shopify documentation on accessibility for themes

Understand built-in performance behavior

Align helps keep video polished without loading every player immediately.

1. Poster-first loading
   1. External videos show a poster before creating the live player.
   2. Non-autoplay videos wait for interaction before loading the full embed.
2. Viewport-aware autoplay
   1. Autoplay players defer creation until the video enters view where possible.
   2. Autoplay pauses when the video leaves view.
3. Lighter hosted defaults
   1. Non-autoplay hosted videos avoid eager preloading.
   2. Background videos defer source loading where appropriate and use preview-image posters when available.
4. Reliable refreshes
   1. Video behavior resets after grid refreshes and editor reloads, preventing stale players after updates.
5. Product-card coordination
   1. When a product card has both primary and hover video, only one clip plays at a time.

These behaviors are automatic. Your main performance controls are file weight, placement, autoplay choice, and clip length.

Example scenarios

1. Hero background loop
   1. Use a hosted 6–10 second ambient clip encoded at around 2500 kbps or lower.
   2. Keep it muted and looping, strengthen the overlay for text, and add a mobile-specific file only if desktop cropping fails on phones.
2. Product demo video
   1. Use hosted video or a service URL with controls visible, autoplay off, and a custom poster frame.
   2. Choose a widescreen or default ratio that matches the gallery layout.
3. Navigation promo banner
   1. Use a compact hosted clip encoded at around 1000–1500 kbps.
   2. Keep the motion simple, avoid narration, and verify mobile performance because the visible frame is small.
4. Editorial video with tint
   1. Use Always show overlay style when a color wash is part of the design.
   2. Keep the clip short and confirm text contrast remains strong during playback.
5. External explainer
   1. Use a YouTube or Vimeo page URL with autoplay off, controls on, and a custom poster if the default thumbnail crop is weak.
   2. Let poster-first loading support performance while shoppers decide whether to press play.

Usage notes

1. Encode before upload. Bitrate and resolution matter more than relying on streaming alone.
2. Use hosted files for backgrounds. YouTube and Vimeo work for standalone and block-based media, not decorative background treatments.
3. Keep motion backgrounds short. Background and slideshow videos should communicate clearly without sound or demanding attention.
4. Check mobile separately. Background files, aspect ratios, and overlays can behave differently on smaller screens.
5. Preview after saving. External video changes may not fully appear in the editor until you save and view the storefront.