What image with text is good for
Image with text is the workhorse of a store page. It is how you explain one idea at a time: what makes a material special, how a product is made, who is behind the brand, or why a product solves a problem. Alternating several of them down a page, image left then image right, creates an easy reading rhythm.
- Product benefits — one benefit per section, each with a close-up photo.
- Brand story — a founder photo next to a short paragraph on your About page.
- Materials and process — workshop or ingredient photos with an explanation.
- Collection intros — a mood image and a link to the collection.
Options on Shopify
Shopify's free themes include an image with text section, which covers the basic layout well. Merchants add other layouts when they want more than one image, an image shape such as a circle, a reveal animation on scroll, an accordion or feature list beside the image, or video instead of a photo.
| Layout family in Section Cloud | What it adds |
|---|---|
| Classic image + text | Image left or right, heading, sub-heading, text and button, with alignment settings |
| Layered images | Several images stacked or overlapping, with position and stacking order per image |
| Image + feature list | Icon and heading items beside the image |
| Image + accordion | Collapsible items next to the image, each with a title and description |
| Media + text | The media can be an image or a video, with autoplay, loop and controls |
| Image + text slider | Several slides, each with its own image, heading and button |
Add an image with text section step by step
- Find a layout
In the app, open Sections, choose the Image with text category, or search "image with text". Open the DEMO to see the layout on mobile too.
- Install
Click Install (or Purchase), pick your theme in Choose theme, click Install, then Customize.
- Add it to a page
In the theme editor, open the page and click Add section, then choose the section, usually named ✨ Image with text.
- Upload the image
Set the Image, and choose an aspect ratio for desktop and mobile.
- Write the content
Edit the heading, sub-heading and text, and set the button label and URL.
- Set the layout
Choose the image side on desktop (left or right) and whether the image goes above or below the text on mobile. Save.
Settings you will find
| Setting | What it does |
|---|---|
| Image Position - Desktop / Image position (desktop) | Image on the left or right. |
| Image Position - Mobile | Image above or below the text on phones. |
| Image Aspect Ratio (desktop and mobile) | Portrait, Square, Landscape or Original. |
| Image shape | Default or Round, in layouts that offer it. |
| Heading, Sub-Heading, text | The message. Headings are rich text in many layouts, so you can bold a word. |
| Content Horizontal Align | Aligns the text left, center or right. |
| Button Style | Link, outline or filled styles, some with an arrow. |
| Reveal on scroll | None, Fade or Slide up as the section comes into view. |
To create a zig-zag page, add several image with text sections and alternate the image side in each one.
Writing the text
Treat the heading as the point and the paragraph as the proof. "Double-stitched seams" tells the shopper what to notice; one or two sentences underneath explain why it matters to them. If the section has a button, make it the natural next step from that one idea — "See sizes", "Read our story", "Shop linen" — rather than a generic "Learn more".
Because most layouts use rich text for the heading, you can bold a single word for emphasis. Keep paragraphs to about 25–50 words; on a phone, a long paragraph next to an image becomes a long wall of text under it.
Example: three benefits on a product page
- Section 1 — image left: close-up of the stitching. Heading "Double-stitched seams". Text: two sentences on why it lasts.
- Section 2 — image right: the fabric under water. Heading "Water-resistant coating".
- Section 3 — image left: the product folded into its pouch. Heading "Packs to the size of a water bottle". Button "See sizes".
On mobile, every section puts the image on top so the order stays photo, then explanation.
Tips and common mistakes
- One idea per section. If the text needs three paragraphs, split it.
- Use images that show the point you are making, not generic stock photos.
- Keep the same aspect ratio across a run of sections so the page looks tidy.
- Use reveal animations sparingly; one style across the page feels calmer.
- Check the mobile order: image on top usually reads best.
Frequently asked questions
My theme already has image with text. Why add another?
Your theme's version is great for the basic layout. Extra layouts help when you want layered images, a round image shape, a feature list or accordion beside the image, or video instead of a photo.
Can I use a video instead of an image?
Yes, in media layouts where the media can be set to an image or a video.
How do I put the image on the right?
Change the desktop image position setting to Right. Mobile has its own setting for above or below the text.
Can I add a button?
Yes. Most layouts have a button label and URL, plus a Button Style choice.
Will it match my theme's fonts?
Turn on the Sections Cloud app embed and set Use custom font, Heading font and Body font to match your theme.
