Banner video

Written by Nelly

Last updated 6 days ago

42 views

On this page

The Banner Video section allows you to display a dynamic, full-width video banner on your homepage or landing page. It’s a powerful visual element designed to capture attention, promote key content, or enhance brand storytelling with motion and sound.

1. How to access the Banner video section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Banner video.

2. How to customize the Banner video section?

2.1. Banner item

Click on Banner video section > Add block (plus icon ➕) > Banner item block

On each block, you can configure:

2.1.1. General options

Banner URL: The link users are directed to when clicking the banner.
Open in new tab: When enabled, the link opens in a new browser tab.
Image hover effect: Adds a visual effect to the image when hovered, such as rotate or zoom.
Hovering effect will resize your images
Item effect when hover: Applies an effect to the whole banner block on hover, like overlay or border run.
Display colors by block: If enabled, each block may show different colors based on settings or tags.

2.1.2. Desktop

Vertical space: Sets top and bottom padding around the banner in pixels.
Horizontal space: Sets left and right padding in pixels.
Content position: Controls vertical placement of content inside the banner (top, center, bottom).
Text alignment: Sets horizontal text alignment (left, center, right).

2.1.3. Mobile

Vertical space: Top and bottom padding for mobile view.
Horizontal space: Left and right padding for mobile view.
Content position: Vertical alignment of content on mobile.
Text alignment: Horizontal alignment of text on mobile.

2.2. Blocks in the Banner item

In the Banner Item, you can add various blocks such as Heading, Text, Button, Media, Liquid and Spacer to enhance the layout and design.

Click on Banner item block > Add block (plus icon ➕) > Select block you can add

2.2.1. Media

Use source: Choose between using an image or a video as the media type for the banner.
Image: Upload or select an image to display on desktop.
Image Mobile: Upload or select a separate image specifically for mobile devices. Helps optimize layout for smaller screens.
Video: Upload or select a video file to display in place of an image. This overrides the external video link if both are set.
External link video: Add a video link from YouTube or Vimeo. Used only if no uploaded video is selected.

2.2.2. Liquid

Use the <hdt-font-1> tag if you want to use font-1 for this paragraph.

