Image banner
Pair image with text to share with customers the latest news about your store or draw attention to new collections.
GENERAL
Color scheme
Choose a separate color scheme for the section.
Color background
Select to apply the color scheme of the section to its background. Note that the section background does not show with screen width and zero paddings.
Width
Choose the width of the section on the page.
Desktop ratio
Adjust the proportion between the width and height of the background image and make its orientation square, horizontal, or vertical. Note that the ratio adapts to the section content: as the content volume increases, the section height increases as well.
Mobile ratio
Adjust the proportion between the width and height of the background image and make its orientation square, horizontal, or vertical. Note that the ratio adapts to the section content: as the content volume increases, the section height increases as well.
IMAGE
Desktop image
Select an image for the banner. You can choose images either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.
Mobile image
Select an image for the banner. You can choose images either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.
Video
You can add a video instead of an image. In this case, the video has a priority. You can either choose a video from your files or upload a new video from your device. Note that the newly added videos are also saved to your files. You can further edit the uploaded video: add a cover image and fill in an alt text.
Desktop overlay opacity
Dim the image to increase legibility of the content in the foreground.
Mobile overlay opacity
Dim the image to increase legibility of the content in the foreground.
CONTENT
Subheading
Fill in the subheading to draw customers' attention.
Heading
Fill in the heading to state what you want to convey.
Body
Fill in the body with the information you want to convey.
Heading size
Choose the font size for the content heading.
Body size
Choose the font size for the content body. Note that the option applies only to the 'Paragraph' body text formatting.
CONTENT POSITION
Desktop position
Choose the content position on the image banner.
Desktop alignment
Choose the content alignment within its background.
Desktop width
Adjust the maximal content width within its background. Note that as the content volume decreases, the width decreases as well.
Desktop spacing
Adjust the spacing between the borders of the section and the content within it.
Mobile position
Choose the content position on the image banner.
Mobile alignment
Choose the content alignment within its background.
CONTENT BACKGROUND
Desktop
Choose the type of background for the content to make it more visible.
None | hides content background |
Solid | shows a square filled with contrasting color |
Outline | shows a square with only its borders colored |
Shadow | shows a blurred oval of contrasting color |
Blurred | shows a fully blurred square |
Transparent | shows a see-through square |
Mobile
Choose the type of background for the content to make it more visible.
None | hides content background |
Solid | shows a square filled with contrasting color |
Outline | shows a square with only its borders colored |
Shadow | shows a blurred oval of contrasting color |
Blurred | shows a fully blurred square |
Transparent | shows a see-through square |
BUTTONS
First button label
Fill in the button name to introduce the page it redirects to. Without a name, the button disappears. Note that if you don't fill in both button labels, the whole banner will be the button for the link ('First button link' has the priority between the two).
First button link
Choose a page within your store or enter a URL to redirect customers to another page when they select the button.
First button style
Choose the style of the button.
Solid | the button filled with color |
Outline | the button with only its borders colored |
Text | the label with an arrow icon |
Second button label
Fill in the button name to introduce the page it redirects to. Without a name, the button disappears. Note that if you don't fill in both button labels, the whole banner will be the button for the link ('First button link' has the priority between the two).
Second button link
Choose a page within your store or enter a URL to redirect customers to another page when they select the button.
Second button style
Choose the style of the button.
Solid | the button filled with color |
Outline | the button with only its borders colored |
Text | the label with an arrow icon |
PADDINGS
Add side paddings
Select to add extra space on the sides between the section and the screen.
Top padding
Adjust the space between the section and the previous element on the page.
Bottom padding
Adjust the space between the section and the following element on the page.
Last updated