Image with text

This guide describes the Image with text section.

The Image with text section offers a flexible way to create visually appealing layouts that blend imagery with informative content. It's designed to help you present your brand, or services, in a compelling and interactive format.

Ideal use cases include:

Sharing your brand’s mission or story
Providing visual context for services
Illustrating step-by-step processes
Displaying multiple promotional visuals in one section

This section offers a high level of design control, allowing you to adjust image placement and content layout to suit both desktop and mobile experiences.

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, or replace it.
Image fit	Control how the side image is displayed in the section: Cover – The image is scaled to completely cover the image area. Parts of the image may be cropped to keep its proportions. Contain – The entire image is shown inside the image area without cropping. Empty space may appear if the image doesn’t fill the area.
Image height	Adapt to image Small Medium Large
Desktop image width	Choose the width of the image for desktop view: Small Medium 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
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.

Background image

Setting	Description
Image	Choose a background image for image with text section. 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 mobile	You can use a landscape image for desktop and a square or portrait image for mobile. This allows you to add an image with the appropriate ratio for each device, ensuring optimal display.
Image fit	Choose how the background image is displayed within the section. Original – Displays the image in its original size and proportions. The image won’t be stretched or cropped, which may leave empty space if the image doesn’t fully cover the area. Fill – Scales and crops the image so that it completely covers the section background. Parts of the image may be cut off to maintain proportions.

Mobile layout

Setting

Description

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.