Video

The Video Section enriches your site by visually engaging visitors, offering an immersive way to convey your message, showcase products, or tell your brand's story.

Adding the Video section

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Video Section.
    Click on 'Add section' and select 'Video' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Video section, click 'Save' to implement your adjustments.

Section settings

Video

  • Color Scheme: Select a color scheme to complement your site's design, enhancing the visual appeal of the video section.
  • Source: Select Shopify when video is uploaded from store's files and External when you'd like to add a YouTube or Vimeo video
  • Video URL: Link a video from a URL. This section supports Youtube, Vimeo, and MP4 files, offering flexibility in sourcing your video content. See additional details about using images or video on your shop.
  • External video's aspect ratio: Enter the aspect ratio of the desktop video (e.g., 16:9) to prevent cropping issues.
  • External mobile video's aspect ratio: Enter the aspect ratio of the mobile video (e.g., 9:16) to prevent cropping issues.
  • Show controls: Available for hosted video, external video, and mixed media. Enable standard play/pause controls. When disabled, the video behaves like a background video (autoplayed and muted).
  • Autoplay: Available when Show controls is enabled. When enabled, the video plays automatically, loops continuously, and is muted for consistent browser behavior.

Content

  • Heading: Add a heading to introduce your video or give it context.
  • Text: Include additional text to further describe the video or provide relevant details to viewers.
  • Text Alignment: Align the text to match your design preferences and ensure it complements the video presentation.
  • Content Position: Decide on the placement of the content relative to the video, choosing from above or below the video. This helps in structuring your page layout effectively.
  • Desktop Layout Margins: Adjust the margins for the desktop layout to ensure the video section fits seamlessly within the overall page design.
  • Mobile Layout Margins: Fine-tune the margins for mobile viewers to optimize the video viewing experience on smaller screens.