Image with Text
Display a two-column layout combining an image with a text content area, ideal for brand storytelling, feature highlights, and promotional messaging.
The Image with Text section creates a two-column layout that pairs an image with a text content area. The image position can be set to display on the left or right side of the text. The content area supports a heading, rich text body, and call-to-action button. On mobile devices the layout stacks vertically with the image displayed above the content. Content alignment can be set independently to match the surrounding page design.
How to Edit the Image with Text Section
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the active theme.
- Select the Image with Text section from the left sidebar.
- Adjust the settings according to your preferences.
- Click Save to apply your changes.
Section Settings
General
- Color Scheme: Select a color scheme applied to the section.
- Padding Top: Controls the top padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Padding Bottom: Controls the bottom padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Top: Controls the spacing above the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Bottom: Controls the spacing below the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Heading: Add an optional section heading displayed above the two-column layout.
Content
- Image: Upload the image displayed in the image column.
- Layout: Controls the position of the image relative to the text content. Options: Image Left — image on the left, text on the right; Image Right — image on the right, text on the left. Default: Image Right.
- Content Alignment: Controls the horizontal alignment of the text content. Options: Left, Center, Right. Default: Center.
- Content Heading: Enter the heading displayed in the text content area.
- Text: Add rich text body content supporting formatting such as bold, italic, lists, and links.
- Button Label: Enter the text for the call-to-action button.
- Button Link: Assign a destination URL for the button.
Fallback Behaviour
If no image is uploaded, a placeholder graphic is displayed automatically in the image column. This ensures the section remains visually structured during store setup and content management.
Best Practices
Do
- Use high-quality images that complement the text content.
- Keep the content heading concise and directly relevant to the image.
- Use left alignment for text-heavy content to improve readability.
- Alternate image position between sections to create visual rhythm on the page.
- Link the button to a relevant collection, product, or landing page.
Don't
- Use low-resolution images that appear blurry alongside sharp text.
- Add excessive body text that makes the section feel unbalanced.
- Leave the button label without a destination URL.
- Use center alignment for long paragraphs of body text as it reduces readability.
- Use the same image position for every Image with Text section on the same page.