Image with Text Section
Use this section to create a flexible layout combining an image with text content.
Perfect for highlighting features, telling your brand story, or showcasing products with detailed descriptions.
Set up an Image with Text section
- Go to Customize theme
- In Theme editor, select the page where you want to add Image with Text
- Select "Add section" → "Image with text"
Image Settings
| Setting name | Description |
|---|---|
| Image | Upload image (recommended size depends on aspect ratio) |
| Aspect ratio | Choose from 1:1, 4:5, 2:3, or 16:9. Default is 1:1 |
Text Position Settings
| Setting name | Description |
|---|---|
| Text position relative to image | Choose Above, Below, Left, or Right. Default is left |
| Text alignment | Set horizontal alignment (Left, Center, Right). Default is center |
| Mobile text alignment | Set mobile-specific alignment. Default is center |
| Vertical text position | Position text Top, Center, or Bottom. Default is center |
Title Settings
| Setting name | Description |
|---|---|
| Heading | Enter title text. Default is "Your Heading Here" |
| Title text size | Multiple size options from XXS to 7XL with responsive variants. Default is XL |
| Title max width | Set maximum width (10-100%). Default is 80% |
| Line height | Adjust title line height (0.1-3em). Default is 1.0em |
Description Settings
| Setting name | Description |
|---|---|
| Text | Rich text content area |
| Content text size | Same size options as title. Default is SM |
| Description max width | Set maximum width (10-100%). Default is 50% |
| Line height | Adjust content line height (0.1-3em). Default is 1.5em |
Call to Action Settings
| Setting name | Description |
|---|---|
| Link | Set URL for CTA |
| Text | Enter button/link text |
| Style | Choose between Link or Button. Default is link |
| Text size | Select from XS to LG. Default is SM |
Section Settings
| Setting name | Description |
|---|---|
| Horizontal spacing | Choose None or Small. Default is none |
| Add outer gap | Enable section edge padding. Default is false |
| Section padding | Adjust top and bottom independently (0-100px). Default is 100px |
| Alternative color | Toggle alternative navigation link colors. Default is false |
| Color scheme | Select color scheme to match your design. Default is scheme-1 |
Best Practices
- Use high-quality images that complement text
- Keep text concise and scannable
- Add clear CTAs
- Test responsive stacking on mobile
Mobile Behavior
This section is fully responsive and will stack on mobile devices with the image above the text content.