Video settings

Featured links

1. Shopify documentation on the theme editor
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on using video

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to control how video appears and plays in the theme. You can choose the source, set the visible frame, limit the display width, and decide how much playback control customers have. For a broader overview of where these controls appear, see Shopify documentation on the theme editor

Video source

You can use either a hosted video file or a Vimeo or YouTube link. This makes the group flexible for both direct uploads and videos already published on a supported service. If your video is part of a section, Shopify documentation on sections and blocks explains how section settings are organized.

If you use a service URL, enter the video page link rather than embed code. In the editor, video changes may not appear immediately until you save.

For hosted files, optimize size and bitrate before upload to keep playback smooth, especially on mobile. See Using video.

Choose one intended source for each video area and confirm it displays correctly after saving. This helps avoid confusion during setup when testing different video types.

Poster image

A poster image acts as the preview before playback begins. It is especially useful for hosted video, where a good preview frame can make the video feel more polished and intentional.

Choose an image with framing that closely matches the video. If the crop is very different, the shift into playback can feel abrupt.

Aspect ratio and mobile layout

Aspect ratio controls the video frame shape. This affects how much space the video uses and how consistently it aligns with surrounding content.

Use the main ratio for larger screens, then set a separate mobile ratio only if smaller screens need a different presentation. If mobile is left at Default, it follows the main ratio.

Natural sizing works well when the original video dimensions already fit your layout. Preset ratios are better when you want a consistent look across multiple videos or want the video to line up cleanly with nearby images and text.

Tip

Use portrait or square framing for tighter, editorial-style layouts. Use widescreen or ultrawide framing when the video is meant to feel more cinematic or span a broader layout.

Width

Use the maximum width setting to keep a video contained within a narrower layout. This is helpful when the video should align with text content instead of stretching across all available space.

A width of 0 allows the video to expand to the full available width. That can create more visual impact, but lower-resolution video may appear softer on large screens.

Playback behavior

Autoplay starts the video when it scrolls into view and pauses it after it scrolls out of view. This works best for short, visual clips that support nearby content without asking for too much attention.

Looping is useful for ambient motion, product detail clips, and short repeated demonstrations. For longer videos or videos with a clear start and finish, looping can feel distracting.

Muted playback is usually the safest choice when autoplay is enabled. It keeps the experience less disruptive and avoids unexpected audio.

Note

If the video depends on narration or spoken detail, let customers start playback themselves and keep player controls available.

Player controls

Player controls let customers play, pause, and navigate the video directly. Leaving controls visible is usually the better choice when the video explains a product, shows a process, or includes details viewers may want to replay.

Hiding controls creates a cleaner presentation, but it is best suited to short decorative clips where direct interaction matters less.

Usage notes

1. Review both viewport sizes. Desktop and mobile settings can produce different layout, alignment, visibility, or media behavior, so check both views after you make changes.
   1. Confirm the video still feels balanced next to nearby content on larger screens.
   2. Check mobile separately for crop changes, tighter spacing, or controls that feel too small or too prominent.
2. Treat blank or default values as fallbacks. Leaving a setting blank, transparent, or on its default-style value usually preserves the surrounding styling.
   1. Use explicit colors, gradients, or media overrides only when you want the video area to stand out more independently.
   2. Expect those stronger choices to have a bigger visual impact on the local area.
3. Check media choices for readability. Different media selections can change cropping, loading, fallback, and text contrast around the video.
   1. Be especially careful when desktop and mobile media are set separately.
   2. Make sure the preview frame still supports nearby text and buttons.
4. Choose playback controls to match the content. Use player controls when viewers may need to replay, pause, or inspect details.
   1. Keep controls available for product-focused or explanatory video.
   2. Hide controls only when the clip is short and decorative.