Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Video

The Video section embeds a YouTube or Vimeo video on your page. This section is great for longer videos about your store and products.

This video section plays YouTube and Vimeo videos with controls and audio, unlike the full-width autoplaying video in the Video hero section.

Add a video section

The Video section can be added to any template (except the Checkout). Learn more about sections and templates in our article about how to use the theme editor.

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Video.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Embed a video

The Video section displays videos hosted on YouTube or Vimeo. Upload a video to YouTube or Vimeo and add the video URL in the theme editor.

Video section settings

In the theme editor (Customize):

  1. Click on the Video block to open the settings.

  2. Copy and paste your video link from Vimeo or YouTube into the Video URL field.

    Make sure you copy the full URL of your video on YouTube or Vimeo, including https:// at the start.

  3. Add a Featured image for a preview image that overlays the video with a play button.

  4. Add Meta text to be the video's caption.

  5. (Optional.) Change the Overlay color and adjust the Overlay opacity using the slider to adjust the contrast of the featured image overlay.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color overlay.

  6. Remember to click Save.

Video block settings

The video section has the following settings:

Configuration Settings

Video URL

Add the full URL to the video.

This setting takes YouTube and Vimeo video URLs.

Select or upload an image to be used as the video preview.

We recommend using a still image from the video.

Meta text

This text is to be used as a small caption or to provide additional information about the video.

Overlay opacity

Use the slider to adjust the transparency of the overlay color.

Set the opacity to 0% to turn off the overlay color — set it to 100% to create a solid color overlay.

Overlay

Pick the color of the overlay.

Change the section headings

This section has blocks for two text headings. You can re-order or hide these blocks.

In your theme editor (Customize):

  1. Click on the Text blocks to change the Heading and Subheading.

  2. (Optional.) In the block settings, adjust the Max width of text of your headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  3. Remember to click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.