Displays images and custom content side by side. Suitable for product highlights, promotions, brand stories, and campaign content.
Homepage
Product page
Landing page
Brand story
Promotional campaign
Shopify Admin → Online Store → Themes → Customize → Add section → Image with text
Section heading: Adds a title and supporting text.
Column image: Displays one or more masonry images.
Column: Contains text, buttons, countdowns, social links, and other content blocks.
Setting | Description |
|---|---|
Text alignment | Aligns the heading left, center, or right. |
Spacing between items | Adjusts spacing between heading blocks. |
Margin bottom | Sets the space below the section heading. |
The section heading supports Heading and Text blocks with responsive size, color, font weight, visibility, and letter-spacing settings.
Setting | Description |
|---|---|
Image | Uploads the image. |
Column start and end | Controls the image width within the masonry grid. |
Row start and end | Controls the image height and vertical position. |
Image hover effect | Applies an effect to the image on hover. |
Item effect when hover | Applies an effect to the entire image item. |
Rounded | Controls the image corner radius. |
Setting | Description |
|---|---|
Max height image | Limits the image height within the column. |
Image position on mobile | Places the image before or after the text on mobile. |
Setting | Description |
|---|---|
Text alignment | Aligns content on desktop and mobile. |
Content align center | Vertically centers content inside the column. |
Horizontal padding | Controls left and right spacing. |
Vertical padding | Controls top and bottom spacing. |
Mobile padding | Sets separate spacing for mobile devices. |
Block | Description |
|---|---|
Heading / Text | Adds responsive titles and supporting content. |
Paragraph | Adds longer text with custom typography. |
Button | Adds a linked call-to-action. |
Countdown | Displays a promotional countdown timer. |
Spacer | Controls spacing between blocks. |
Social | Displays social-media icons when supported. |
Custom font settings only apply when Custom size inline is selected.
Content padding and image order should be checked separately on mobile.
Hover effects may resize or crop images.
The countdown can be hidden or replaced with a message when it finishes.
Use clear images with consistent quality.
Keep the content focused on one message and action.
Use the masonry grid carefully to avoid uneven spacing.
Place the image first on mobile when visual context is important.
Keep countdown campaigns accurate and time-limited.
Check text alignment, padding, and image height on all devices.
Issue | Solution |
|---|---|
Masonry layout looks uneven | Review the column and row start/end values. |
Image appears in the wrong mobile position | Change Image position on mobile. |
Content is not vertically centered | Enable Content align center. |
Image is cropped | Adjust Max height or masonry grid values. |
Countdown shows the wrong time | Check the target year, month, day, hour, and minute. |
Button does not work | Add a valid link in the Button block. |