Image banner

The image banner section supports two images, and a text box with buttons.

To add this section, please follow the below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Image banner".

Section settings

Setting	Description
First image	The first image for the section. If two images are added to the section, this image will appear to the left on desktop or at the top on mobile devices.
Second image	The second image for the section. If two images are added to the section, this image will appear to the right on desktop or at the bottom on mobile devices.
Image overlay opacity	Dims the banner images with an overlay.
Banner height	Determines the height of the image: Adapt to image - Keeps the image's original aspect ratio. Small Medium Large Extra large
Desktop content position	Positions the content relative to the image banner: Top Left - Positions the content to the top vertically and the left horizontally. Top Center - Positions the content to the top vertically and the center horizontally. Top Right - Positions the content to the top vertically and the right horizontally. Middle Left - Positions the content to the middle vertically and the left horizontally. Middle Center - Positions the content to the middle vertically and the center horizontally. Middle Right - Positions the content to the middle vertically and the right horizontally. Bottom Left - Positions the content to the bottom vertically and the left horizontally. Bottom Center - Positions the content to the bottom vertically and the center horizontally. Bottom Right - Positions the content to the bottom vertically and the right horizontally.
Show container on desktop	Show background for the content.
Desktop content alignment	Sets the alignment of the content on desktop: Left - Aligns the content to the left. Center - Aligns the content to the center. Right - Aligns the content to the right.
Desktop content width	Determines the width of the content on desktop: Small Medium Large
Color scheme	Set the color for the section.

Animations

Setting	Description
Image behavior	Animation for the image when scroll: None Ambient movement Zoom in on scroll

Mobile layout

Setting	Description
Mobile content alignment	Sets the alignment of the content on mobile: Left - Aligns the content to the left. Center - Aligns the content to the center. Right - Aligns the content to the right.
Stack images on mobile	Displays images in a vertical column on mobile.
Show content below images on mobile	The content displays below the images, instead of lying on the images.

Section padding

Setting	Description
Desktop left padding	Determines the width of the left inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Desktop right padding	Determines the width of the right inner space of the section on desktop. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Top padding	Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).
Bottom padding	Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).

Heading block

Setting	Description
Heading	The heading for this block.
Heading size	The size of the heading text: Small Medium Large Extra large

Text block

Setting	Description
Description	The text for this block.
Text size	The size of the text: Extra small Small Medium Large

Buttons block

Setting	Description
First button label	The text that displays on the first button.
First button link	The URL that you want the first button to link to.
First button style	Style of the first button: Filled Text link Outlined
Second button label	The text that displays on the second button.
Second button link	The URL that you want the second button to link to.
Second button style	Style of the second button: Filled Text link Outlined