Stiletto

Video with text

Theme section

The Video with text section combines a feature auto-playing video with marketing content and optional button.

  • Display an auto-playing video (without sound)

  • Add content blocks for text, buttons, images, and more.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

In your theme editor (Customize):

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

    Learn how to use templates in our Templates guide.

  2. Under Template, click (+) Add section and select Video with text.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add auto-play video

Upload an auto-play video (without audio) to next to the section headings and button. You can adjust the video position, shape, and focal point.

File Format.mp4 video (required)

File size

Maximum 10MB (recommended)

Duration

5 - 10 seconds (recommended)

Note | The autoplay video does not play audio. For videos with audio, you can add a Video player block within the section or use the Video section instead.

STEPS

In your theme editor (Customize):

  1. Click on the Video with text section to open the settings.

  2. Select the Video position to display the image on the Left or Right side of the section.

  3. Under Shopify video, click Select video.

    Use a .mp4 video. We strongly recommend using a 5 to 10 second video under 10MB.

  4. (Optional) Under Mobile Shopify video, click Select video for a background video that appears only on mobile devices.

    You may want to upload a video file that has been cropped to a different shape (aspect ratio) to better fit a vertical screen.

  5. Select a Video aspect ratio to crop your video to Square, Landscape, or Portrait.

    The Natural setting displays the original shape of your video.

  6. Use Video focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

  7. Click Save.

Add content blocks

In the Video with text section, add content blocks to display next to the auto-play video. There are 3 default content blocks: Heading, Subheading, and Button.

You can edit or remove these blocks and add 7 other types of blocks to customize the section’s content.

Available blocks

BlockDescription

Accent

Add text to display a small heading above the main heading.

Heading

Add text to display as a heading.

Text

Add multiple lines of rich text.

Text list with icons

Add a column of promotional text with icons.

Image

Add a small Video with an adjustable size.

Button

Add a button link with text.

Video player

Add a video that visitors can click to play in a popup viewer.

Border

Add a border to visually separate other blocks.

Spacer

Add a margin of space between blocks.

Add section headings

Add a section title and promotional text display next to the video. The section headings are included as blocks nested within the section.

STEPS

In your theme editor (Customize):

  1. Click the Heading block to change section title.

    we recommend a short title of just a few words.

  2. Click the Subheading block to add a few words or short sentence below the heading.

  3. Click the Text block for longer content in a more compact size.

  4. Click (+) Add block to add an Accent block, ideal for a one word label or category.

  5. Click on the Video with text section to change the Text alignment of the content blocks. Choose Left, Center, Right.

  6. Click Save.

Add buttons

Add multiple Button blocks to link to your collections or products or any other page with a custom label.

STEPS

In your theme editor (Customize):

  1. Click on a Button block to open the settings.

    Click (+) Add block and select Button to add more.

    Click Remove block or the eye icon to remove or hide blocks.

  2. Select or paste a URL for the Button link.

  3. Enter text for the Button label.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. (Optional.) Use the drag and drop handles ⋮⋮ to change the position of the Button:

  5. Select a Button style: either Solid, Outline, or Text.

    Click on the Video with text section to find the color options for buttons.

  6. Click Save.

Add video player

(Optional) If you want to include a video with audio, you can add a video player block that opens in a popup player.

Click (+) Add block and select Video player to add your video. You can either use an uploaded .mp4 video in your Shopify files or embed a video from YouTube or Vimeo.

Add Shopify-hosted video

To use a Shopify-hosted video, upload a .mp4 file to your Shopify admin and select the video in the block settings.

STEPS

In your Shopify admin:

  1. In the side panel, click Content > Files.

  2. Click Upload files to add a .mp4 file from your computer.

    Once your file has been processed, you can go to the next step.

In the theme editor (Customize):

  1. Click the Video player block under the Video with text section.

  2. Under Shopify video, click Select video to select your video and click Done.

  3. Click Save.

Embed video from URL

To embed a video from YouTube or Vimeo, paste the video link in the block settings.

STEPS

In the theme editor (Customize):

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

  2. Under Youtube or Vimeo URL, paste the link of your hosted video.

  3. Click Save.

Section padding and width

Choose the amount of padding around the section and make the section full width.

STEPS

In your theme editor (Customize):

  1. Click on the Video with text section to open the settings.

  2. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  3. Choose to Enable full width to make the section and video span to the edges of the page.

  4. Click Save.

Settings reference

Click the Video with text section to find the following settings.

Layout

SettingDescription

Video position

Choose to display the featured video either Left of content or Right of content on desktop screens.

Text alignment

Align the headings and button to the Left, Center, or Right within the text area.

Video

SettingDescription

Video

Select an image to display as the feature image.

There are no required image dimensions. We recommend a minimum width or height of 2500px.

Video aspect ratio

Choose to crop the video to a uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.

Video focal point

Select the most important part of the video to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.

Color

SettingDescription

Background

Select the color of the section background.

Text

Enter multiple lines of text.

Button

Select the color of the button background.

Solid button text

If the Solid button style is selected in the button block settings, select the color for the button text.

Section style

SettingDescription

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Enable full width

Display the section at the full width of the screen or window.

Padding

Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Related links

Video hero Image with text Image with text split

Last updated