This guide describes setting up the 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.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Main Settings Categories
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 |
Note: This section cannot be added to header or footer areas. The layout is fully responsive and will stack on mobile devices with the image above the text content.