§14 / SECTIONS
REF: TG–DOC–14 · REV. 1.7
Image with text
The Image with text section (
sections/image-with-text.liquid) places an image next to content built from theme blocks. On screens 750 px and wider it is two equal columns. On smaller screens the columns stack.TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Setup
- Add Image with text (category Images). The preset adds a label, a heading, body text and a button.
- Upload an Image.
- Set Image position. Alternate Left and Right when stacking several of these sections.
- Choose Image shape, Media style and Content position.
Settings
| Setting | ID | Type | Default | Options |
|---|---|---|---|---|
| Image | image | Image | — | |
| Image position | layout | Select | Left |
|
| Image shape | ratio | Select | Portrait |
|
| Content position | align | Select | Middle |
|
| Media style | media_mode | Select | Adapt to shape |
|
| Image touches the screen edge | full_bleed | Checkbox | On | |
| Color scheme | color_scheme | Color scheme | scheme-2 |
Media styles
| Media style | Behavior |
|---|---|
| Adapt to shape | The image uses the Image shape ratio. |
| Fixed band | The image is 500 px tall (380 px on mobile) and content is vertically centered. On mobile the image appears below the text. |
| Fill column | The image uses a fixed 896:1200 ratio, centered in its column. Buttons are styled as underlined text links. |
Blocks
The section accepts theme blocks (@theme) and app blocks (@app). Theme blocks in Tangent: Text, Heading, Button, Group, Image, Spacer, Custom Liquid.
Mobile layout
Below 750 px the columns stack with the image first, except in Fixed band, where the image follows the text. Image position only affects the two-column layout.
Structure
1Image with text (sections/image-with-text.liquid)2└── .iwt grid (2 columns from 750 px)3 ├── Media column: image or placeholder4 └── Content column: theme blocks (Top / Middle / Bottom)text
For developers
Last updated for Tangent 1.7