Liquid: Field for dynamic content using Liquid templating.
Hidden on mobile: This is a toggle switch. When enabled, the content configured in this section will not be displayed on mobile devices.
Font family: A dropdown menu to select the typeface for the text. "Default" is currently selected.
Size: Controls font size, options include such as Small, Medium, Large, ... and "Custom size inline" for specific settings.
Font weight: Adjusts font thickness (e.g., "Medium, Bold,...").
Text color: Sets the text color (e.g., "Default" uses theme's color).
Font size (Custom options): Sets font size in pixels for desktop.
Mobile font size (Custom options): Sets font size in pixels for mobile.
Letter spacing (in pixel) (Custom options): Adjusts space between letters in pixels.

2.2.3. Heading

Heading: Allows you to enter and format the text (bold, italic, underline, lists, links, etc.). Shift + Enter to line break.
Hidden <br> on mobile: Disables line breaks on mobile devices.
Line height: Adjusts the spacing between lines of text. Options include: "Default", "Small", "Fit".
Size: Lets you select sizes for the heading.
Text color: Allows you to set the text color.
Custom size options:
- Font size: A slider and input field to set the font size (e.g., 50 px) for regular (desktop) viewing.
- Mobile font size: A slider and input field to set the font size (e.g., 24 px) specifically for mobile devices.
- Letter spacing (in pixel): A slider and input field to adjust the spacing between individual characters (e.g., 0 pixels).

2.2.4. Text

Text : This is where you input the main text content
Shift + Enter to line break.
Use shortocdes: [countdown]. Countdown to the end sale date will be shown
Hidden <br> on mobile: Disables line breaks on mobile devices.
Hidden on mobile: A toggle switch. If enabled, the text content will not be displayed on mobile devices.
Font family: A dropdown menu to select the typeface for the text. "Default" is currently selected.
Size: Controls font size, options include such as Small, Medium, Large, ... and "Custom size inline" for specific settings.
Line-height: Adjusts the vertical spacing between lines of text. Options include "Default", "Small", and "Fit".
Font weight: A dropdown menu to choose the thickness or boldness of the font.
Text color: A dropdown menu to set the color of the text. "Default" is currently selected.
Date countdown: An input field or date picker where you can set the exact date and time for the countdown to end (e.g., "2025-09-30 15:00:00").
Text day countdown: An input field where you define the text to display for the "days" unit of the countdown.
Effect slider: This likely refers to the transition effect for the content, with options like "Fade" or "Slider" currently selected.
Autoplay speed in seconds: A slider and input field to set the duration (in seconds) before the next slide or item in the "slider" effect appears.
Set is '0' to disable autoplay

2.2.5. Spacer

Horizontal space: If enabled, the spacer will also add horizontal spacing instead of only vertical spacing.
Space: Adjusts the amount of space (in pixels) on desktop screens.
Tablet space: Defines the amount of space for tablet devices, ensuring responsive spacing.
Mobile space: Sets the spacing specifically for mobile screens.

2.2.6. Button

Label: Defines the text displayed on the button.
Link: Specifies the destination URL when the button is clicked.
Open this link in a new tab: Opens the link in a new browser tab when enabled.
Make button full width: Expands the button to take up the full width of its container.

Style: Choose between Solid, Outline, or Link styles for different visual effects.
Size: Adjusts the button size (e.g., Extra Large, Medium, etc.).
Font weight: Controls the thickness of the button text (e.g., Normal, Bold).

Custom Size Options:

Font size: Adjusts the heading size for desktop.
Tablet font size: Adjusts the heading size for table.
Mobile font size: Adjusts the heading size for mobile.
Font weight: Controls the thickness of the text (e.g., 600 is semi-bold).
Letter spacing: Adjusts the space between characters.

Icon:

Icon: Select the icon to display on the button (e.g., arrow, plus, etc.).
Icon position: Choose whether the icon appears Before or After the button text.
Icon size: Adjust the size of the icon in pixels.
Icon spacing: Set the spacing between the icon and the text to ensure proper alignment and readability.

2.3. Banner video

You can configure some general options for the section below:

2.3.1. General options

For each banner section, you can customize general options your banner with a variety of flexible options below:

Image height: Select the image height type (Fixed or Adapt to image).
Fixed height: Set a fixed height for the banner on desktop (e.g., 400px).
Mobile image height: Choose the image height type for mobile devices.
Mobile fixed height: Set a fixed height for the banner on mobile (e.g., 300px).
Spacing between items: A dropdown menu to control the default spacing between items within the banner (likely on desktop). "Default" is currently selected.
Spacing between items (Tablet): A dropdown menu to control the spacing between items specifically for tablet devices. "Default" is currently selected.
Spacing between items (Mobile): A dropdown menu to control the spacing between items specifically for mobile devices. "Default" is currently selected.
Columns Desktop: An input field or dropdown to set the number of columns the banner content will display on desktop devices.
Columns Tablet: A set of buttons to choose the number of columns for tablet devices. "1", "2", "3", and "4" are available.
Columns Mobile: A set of buttons to choose the number of columns for mobile devices. "1" and "2" are available.
Enable scrollsnap slider on mobile: Enable/disable automatic scrolling for the banner on mobile.

2.3.2. Layouts

Display colors by section: When turned on, it allows each section to use its own color scheme. It is off, meaning the section follows the global theme colors.
Color scheme: Lets you choose a predefined color scheme that affects text, background, and button colors in this section.
Background section overlay: Adds a semi-transparent color overlay on top of the section background. The slider controls the transparency level (e.g., 0.5 means 50% opacity).
Width: Sets the width behavior of the content.
- Wrap container: means the content will follow the site’s max container width.
- Container: Similar to "Wrap container" but may be slightly narrower or follow theme-specific padding.
- Full width: Content stretches edge-to-edge across the entire screen.
Background image: Allows you to set a background image for the entire section.
- Use the Select button to upload your own image or click Explore free images to choose from stock options.
Padding top: Adds spacing above the content within the section. Measured in pixels
Padding bottom: Adds spacing below the content within the section. Also measured in pixels
Padding rate mobile: Sets the amount of vertical padding on mobile devices as a percentage of the desktop padding. For example, 75% means mobile devices will get 75% of the desktop padding value.

2.3.3. Theme Settings

Page width: defines the maximum width of the main content area on the website.

2.3.4. Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.