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

Video

With the Video section, you can feature a video on your home page. You can preface your video with a hi-def thumbnail and custom marketing text.

Video section on the home page
Video section on the home page

The Video section can be used on the following page templates:

This section accepts video links from YouTube and Vimeo.

Add a Video section on your home page

To set up a Video section:

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Scroll to the bottom of the home page sections and choose Add section.

    Add section button
    Add section button
  3. Choose Video from the list of sections.

    This opens the Video section settings.

  4. Add Heading and Subheading text to be displayed at the top of the section.

  5. Add a Video URL. This should be a full URL to a video on YouTube or Vimeo.

    The URL should look something like this: https://www.youtube.com/watch?v=uHhf76z6BkM.

  6. Add an Image to be used as a preview for the video.

    We recommend using a still image from the video.

  7. Tweak the Overlay opacity.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

  8. Choose the color of the Overlay.

  9. Return to the list of Home page sections to find your new XYZ section.

    Use the drag handles to rearrange the order of you Home page sections:

    Shopify section drag handles
    Shopify section drag handles
  10. Use the Save button in the top-right corner when you are finished editing.

Add a Video section to other pages

To set up a Video section:

  1. From your Customize theme editor, choose Collections or Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the arrow beside Collection features or Product features.

  3. Use the Add block button to select the Video section.

    This opens the Video section settings.

  4. Add Heading and Subheading text to be displayed at the top of the section.

  5. Add a Video URL. This should be a full URL to a video on YouTube or Vimeo.

    The URL should look something like this: https://www.youtube.com/watch?v=uHhf76z6BkM.

  6. Add an Image to be used as a preview for the video.

    We recommend using a still image from the video.

  7. Tweak the Overlay opacity.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

  8. Choose the color of the Overlay.

  9. Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:

    Shopify content block drag handles
    Shopify content block drag handles
  10. Use the Save button in the top-right corner when you are finished editing.

Video settings

The Video section has the following settings:

Configuration Settings

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Max width of text

Control the width of the subheading and heading text.

Video URL

Add the full URL to the video.

This setting takes YouTube and Vimeo video URLs.

Image

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

We recommend using a still image from the video.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Overlay

Pick the color of the overlay.

Use alternate selection color

Set the background color to the Alternate Section Color as chosen in your Color Settings.

See Spark's Color settings documentation to learn how to set Alternate section colors.

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.