We've recently relaunched all three of our themes. Watch the launch video here.

Video

The Video section displays a feature video that visitors can click to play. You just need to paste the link to your video from YouTube or Vimeo to embed it on one of your pages. You can add custom promotional headings and an overlay image.

If you want to add an autoplaying video, you will need to add a Video hero section.

Video section with an image overlay
Video section with an image overlay

Add a Video section

The Video section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Video from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles
  4. (Optional.) Enable the Alternate section color option in the section settings found by clicking on the section title.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Add a video

The Video section automatically displays your video when you add a video link from YouTube and Vimeo.

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

  2. Paste your video link in the Video URL field.

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

  3. Remember to click Save in the top-right corner.

Add a custom image overlay

You can replace the default video player with a custom preview image and a simple play button. This will keep your page looking sleek and tidy.

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

  2. Add an Image Overlay by using the Select Image button as a preview.

    We recommend using a still image from the video.

  3. (Optional.) Change the Overlay color and adjust the Overlay opacity using the slider to adjust the contrast of the video preview or image overlay.

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

  4. Remember to click Save in the top-right corner.

Change the section headings

You can add custom promotional text to the Heading and Subheading blocks or choose to remove the these blocks to display the video on its own.

  1. Click on the heading blocks to change the Heading and Subheading text displayed above the video.

    Use the Remove block button in the block settings to remove the headings entirely.

  2. Adjust the Text max width of your headings using the slider.

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

  3. Remember to click Save in the top-right corner.

Video section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Video block settings

The following settings are found by clicking directly on the Video block:

Configuration Settings

Video URL

Add the full URL to your video on YouTube or Vimeo, including https:// at the start.

Image overlay

Select or upload an image as a video preview.

We recommend using a still image from 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 color

Choose the color that overlays the video preview or custom image overlay.

Heading block settings

The following settings are found by clicking directly on the Heading blocks:

Configuration Settings

Heading

Add heading text use as a title the video.

We recommended a short title of just a few words.

Subheading

Add subheading text to display below the heading. We recommend two to three short sentences.

Use the formatting buttons to add bold, italic, or linked text.

Max width of text

Use the slider to adjust the maximum width of the heading and subheading text.

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

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.