🧰 Video with text – Out of the Sandbox

The Video with text section combines dynamic visuals and descriptive content to effectively promote products, sales, or brand messages.

🧰 How to install the section in your theme

Open Theme Updater & Backups in your Apps admin
Open Theme sections
Click Install below the section. You can also click Preview to see the section in a demo storefront
On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
Click Install

Add the section to a template

Click Customize to open the theme editor for the selected theme.

Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.

Scroll down to the bottom of your default sections list and select 🧰 Video with text.

Customize section settings

Click the Video with text section to customize general settings for the section.

Video with text settings.png

Shopify-hosted video

Add a video by clicking Select video. This section does not currently support externally-hosted videos and each video must be uploaded and hosted locally in your Shopify admin.

Desktop layout

Desktop video aspect ratio

Control the video aspect ratio by choosing any of the following options

Adapt to video
Vertical (9:16)
Vertical (4:5)
Square (1:1)
Wide (16:9)
Ultra-wide (21:9)

Desktop video width

Choose between Small, Medium, or Large video width. The width cannot be specified in the settings.

Desktop video placement

In desktop, the video will be placed on the left side by default. However, you can select between Video first (left) or Video second (right) to change its position.

Desktop content position and Desktop content alignment can help control the position your content (text) block will take.

Mobile layout

Mobile video aspect ratio

Similar to the section's desktop settings, you can choose a separate video aspect ratio for mobile view:

Adapt to video
Vertical (9:16)
Vertical (4:5)
Square (1:1)
Wide (16:9)
Ultra-wide (21:9)

Mobile video placement

For mobile, Video first places the video on top of the section, while Video second places the video below your content (text) block.

Mobile content alignment

Controls your content block's text alignment. You can choose between Left, Right, and Center.

Color

Control the section's color settings by adjusting the Text color, Background color, and Background gradient:

Video with text color settings.png

Adjust spacing

Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.

Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.

Customize blocks

Add blocks under the section by clicking (+) Add block

Video with text blocks 2.png

By default, the section should already include three different blocks: Heading, Text / Content, and Button.

Heading is used for the section's title and will usually appear above your Text block.

Text block is used to add the paragraph or sentence you'd like to display beside the video.

Button block can also be displayed if you would like to redirect the customers to a specific page.

Changelog

December 3rd, 2024

Updates to link hover states and animations

November 6th, 2024

Video with text added to Theme Sections.