Image banner
This section is a great way to display a video or full-width banner, complete with text overlay and call-to-action buttons linking to other pages.
This section includes a few additional blocks: "Heading", "Text and page content", "Button", and "Two buttons". Tip: Press "Add block" to use the desired block. Each block can be added individually and customized in different ways.
Note! The current section includes additional Before/After functionality that can be activated using "Secondary image".
Section link
Link The banner can be linked to pages/ collections/ products. Choose the destination in the source selector.
Open in new tab When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.
Media
Type Use the drop-down to set the media format. It can be changed to "Image", "Video", or "YouTube or Vimeo URL". Additional settings related to each option are displayed after an option is selected.
"Image". Choose the option and link an image by pressing the "Select" button to display a simple image banner.
The following section provides two methods of displaying a video on a page. Select the one that fits you well:
"Video". Embed a video file uploaded to your Shopify admin -> Content -> Files by selecting the option and pressing the "Select" button in the "Video" source selector.
"YouTube or Vimeo URL". Select the option to display a video from a URL. The video can be placed by simply pasting a link into the "Video URL" field.
Image ratio Select the desired option to adapt media to the desired size. There are a few available options that can be selected from the drop-down:
"Adapt to media". Displays an image/video in its original aspect ratio.
Note! This option is automatically applied when the "Image parallax" feature is activated to generate the parallax effect.
"Fixed height". This option adapts an image/video size in pixels by setting the parameters on the "Height" scale. The height can be adjusted between 100 and 1000 pixels.
"Aspect ratio". Select the option to adjust a media height as a percentage using the "Proportion" scale. The parameters can be changed from 10% to 210%.
*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the "Mobile settings".
"Aspect ratio" indicators: * 100% = Square image * Less than 100% = Landscape * More than 100% = Portrait * 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fullscreen". Set this option to show media in the full width of a page. The image/video width will match the page width set in global settings if the "Enable page width" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
Width Use the drop-down to apply one of the options: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed". Once the last option is selected, you can manually change the width from 450 to 2000 pixels using a "Fixed width" setting. The margins will be set to the left and right when the "Fixed" option is set.
* The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in Theme settings -> Page layout.
Here is how the "Wide" option appears in the section with the disabled page width in the global settings:
Video settings
Note! The "Cover image" and "Alt text" settings will be displayed after selecting the "YouTube or Vimeo URL" video type.
Cover image Press the "Select" button in the provided source selector to upload the necessary image for all screen sizes.
Alt text Paste the descriptive text for screen readers. Read more details in the initial documentation.
Autoplay Use this feature to automatically start a video when a visitor lands on a page without clicking the play button. Note! When enabled, all videos in the section start muted by default, providing a distraction-free browsing experience.
Loop video Activate the option to play your video repeatedly and continuously.
Show controls To display the video's Parental Controls, tick the "Controls" option. Note! Ensure the image link field is empty to use the video controls. Otherwise, visitors will be redirected to another page when pressing the video player controls.
Media overlay
The settings described below only apply to desktop mode. Tip: Enable "Show overlay" under "Mobile settings" to apply the overlay color for mobile.
Enable Turn on the option to display the corresponding settings.
Opacity Adjust the transparency of an image color overlay using the scale, which ranges from 0 to 100%.
Type In the picker, select one of the options: "Background" or "Gradient".
Background Select the option and change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Gradient Select the option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Content area
Tip: Use the options in "Mobile settings" to adjust the layout on mobile. Read details here.
Position The option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each option contains settings such as "Left", "Center", and "Right". Select the option that best fits your needs using the drop-down.
Alignment Align the text on the desktop view to "Left", "Center", or "Right".
Enable custom width Use the option to adjust the text box width.
Width Adjust the width of the text box on a scale.
Show background Activate the option to view additional background settings.
Opacity Use the scale to adjust the text box background transparency from 0% to 100%:
0% - invisible background
100% - opaque background
Background Set the color in the color picker. By default, the color is set to transparent.
Desktop offset Adjusts the spacing around the text box on desktop devices, allowing you to control its position within the banner. Set a value from 0 to 40 pixels.
Show desktop border Displays a border around the text box on desktop devices to help it stand out from the image.
Border width Sets the thickness of the border from 0 to 20 pixels displayed around the text content area.
Border color Select the color used for the border.
Enable desktop corner radius Rounds the corners of the text content container for a softer appearance.
Corner radius Controls how rounded the text content container corners appear:
0 px - square
20 px - more rounded corners
Layout options
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animation
Note! The "Hover animation" and "Image parallax" drop-downs contain settings for adding image animation. Decide on an image animation effect from one of the drop-down lists, as these settings may conflict. Use the "None" option for the unnecessary feature.
Hover animation Adds an animation inside the image container. Choose the suggested option from the list:
"Use theme settings". Select the option if there is no need to apply animation settings for the section individually. In this case, set the animation effect for the banner image in the Theme Editor's global settings using the "Banner image" hover animation drop-down. Read the details on the following help page.
"None". Deactivates the animation.
"Zoom in". Enlarges the image on mouse hover over the banner.
"Zoom out". Decreases the image on mouse hover over the banner.
To use the options described below, ensure that "Opacity" is set to transparent. Select the media overlay in the "Background" or "Gradient" color pickers (read the details above).
"Zoom in, add overlay opacity" / "Zoom out, add overlay opacity". Add the overlay opacity and zooming effect to an image using the option.
"Add overlay opacity". Enables opacity over the image.
Read more about the described options on the following help page.
Image parallax
The Static option is not supported on iOS mobile devices and may cause slowdowns on content-heavy pages due to browser limitations.
Activate one of the options from the drop-down list to add an effect that moves images within the container as you scroll up or down a page. The available options are: "Move up", "Move up with delay", "Move down", "Move down delay", and "Static". To disable the parallax effect, choose the "Disable" option. Note! The parallax settings need to be rechecked with the altitude settings described above.
Mobile settings
Enable Activates mobile settings. The options below take precedence on mobile devices.
Text position Text can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list.
Image Select an image for mobile individually. Otherwise, the same image is shown on mobile view as on the desktop. Press "Select" to upload the one you need. The recommended image ratio is two-to-one (width-to-height). Note! The option can be used as a cover image for the "Video" and the "YouTube or Vimeo URL" media types.
Image ratio Change the media size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:
"Same as desktop". Uses the settings applied for the desktop.
"Adapt to image". Displays an image/video in its original aspect ratio.
Note! This option is automatically applied when the "Image parallax" feature is activated to generate the parallax effect.
"Fixed height". This option adapts an image/video size in pixels by setting the parameters on the "Height" scale. The height can be adjusted between 100 and 700 pixels.
"Aspect ratio". Select the option to adjust a media height as a percentage using the "Aspect ratio" scale. The parameters can be changed from 10% to 210%.
"Aspect ratio" indicators: * 100% = Square media * Less than 100% = Landscape * More than 100% = Portrait * 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fullscreen". Set this option to show media in the full width of a page. The image/video width will match the page width set in global settings if the "Use page width limit" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
Show overlay Check the option to display the image color overlay. This option works with the configured settings of the image overlay. Find more details here.
Heading size Select one of the options in the drop-down: "Large", "Medium", or "Small". The "Same as desktop" option saves the changes applied to the desktop.
Text alignment Align the text to "Left", "Center", or "Right".
Mobile content area
Set background opacity Enable the option to highlight the content area using the background color. Applies to content displayed from the "Header" content group. Note! Uses the background color applied in the "Content area".
Opacity Use the scale to set the transparency of the background color.
Secondary image
This feature allows you to place two images side by side, enabling customers to compare the results seamlessly.
Enable To show the Before/After functionality for the banner, activate the option and apply the desired configurations. Once you enable this option, the corresponding settings for personalizing the second image appear below.
Image Set a second image by selecting it from the Theme Library or uploading it from your device.
Note! The Before/After functionality automatically switches to a simple banner on mobile view if you set a specific image in "Mobile settings".
Scrolling text
Note! Use this feature to overlay a ticker on an image in desktop mode. It is disabled by default on mobile devices.
Show scrolling text Enable the option to display scrolling text. Additionally, this option activates other settings related to this feature.
Text Use the input field to highlight key messages, promotions, or featured content. Style your text using the formatting options at the top of the input field.
Position Arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.
Speed Use the slider to adjust the running line speed in seconds from 1 to 5.
Background opacity The ticker background color can be set as solid or transparent using the scale. The parameters vary from 0 to 100.
Background / Text Use the paint palettes to colorize the scrolling line.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Last updated