Video

The video section plays one video in a panel, with an optional heading and text above it. Use a video uploaded to Shopify, or link a video on YouTube or Vimeo. Nothing plays until the shopper presses play.

Add the section

Online Store → Themes → Customize

1. In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
2. At the top of the theme editor, open the template you want to change, such as the home page.
3. In the sidebar, select Add section.
4. Choose Video.
5. Add a video or a YouTube or Vimeo link, then select Save.

You can add it to any template, but not to the header or the footer.

Settings

• Heading: an optional heading above the video.
• Text: an optional text under the heading.
• Video: a video uploaded to Shopify. It plays in the page with its own controls and takes the place of a YouTube or Vimeo link. Before it plays, it shows its own preview image.
• YouTube or Vimeo link: loads only when the shopper plays it. Until then, the section shows the cover image with a play button. YouTube videos play in YouTube’s privacy-enhanced mode, and Vimeo videos with Vimeo’s do-not-track option.
• Cover image: shows before a YouTube or Vimeo video plays. Without one, a placeholder shows behind the play button.
• Video description: describes the video for screen readers. Without one, screen readers hear “Video”.
• Aspect ratio: 16:9 (the default), 4:3 or Square. A video uploaded to Shopify fills this frame, so a video of another shape is cropped.
• Enable video looping: an uploaded video starts over when it ends. It doesn’t apply to YouTube or Vimeo videos.
• Media color scheme: the colors of the video frame. They show while the video or cover image loads, and around the placeholder when there is neither.

Panel

• Color scheme: the colors of the panel. You edit color schemes in Theme settings.
• Panel style: Panel is a rounded panel inside the page margin. Flush spans the full page width with square corners.
• Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
• Top padding: space above the content, from 0 to 120 px.
• Bottom padding: space below the content, from 0 to 120 px. On mobile, both paddings are scaled down: 64 px becomes 40 px.

Tips

• Choose the Aspect ratio that matches your video, so nothing important is cropped.
• If you add both a video and a link, the uploaded video plays.
• If a shopper’s browser runs no JavaScript, the cover image links to the video on YouTube or Vimeo instead.