Customizing the Video Banner #1 Section

Customizing the Video Banner #1 Section

Capture attention instantly by showcasing a video banner that communicates your brand story or promotion with the Tapita Video Banner #1 Section. This powerful section is designed to enhance your Shopify store: 

  1. Seamless Integration: Works effortlessly with Shopify themes for a smooth performance and fast load time.
  2. Fully Customizable: Tailor the video banner to align with your brand’s aesthetic and messaging.
  3. Versatile Use: Showcase your brand story, promote new products, or highlight campaigns.
  4. Enhanced Appeal: Creates a visually engaging experience to boost customer interaction.

This section empowers you to communicate your brand’s identity effectively, driving engagement and enhancing the overall appeal of your Shopify store.

1, Adding Tapita Video Banner #1 Section

For instructions on how to add the video banner section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.

2, Customizing Tapita Video Banner #1 Section

👉🏻 View section demo

After adding the Tapita Video Banner #1 Section to your store, you can customize its content as follows within the Shopify Theme Editor.

2.1. Video settings

Video file (MP4)

Upload a video in MP4 format. 

Video uploaded will be on the first priority to display on the Video Banner section on the storefront.

Embed video code

Insert your video embed code here (YouTube, Vimeo, etc.). 

If no video uploaded manually, the Video Banner section will display the video that has the embed video code inserted. 

Auto play video

Toggle this ON to play the video automatically.

Toggle this OFF to play the video on click with the pause / play button shown. 

Loop video

Toggle this ON to play the video on loop. 

Video height on desktop

Control the height of the video on the desktop view.

Slide to set your desired value or enter a pixel number. (e.g. 70 px)

Video height on tablet 

Control the height of the video on the tablet view.

Slide to set your desired value or enter a pixel number. (e.g. 60 px)

Video height on mobile

Control the height of the video on the mobile view.

Slide to set your desired value or enter a pixel number. (e.g. 60 px)

Show video overlay

Toggle this ON to show an overlay effect on the video.

Overlay opacity

Control the transparency of the overlay effect. 

Slide to set your desired value or enter a percentage number. (e.g. 10 % or 0% - no overlay effect)


Video settings configurations

2.2. Text content

Subtitle

Enter the subtitle for the Video Banner section. The subtitle is shown above the title.

Title

Enter the subtitle for the Video Banner section.

Description

Enter the description for the Video Banner section. The description is shown below the title. 

Button label

Enter the label (text) for the button. (e.g. Discover now)

Button link

Insert or search for a link.

Show button arrow

Toggle this ON to display the button arrow.


Show button arrow

 

Text content configurations

2.3. Text positioning

Text alignment

Control the alignment of the text.

Choose between 2 options: Left or Center.

Text horizontal position

Control the left padding for text alignment as Left.

Slide to set your desired value or enter a pixel number. (e.g. 10 px)

Text vertical position

Control the above padding for text.

Slide to set your desired value or enter a pixel number. (e.g. 50 px)


Text positioning configurations

2.4. Text styling

Subtitle font size

Control the size of the subtitle.

Slide to set your desired value or enter a pixel number. (e.g. 18 px)

Subtitle font weight

Control the font weight - thickness of the subtitle.

Slide to set your desired value or enter a number. (e.g. 400)

Subtitle color

Control the color of the subtitle.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Title font size

Control the size of the title.

Slide to set your desired value or enter a pixel number. (e.g. 18 px)

Title font weight

Control the font weight - thickness of the title.

Slide to set your desired value or enter a number. (e.g. 400)

Title color

Control the color of the title.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Description font size

Control the size of the description.

Slide to set your desired value or enter a pixel number. (e.g. 18 px)

Description font weight

Control the font weight - thickness of the description.

Slide to set your desired value or enter a number. (e.g. 400)

Description color

Control the color of the description.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)


2.5. Button styling


Button font size

Control the size of the button.

Slide to set your desired value or enter a pixel number. (e.g. 18 px)

Button font weight

Control the font weight - thickness of the button.

Slide to set your desired value or enter a number. (e.g. 400)

Button vertical padding 

Control the above padding for the button.

Slide to set your desired value or enter a pixel number. (e.g. 50 px)

Button horizontal padding 

Control the left padding for the button.

Slide to set your desired value or enter a pixel number. (e.g. 50 px)

Button background color

Control the background color of the button.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Button text color

Control the text color of the button.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Button border radius

Control the corner rounding of the button.

Slide to set your desired value or enter a pixel number. (e.g. 5 px or 0 px - no corner rounding)

Button border width

Control the width of the button border.

Slide to set your desired value or enter a pixel number. (e.g. 5 px or 0 px - no border)

Button border color

Control the color of the button border.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Button hover background color

Control the color of the button background when visitors hover the mouse cursor over it.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)


Button on hovered

Button hover text color

Control the color of the button text when visitors hover the mouse cursor over it.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Button hover border color

Control the color of the button border when visitors hover the mouse cursor over it.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

 

2.6. Pause button


Show pause button

Toggle this ON to display the pause button.

Pause button size

Control the size of the pause button.

Slide to set your desired value or enter a pixel number. (e.g. 18 px)

Pause button background

Control the background color of the pause button.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Pause button icon color

Control the color of the pause button icon.

Choose via the color picker or enter a HEX color code. (e.g. #FFFFFF for white)

Pause button opacity

Control the transparency of the pause button. 

Slide to set your desired value or enter a percentage number. (e.g. 10 % or 0% - no overlay effect)


2.7. Section layout

Section full width

Toggle this ON to display the section in full width.

Section max width

Control the maximum width of the section.

Slide to set your desired value or enter a pixel number. (e.g. 1600 px)

Padding desktop

Control the above spacing of the section on the desktop view.

Slide to set your desired value or enter a pixel number. (e.g. 60 px)

Padding tablet, mobile

Control the above spacing of the section on the tablet, mobile view.

Slide to set your desired value or enter a pixel number. (e.g. 40 px)

Margin desktop

Control the left spacing of the section on the desktop view.

Slide to set your desired value or enter a pixel number. (e.g. 70 px)

Margin tablet, mobile

Control the left spacing of the section on the tablet, mobile view.

Slide to set your desired value or enter a pixel number. (e.g. 70 px)


Now you know how to customize the Tapita Video Banner #1 Section to effectively communicate your brand story or promotion that captures attention instantly. If you have any questions or need assistance, don’t hesitate to reach out to Tapita support here support@tapita.io 

    • Related Articles

    • Customizing the Video Banner #2 section

      Capture attention instantly by showcasing a video banner that communicates your brand story or promotion with the Tapita Video Banner #2 Section. This powerful section is designed to enhance your Shopify store: Seamless Integration: Works ...
    • Customizing the Video Section

      Video Section Overview In Shopify stores, video sections are powerful tools for showcasing products, tutorials, testimonials, and more. Tapita's Video Section provides a dynamic hub for this multimedia content, offering users a rich and engaging ...
    • Customizing the Coming Soon Section

      Coming Soon Section Overview In Shopify stores, "Coming Soon" pages or sections are commonly used to build anticipation for upcoming product launches, events, or store updates. Tapita's Coming Soon Section provides a versatile tool for creating ...
    • Customizing the Scrolling Image Section

      Enhance your store’s visual appeal by showcasing images and media in a dynamic, scrolling format with the Scrolling Image Section. Whether you're highlighting products, promotions, or brand stories, the Scrolling Image Section transforms static ...
    • Customizing the Mega Menu Section

      For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases. That’s why a clear, well-structured menu is essential to both user experience and store performance. Tapita ...