Image with text settings

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.

Demo Example:

The Image with text section displayed on the about us page, used as a banner section.

How to access the Image with text section

Note: Section cannot be added to the Password page.

From any page, click on “Add Section” and choose “Image with text” from the list.

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Image with text section

Basic Components

The “Image with text” section consists of two primary components:

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Available block types include:

Caption (Article "Caption")
Heading (Article "Heading")
Text (Article "Text")
Button (Article "Button")

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Select a setting described in the following table:

Setting	Description
Layout	Full width: The image banner will span the full width of the page. Paddings: The image banner spans the entire width of the page but includes equal padding on both sides to create spacing around the content. Grid: The image banner will be sized to match the container of other sections.
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 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
Content layout	No Overlap: The text and image are displayed in a standard banner layout, with the image on the left or right and the text in a separate container. Overlap: The text container is placed over the image, creating a layered effect.
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