The image banner section supports a image and a text box with buttons. On mobile, you can override the desktop image to get better display on mobile screen.
On desktop, the text box partially covers the image. On mobile, the text box displays below the image. You can change the text alignment between right, left, or center for both desktop and mobile.
Section settings
Setting | Description |
---|---|
Image | The main image for the banner. |
Mobile image | Override the main image on mobile screen. If empty, the main image will be displayed. |
Edit alt text | Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
Image overlay opacity | Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%. |
Banner height |
Set the height of your banner images using the drop-down menu.
|
Banner height on mobile |
Set the height of your banner images using the drop-down menu.
|
Desktop content position | Set the position of the desktop image banner. Choose between top, middle, or bottom, and right, left, or center. |
Show container on desktop | Places your banner image text in a text box over the banner image for customers shopping from a desktop computer. |
Desktop content alignment | Set the alignment of the image banner text for desktop computers. Choose between right, left, or center. |
Mobile content alignment | Set the alignment of the image banner text for mobile devices. Choose between right, left, or center. |
Show text below image on mobile | Display text below the image on mobile. |
Heading block
Setting | Description |
---|---|
Heading | Large text for the title of the text box. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Enable bold heading | Display the heading in the bold style. |
Text block
Setting | Description |
---|---|
Description | Displays paragraph-style text. |
Text style | Changes the style of text in the image banner. Choose between Body, Subtitle, and Uppercase. |
Button block
Setting | Description |
---|---|
Button label | The text displays on the button. |
Button link | The URL that you want the button to link to. |
Button style | Display the button as a solid button, outline button or a link. |
Comments
0 comments
Article is closed for comments.