Image with text

What is the Image with text section?

The "Image with Text" section combines visuals with text to showcase your brand, products, or promotions effectively. Customize easily to align with your store's story and aesthetic.

Main settings

Heading

• Heading: Set the title for the image with text section to introduce the content.

Desktop Layout

• Desktop layout: Choose the layout for desktop devices (options: Image first, Text first).
• Desktop percentage image width: Adjust the percentage width of the image on desktop devices.
• Make section full width: Enable this setting to make the section span the entire width of the container.

Section Height

Height

• Height: Choose between adapting the height to the image or setting a fixed height.
• Desktop fixed height: Adjust the fixed height for desktop view.
• Mobile fixed height: Adjust the fixed height for mobile view.

Colors

• Heading color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Section background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the background color.
• Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Text container color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the text container background color.

Large Screen Version

Image

• Image: Select an image for the large screen version of the section.

Large Screen Text Alignment

• Large screen text alignment: Choose the alignment of the text on the section for large screens (options: Top, Center, Bottom, Left, Center, Right).

Mobile Version

Image

• Image: Select an image for the mobile version of the section.

Mobile Screen Text Alignment

• Mobile screen text alignment: Choose the alignment of the text on the section for mobile screens (options: Left, Center, Right).

Section Spacing

• Distance from the top: Adjust the spacing from the top of the section.
• Distance from the bottom: Adjust the spacing from the bottom of the section. ​

Customize heading block

Click one of the preloaded heading block to customize it.

Customize text block

Click one of the preloaded text block to customize it.

Customize button block

Click one of the preloaded button block to customize it.

Mobile view example