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

Header background

Kalles - Video sections

Background video, Video popup and inline, Video featured
Maria Do

Written by Maria Do

Last updated

977 views

On this page


1. Background video

This section helps you to show the video on your site. Background videos are automatically muted to allow autoplay. It is usually located on Homepage. However, Shopify 2.0 allows you to add the section to any pages that you wanna use.

Steps: In the theme editor (Customize) > Add section > Background video > Save.

1.1. Background video blocks

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

Click on Slideshow > ADD BLOCK > choose the block you want to add.

You can refer to this video to know more about these blocks:

1.2. Background video settings

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.

2023-01-19_14-12-44.gif

SOURCE VIDEO

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

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

2023-01-19_14-17-13.gif
  • If you use Upload file, you have to go to Shopify admin > Content > Files > Upload video > click on "Copy link" button.

files.gif

Choose "Upload file" and paste the link to video:

upload.gif
  • If you use "Shopify hosted", you just need to pick a video in "Shopify-hosted video" option:

hosted.gif

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.webp

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, Background color opacity.

  • You can also change the 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.

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

DESIGN OPTIONS

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

2. Video popup and inline

This section allows you to create a popup video with a background image, customers can click on the button video option to see the popup or inline video.

Steps: In the theme editor (Customize) > Add section > Video popup and inline > Save.

2.1. Video popup and inline contents

Click on Video popup and inline > ADD BLOCK > choose the block you want to add.

2.1.1. Button video

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

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

  • If you use "Shopify hosted", you just need to pick a video in "Shopify-hosted video" option

11.png
  • You can enable autoplay, looping, close button.

  • Config Click action and design button play & close. Please check this video:

2.1.2. Other blocks

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

You can refer to this video to know more about these blocks:

2.2. Video popup and inline settings

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. Please check this video to config the height.

  • Cover image: This option allows you to upload an Image as a banner for desktop and mobile versions. You also can Enable parallax scroll for the image.

CONTENT POSITION OPTION

  • Content align: You can align content to Left, Center or Right.

  • Content vertical/horizontal position: choose the position for the content inside.

  • Content padding: You can set the padding for Block content on desktop or mobile devices.

  • Background content, Border content: You can set color, opacity, style, padding for background and border content.

Please check this video to config in detail:

DESIGN OPTIONS

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

3. Video featured

This section helps you to show the video on your site.

From Theme section sidebar -> Add section -> Video featured section

GENERAL OPTIONS

  • Section height: there are some options to change the height/ratio for the video: Preserve original ratio, Full screen height, Custom height, 16:9, 4:3.

22.gif

Section height

With Custom height option, it lets you choose the different height for each device: Desktop, Tablet, Mobile.

23.webp

Custom height option

  • Source video: you can choose the video from Youtube or Upload a file. The video URL accepts YouTube or Vimeo links

  • Moreover, you have the option to enable video autoplay, video looping

DESIGN OPTIONS

  • 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.