Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

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.

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 video section

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

Steps

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. Use the drag and drop handles ⋮⋮ to change the order of your sections.

  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 video url

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

Steps

In your theme editor (Customize):

  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. Click Save.

Add 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.

Steps

In your theme editor (Customize):

  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. Click Save.

Section headings and layout

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.

Steps

In your theme editor (Customize):

  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. Use the Max width of text slider to control the maximum width of the headings.

    Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

  3. Click Save.

Video section settings

Click on the Video section to find the following settings:

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

Click on the Video block to find the following 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

Click on the Heading and Subheading blocks to find the following settings:

Configuration Settings

Heading

Enter heading text to display as a section title.

Subheading

Enter subheading text to display below the heading.

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

Max width of text

Use the slider to control the maximum width and line breaks of the headings.

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.