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.
Install the section
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
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
November 6th, 2024
- Minor bug fixes.
September 25th, 2024
- Image with text added to Theme Sections.