Image banner

Last updated 2 months ago

Image banner

The Image Banner Section allows you to display high-quality images with text overlays, making it ideal for showcasing promotions, brand messages, or featured collections.

Go to Shopify Admin > Online Store > Themes.
Click Customize on your active theme.
In the Theme Editor, click Add Section > Image Banner.

Show Full Width: Expands the section across the entire screen width.
Right & Left Spacing : Add spacing to the Full Width layout (applies in full-width mode).
First Image: Upload the primary banner image.
Second Image: Upload an alternate banner image (optional).
Image Overlay Opacity: Adjust transparency to enhance text readability.
Banner Height: Choose Small, Medium, or Large as per requirement of the theme.
Adapt Section Height to First Image Size: Overrides the Banner Height as first image setting when enabled.
Desktop Content Position: Set the content alignment (Top, Middle ,Bottom).with the alignment of (Left,Right,Center)
Show Container on Desktop: Toggle to structure the content in a container.
Desktop Content Alignment : Adjust content placement within the banner.(Left,Right,Center)
Color scheme : You can customize the section’s appearance by changing the text color, background color, and more using preset color options.
Mobile Content Alignment: Adjust content placement for mobile users..(Left,Right,Center)
Stack Images on Mobile: Enable to stack images vertically instead of side by side.
Show Container on Mobile: Display structured content on mobile screens.
Margin Top: Adjust spacing above the banner.
Margin Bottom: Adjust spacing below the banner.

Without adding block to banner the section seems to be empty

Search: Use to add search key search tags
Heading block: Set a custom title and can Choose for size Small, Medium, or Large
Text block: Can add the description to the email and choose the style as (Body, subtitle)
Buttons: Button Label Add text (e.g., "Shop Now").& Button Link Set the URL destination.
Use Outline Button style: Change the button to an outlined style.

PreviousTeam Section NextVideo

Last updated 2 months ago

The Image Banner Section allows you to display high-quality images with text overlays, making it ideal for showcasing promotions, brand messages, or featured collections.

Go to Shopify Admin > Online Store > Themes.
Click Customize on your active theme.
In the Theme Editor, click Add Section > Image Banner.

Show Full Width: Expands the section across the entire screen width.
Right & Left Spacing : Add spacing to the Full Width layout (applies in full-width mode).
First Image: Upload the primary banner image.
Second Image: Upload an alternate banner image (optional).
Image Overlay Opacity: Adjust transparency to enhance text readability.
Banner Height: Choose Small, Medium, or Large as per requirement of the theme.
Adapt Section Height to First Image Size: Overrides the Banner Height as first image setting when enabled.
Desktop Content Position: Set the content alignment (Top, Middle ,Bottom).with the alignment of (Left,Right,Center)
Show Container on Desktop: Toggle to structure the content in a container.
Desktop Content Alignment : Adjust content placement within the banner.(Left,Right,Center)
Color scheme : You can customize the section’s appearance by changing the text color, background color, and more using preset color options.
Mobile Content Alignment: Adjust content placement for mobile users..(Left,Right,Center)
Stack Images on Mobile: Enable to stack images vertically instead of side by side.
Show Container on Mobile: Display structured content on mobile screens.
Margin Top: Adjust spacing above the banner.
Margin Bottom: Adjust spacing below the banner.
The Shopify allows you to apply unique CSS styles to specific sections, blocks, or elements within your theme.

Without adding block to banner the section seems to be empty

Search: Use to add search key search tags
Heading block: Set a custom title and can Choose for size Small, Medium, or Large
Text block: Can add the description to the email and choose the style as (Body, subtitle)
Buttons: Button Label Add text (e.g., "Shop Now").& Button Link Set the URL destination.
Use Outline Button style: Change the button to an outlined style.