🧰 Image with text

The Image with text section is a versatile and engaging way to combine media and messaging together.

To add an Image with text section install or open Theme Updater & Backups, select your theme, add the section to a template, then customize section settings and content blocks. 

Add the section to a template

Click Customize to open the theme editor for the selected theme.

Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.

Scroll down to the bottom of your default sections list and select 🧰 Image with text.

Customize section settings

Click the Image with text section to open its settings.

Select image

Click Select image to connect the image with the section.

Adjust image height

Select an option from the Image height dropdown to control the height of the image. The options are Small, Medium, Large, or Adapt to image. 

Adjust image width

Select a Small, Medium, or Large image width with the Desktop image width setting.

Reposition image and content

'Content' refers to the text and button elements of the section.

Place the Image first or Image second with the Desktop image placement setting.

For mobile devices, place the Image first or Image second with the Mobile image placement setting.

Select Top, Center, or Bottom to arrange the Desktop content position. 

Align content

Use the Desktop content alignment and Mobile content alignment to control device-specific alignment to the Left, Center, or Right.

Select colors

Choose colors for the section's Text color and Background color.

Adjust spacing

Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.

Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.

Customize content blocks

In this section there are content blocks for the Heading, Text, and Button components.

Open one of the preset blocks to customize it.

Add more blocks by selecting (+) Add block.

Add heading

Use the Heading field to add your heading copy.

Add text

Use the Content field to add your text copy.

Add button

Customize the text for the button with the Button label field. 

Connect the URL for your button with the Button link field.

Select either Fill or Outline for the Button style, then choose contrasting colors for the button's Background color and Text color.

Changelog

December 3rd, 2024

• Updates to link hover states and animations

November 6th, 2024

• Minor bug fixes.

September 25th, 2024

• Image with text added to Theme Sections.