To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Image banner".
Section width
Select the section width from the dropdown menu:
Full width
Page width
Custom width
Customize width
Determines the width of the section when you choose 'Custom width' option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel)
Custom corner radius
Select this checkbox to enable/disable custom corner radius.
(The 'Block corner radius' setting only take effect if this checkbox is ticked)
Block corner radius
Determines the corner radius of the block. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Image
Upload an image
Content inside image on mobile
Enable/disable checkbox
Mobile row height
Determines the mobile image height of the block. Can be from 40% to 200%, in 1% arithmetic increments
Desktop content position
Select desktop content position from the dropdown menu:
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)
Desktop content alignment
Select the alignment of content from the dropdown menu:
Left
Center
Right
Mobile content alignment
Select content alignment on the mobile from the dropdown menu:
Left
Center
Right
Custom content width
Select this checkbox to enable/disable custom content maximum width
(The 'Content width' setting only take effect if this checkbox is ticked)
Content width
Determines the content maximum width of the block. Can be from 300px to 1200px, in 10px arithmetic increments
Mobile color scheme
Select mobile color scheme from the dropdown menu:
Default
Custom
(The 3 following settings only take effect if this setting is "custom")
Text
Set the color for the text
Background
Set the background color for this section (If a background gradient is set, the section's background will be set according to the background gradient setting)
Background gradient
Set the background gradient for this section
Color scheme
Select a color scheme to set the text and background colors for the section
(This setting only take effect if the 'Mobile color scheme' setting is "Default")
Image overlay opacity on hover
Determines the image overlay opacity on hover of the block. Can be from 0% to 100%, in 10% arithmetic increments.
Background
Set the background color for image overlay opacity on hover
Image behavior
Select the image behavior from the dropdown menu:
None
Ambient movement
Fixed background position
Parallax on scroll
Zoom in on scroll
Zoom in on hover
Text animation
Select the text animation from the dropdown menu:
None
Fade in up
Fade in down
Zoom in
Zoom out
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Top padding on mobile
Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding on mobile
Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
