Image banner settings

This guide describes the Image banner section.

The section includes a background image, where you can add one or two depending on your needs; a heading and description to provide users with information about products, discounts, your store, or any other details; and buttons that enable quick user navigation.

How to access the Slideshow section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Image banner”

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Image banner section

Basic Components

The “Image banner” section consists of fore primary components:

General settings – These control the overall settings of the section.
Heading block – Allows you to add a heading to the section.
Text block - Allows you to add a description to the section.
Buttons blok - Allows you to add a buttons to the section.

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Setting	Description
First image	Choose the first image for your banner. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it. Note: If add only one image, it will be on the whole width of the section. If you add two images, the images will be aligned vertically and placed next to each other.
Second image	Select the second image for your banner. Select the second image for your banner and follow the same steps as described for the first image.
Image overlay opacity	The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.
Banner height	Choose banner height from the dropdown list: Adapt to first image Small Medium Large For best results, use an image with a 3:2 aspect ratio. Learn more
Desktop content position	Select the vertical alignment of the content: Top: Aligned with the top of the image (left, center, right). Middle: Centered within the height of the image (left, center, right). Bottom: Aligned with the bottom of the image (left, center, right, or left to right).
Show container on desktop	Show the container to display text with a colored background on desktop. This will apply to the heading, description, and button text.
Desktop content alignment	You have three alignment options to align content horizontally on desktop: Left Right Center
Color scheme	You can apply different color schemes to your store: After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store. In each template, section, or block, you'll find a 'Color Scheme' dropdown. Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Container color scheme	Enable the “Show Container on Desktop” option, and apply a color scheme for the content container, including the background color, text color, and button color. These colors should be chosen to complement the background image and ensure good contrast and readability.

Animations

Setting

Description

Image behavior

Choose how the image behaves:

None
Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.
Fixed background position: This involves moving the background image in a visually appealing way while keeping it fixed relative to the viewport. This is often used for parallax effects or to create a dynamic visual background.
Zoom in on scroll: Gradually zooms in on the image as the user scrolls.

Mobile layout

Setting	Description
First image	Choose the first image for your banner. For mobile devices, this is important due to the limited screen size.
Second image	You can add a second image to the mobile device. The second image complements the first and provides additional context or visual interest. Use a 3:2 aspect ratio to ensure the image displays correctly without distortion or cropping.
Mobile content alignment	Choose the alignment of the content on mobile: Left Center Right
Stack images on mobile	If you enable this option and disable “Show Container on Mobile,” the layout on mobile devices will display the first image, followed by text on the first image, and then the second image. However, if you enable “Stack Images on Mobile” and also enable “Show Container on Mobile” the layout will show the first image, followed by text within a container, and then the second image. If you disable “Stack images on mobile,” the images will be displayed in a single column, aligned vertically, and placed next to each other.
Show container on mobile	Enabling this option will display text within a container after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Section padding

Setting	Description
Top padding	The "Top padding" setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The ''Bottom padding" setting functions similarly to the “Section top padding” setting but controls the space at the bottom of the section.
Top padding mobile	The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices using a slider.
Bottom padding mobile	The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices.