Image with text settings

Setting	Description
Image	Choose an image for your banner. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.
Image height	You can use this slider to adjust the image height.
Desktop image width	Choose the width of the image for desktop view: Small Medium Large Extra large
Desktop image placement	Adjust the placement of the image on the desktop view: Image First: This option displays the image on the left side. Image Second: This option displays the image on the right side.
Desktop content position	Select the vertical alignment of image Top: Image aligned with the top of the content container (heading, description, button, product list). Middle: Centered within the height of the content container. Bottom: Aligned with the bottom of the content container.
Desktop content alignment	Choose the horizontal alignment of the content: Left Center Right
Make section full width	Enable this option to extend the section to the full width of the page, making its background stretch across the entire screen, while the content remains confined within the container.
Color scheme	Add a color scheme to the entire section from the dropdown list. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.
Container color scheme	Add a color scheme to the text container. A color scheme consists of a predefined set of colors you can apply to the text container.

Animations

Setting

Description

Image behavior

Choose an animation for your image:

None (default): The image remains static without any animation.
Ambient Movement: The image slowly moves within its container.
Zoom In on Scroll: When a customer scrolls the page, the foreground elements, such as text and buttons, move at the same speed, while the background stays fixed and the image zooms in. To activate this option, check if “Reveal sections on scroll” is enabled in animations tab of theme settings.

Mobile layout

Setting

Description

Mobile image placement

Adjust the placement of the image on the desktop view:

Image First: This option displays the image at the top of the section.
Image Second: This option displays the image at the bottom of the section.

Mobile content alignment

Choose the horizontal alignment of the content on mobile:

Left
Center
Right

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.