General settings (Image banner)
| Setting | Description |
| First image | Choose an image from your media library, upload a new one, or search for free stock images using the “Explore free images” option. *The image takes up the full width if you don't add a second image. |
| Enable custom image height | Enable this toggle to manually control the height of your media. This gives you more flexibility over the layout and appearance of media in the section. |
| Media height | Use slider to change media height when “Enable custom image height” is turned on. |
| First image for mobile (Not required, recommended max width 550px) | Choose an image from your media library, upload a new one, or search for free stock images using the “Explore free images” option. *If you do not add an image, then it will be like on the desktop version. |
| Second image | Choose an image from your media library, upload a new one, or search for free stock images using the “Explore free images” option. *The image takes up half the width of the section. |
| Second image for mobile (Not required, recommended max width 550px) | Choose an image from your media library, upload a new one, or search for free stock images using the “Explore free images” option. *If you do not add an image, then it will be like on the desktop version. |
| Adapt section height to first image size | Mark the checkbox to make all images the same size as the first image. |
| Video | Select a video to display in this section. You can upload a video file to showcase product demos, brand stories, or promotional content. |
| Desktop text position (Works only with adapt height) |
|
| Media overlay opacity | Use the slider to adjust the opacity of the background overlay. |
| Add parallax effect on desktop | Add parallax effect by marking the checkbox. Click save to see the changes. Parallax effects involve a website’s background moving at a different speed than the foreground content. This visual technique creates an illusion of depth, which leads to a faux-3D effect upon scroll. |
| Text box width | Use the slider to adjust text box width. |
Mobile Layout
| Setting | Description |
| Stack images on mobile | Enable this toggle to display the second image below the first image on mobile devices. This improves readability and layout on smaller screens. |
| Show text outside images | You can enable this toggle to show text outside the images. When disabled, the images act as backgrounds for the text. |
Section settings
| Setting | Description |
| Section top space | The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider. |
| Section bottom space | The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section. |
| Background color | To change the background color of a section, click the box containing the color circle and name to open the color picker. Then, select your desired color. The chosen color will be applied as the section’s background, helping to enhance the visual appeal and match your store’s branding. |