Image with text
Pair one image or background video with a focused content panel.
Image with text is the clearest choice for one visual and one message. Use it for a product benefit, collection introduction, founder story, or campaign call to action.
Desktop example: compare the media width, content width, alignment, and surrounding section spacing as one composition.
Mobile example: this fixture uses media-first order. Choose Content first when the message should precede the image on small screens.
[!NOTE] The setting labels, options, defaults, and parallax dependency below match the current schema and implementation. The supplied screenshots cover a left-media desktop composition and media-first mobile order; alternate media types, positions, widths, fallbacks, and reduced-motion behavior still need matching accepted fixtures.
Add Image with text
In Shopify's theme editor, add Image with text to a compatible template or open an existing section. It is not available in the header or overlay groups.
Content
| Setting | What it controls | Default |
|---|---|---|
| Eyebrow | Optional short context above the heading. | No default. |
| Heading | Main message for the content panel. | Tell your story. |
| Text | Rich text below the heading. | Pair an image or video with details about a product, collection, or brand story. |
| Button label | Visible action text. | Learn more. |
| Button link | Destination for the button. | No default. |
| Button style | Visual treatment for the action. | Primary, Secondary, or Text link. Default: Primary. |
The button is rendered only when both Button label and Button link are present. Leave both empty when this section is informational only.
Media
| Setting | What it controls | Options or default |
|---|---|---|
| Media type | Chooses a still image or background video presentation. | Image or Video. Default: Image. |
| Image / video fallback | Main image for the image mode and still fallback for video. | No default. |
| Mobile image | Optional mobile-specific image or video fallback. | Uses the main image when blank. |
| Desktop background video | Video used when Media type is Video. | No default. |
| Mobile background video | Optional mobile-specific video. | Uses the desktop video when blank. |
| Media fit | Decides whether media fills the frame or remains contained. | Cover or Contain. Default: Cover. |
| Desktop media ratio | Sets the desktop media frame ratio. | Portrait, Square, Landscape, or Wide. Default: Portrait. |
| Mobile media ratio | Sets the mobile media frame ratio. | Portrait, Square, or Landscape. Default: Square. |
When Media type is Video, the desktop video is used when available; the image is the still fallback. When a mobile video is blank, the desktop video is used. Provide a useful fallback because motion can be disabled or unavailable.
Cover fills the selected frame and may crop the source. Contain preserves the full source inside the frame and may leave surrounding space. Check the focal subject in both ratios rather than assuming the desktop crop will work on mobile.
Layout
| Setting | What it controls | Options or default |
|---|---|---|
| Full width | Removes the normal page-width constraint from the section container. | Disabled by default. |
| Media position | Places media on the desktop Left or Right. | Left or Right. Default: Left. |
| Mobile content order | Chooses which column appears first on mobile. | Media first or Content first. Default: Media first. |
| Desktop media width | Allocates the desktop composition to media. | 40%, 50%, or 60%. Default: 50%. |
| Content alignment | Aligns text and the button horizontally. | Left, Center, or Right. Default: Left. |
| Content vertical alignment | Aligns the content panel beside the media. | Top, Center, or Bottom. Default: Center. |
| Content width | Limits the content panel width. | Small, Medium, or Large. Default: Medium. |
| Background style | Chooses the section surface treatment. | Default, Subtle, or Soft. Default: Default. |
Use Mobile content order to control reading priority independently of the desktop Media position. The screenshot shows Media first; it does not prove how every combination behaves.
Motion and controls
| Setting | What it controls | Default or dependency |
|---|---|---|
| Enable parallax for this section | Opts this section into scroll parallax when the global setting permits it. | Enabled by default. Requires global Enable parallax effects; reduced-motion preferences turn it off. |
Video is background media rather than a separate user-controlled player in this section. Do not put essential instructions only in video frames or audio.
Spacing
| Setting | What it controls | Options or default |
|---|---|---|
| Section spacing | Chooses the section's spacing scale. | None, Small, Medium, or Large. Default: Medium. |
| Top spacing | Adds or removes the section's top spacing. | Enabled by default. |
| Bottom spacing | Adds or removes the section's bottom spacing. | Enabled by default. |
Desktop and mobile behavior
Desktop uses the selected media position, media width, content alignment, vertical alignment, and desktop ratio. Mobile has its own ratio, optional image/video source, and content order. Do not use the desktop screenshot as proof of mobile crop, and do not document a breakpoint that has not been accepted from the current build.
Media and accessibility
- Write alt text for the source image, or ensure the heading is a suitable fallback when the image is decorative or the source has no alt text.
- Choose Contain when cropping would remove information; choose Cover only after checking the focal subject.
- Make the heading and button destination understandable without the image or video.
- Check contrast for each Background style and button style.
- Test with reduced motion and with the video unavailable so the fallback remains useful.
Common issues
| Symptom | Safe check |
|---|---|
| The button is not visible | Set both Button label and Button link. |
| The mobile image is not different | Upload Mobile image; a blank field deliberately reuses the main image. |
| Video shows a still image | Confirm Media type is Video, a desktop video exists, and the fallback image is intentional. |
| The subject is cropped | Try Contain, a different ratio, or adjust the source focal point before changing layout. |
| Parallax does not move | Confirm global Enable parallax effects is on and that reduced-motion is not active. |
Related guides
Evidence boundary
The supplied desktop and mobile images are approved fixtures for the states named in their captions. Capture the Right position, Content first order, alternate ratios, video fallback, keyboard focus, and reduced-motion states separately before treating those combinations as final behavior.