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:
This section empowers you to communicate your brand’s identity effectively, driving engagement and enhancing the overall appeal of your Shopify store.
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.
After adding the Tapita Video Banner #1 Section to your store, you can customize its content as follows within the Shopify Theme Editor.
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
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
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
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)
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)
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)
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