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, products, or services in a compelling and interactive format.

Ideal use cases include:

Highlighting product advantages and key features
Showcasing featured products
Sharing your brand’s mission or story
Providing visual context for services
Showcasing team members or contributors
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 Examples:

The Image with Text section displayed on the product detail page, used as a banner section to promote a new product and highlight its ingredients.

The Image with Text section displayed on the About Us page, used to promote the “Join Our Team” message and highlight open positions.

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 "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
Block. Available block types include:

By default:

Heading (Article "Heading")
Text (Article "Text block")
Button (Article "Button")

You can also add:

Caption (Article "Caption")
Contact info (Article "Contact info")
Product list (Article "Product list")
Divider (Article "Divider")

General settings

Select a setting described in the following table:

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 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
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.