SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Ocolus - Background video

Mie Tran

Written by Mie Tran

Last updated

482 views

On this page


This section allows you to create a section with a background video and a cover image, customers can watch the video autoplay in the background section. You also can add texts, call-out buttons for them.

You can go to Theme sections > Add section > Background Video and configure it.

1. Content blocks

You are allowed to add Text, HTML, Image (Child), Button, Countdown timer, Space HTML to this section.

block back.gif

2. How to configure the Background video section?

1.1. GENERAL OPTIONS

  • Section height: This allows you to set the height for the section.

  • Use custom height: Turn on this option to use a custom height for the background section on desktop, tablet and mobile devices.

  • Cover image: This option allows you to upload an Image. It's the fallback when the auto-playing video is not supported on mobile devices.

general back.gif

1.2. SOURCE VIDEO

The Source video option allows you to choose to show the video from Youtube or Shopify-hosted.

If you use Youtube video, you can copy and paste the link video from Youtube to the video url.

youtube video.gif

If you use Shopify-hosted, you have to go to Shopify Dashboard > Content > Files > Upload video. Then, you can choose the video in Shopify-hosted.

content file.gif

1.3. CONTENT POSITION OPTION & CONTENT BACKGROUND, COLOR OPTIONS

  • You can also set the Content align and Content width, Content vertical position, Content horizontal position both on Desktop, Tablet and Mobile.

  • Helps you configure the style of the content color & content background color with options for Overlay color, Overlay opacity, Background color, Background color opacity, Content padding top/bottom (px), Content padding left/right (px) for both on Moblile & Desktop

  • Use border content: Turn on this option to use the border content. And you can change the Border color, Background border, Border opacity, Border style and Border Padding.

1.4. DESIGN OPTIONS

  • Please follow this guideline to config Layout, Background, Margin/Padding for the section.

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.