Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Gecko - Background video

Mie Tran

Written by Mie Tran

Last updated

423 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, and 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, Button, HTML, Image(Child), Countdown timer, and Space HTML to this section. You can refer to this video to learn more about these blocks:

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 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 autoplaying video is not supported on mobile devices.

spaces_tdDF4h55NE3bVEDpck0F_uploads_Jtkul9rDINgTaI5t0c3X_2023-01-19_14-12-44.webp

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.

spaces_tdDF4h55NE3bVEDpck0F_uploads_i7LGlggQO6nnDSuxcqWn_2023-01-19_14-17-13.webp

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

spaces_tdDF4h55NE3bVEDpck0F_uploads_yAifZpXQKxSkkv5WLGXd_2023-01-19_14-21-46.webp

1.3. CONTENT POSITION OPTION

  • You can also set the Content align and Content width for the content in the section.

  • Helps you configure the style of the content with options for Content vertical position, Content horizontal position both on Desktop, Tablet, and Mobile.

spaces_tdDF4h55NE3bVEDpck0F_uploads_IAXsatnQ4moOXtpEqris_2023-01-19_14-25-16 (1).webp

1.4. CONTENT BACKGROUND, COLOR OPTIONS

  • Helps you configure the style of the content color & content background color with options for Overlay color, Overlay opacity, Background color, and Background color opacity.

  • You can also change the Content padding top/bottom (px) and content padding-left/right (px) for both Mobile and desktop.

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

spaces_tdDF4h55NE3bVEDpck0F_uploads_nyoSg9urCxeHfdlBBkHF_2023-01-19_14-27-38.webp

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

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

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.