Image with text section
The Image with text section shows up to 3 images side by side in Kingdom, each with a heading, text and an optional button on top.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Image with text section shows one to three images side by side, each with a heading, a text and an optional button on top. In the Add section list its preset is called Images with text.
Where to find it: select Add section in the theme editor, then choose Images with text (Add section category Storytelling).
Adding images
Each image is an Image with text block; the section holds up to 3. With two or three blocks, the images share the row equally.
- Background image sets the picture. It fills the block and is cropped to the section height, around the focal point you set on the image in Shopify.
- Heading and Text set the content shown on the image.
- Button label adds a button with that text; Link sets where the button goes.
- When Link is set and Button label is empty, the whole block becomes a link, and the image zooms in slightly when the mouse is over it.
On screens 768 px wide or less, the images stack one under the other: one image keeps the section height, two images are half the screen height each, three images about a third.
Text size and position
These section settings apply to every block:
- Image height sets the section height: Small (a quarter of the screen height), Medium (half, the default), Large (75 percent) or Full (the whole screen).
- Text container width limits how wide the text may run: Medium (half the block), Large (75 percent) or Full. Phones always use the full width.
- Heading size sets the heading size: Regular, Large or Extra large. Heading tag sets its HTML tag.
- Text alignment places the text in one of nine positions on the image (default Left bottom).
- Custom text color sets the color of the text and the button. Custom background color lays a tint of that color over the images at 36 percent opacity, which keeps light text readable on bright photos.
- Enable inner content spacing (default off) adds side padding and space between the images. See General section settings.
Why is the whole image a link?
Because the block has a Link but no Button label. Kingdom then turns the whole block into the link. Type a Button label to link only the button, or clear Link for no link at all.
Why is my text hard to read on the image?
Because the image is bright where the text sits. Set Custom background color to black for a darker tint, set Custom text color to white, or move the text with Text alignment to a calmer part of the image.
All Image with text settings
Every setting in this group, with its type and default.
Accepts these blocks: Image with text (up to 3 blocks in the section).
Image height (dropdown, default: Medium): Sets the section height as a share of the screen height: Small 25, Medium 50, Large 75, Full 100 percent. Options: Small, Medium, Large, Full.
Text container width (dropdown, default: Medium): Limits how wide the text runs inside each block. Phones always use the full width. Options: Medium, Large, Full.
Heading size (dropdown, default: Regular): Sets the size of the headings. Options: Regular, Large, Extra large.
Text alignment (dropdown, default: Left bottom): Places the text on each image. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Image with text section: Colors
Where to find it: Image with text → Colors
Custom text color (color, default: transparent): Sets the color of the headings, texts and buttons. Leave it transparent to use the body text color.
Custom background color (color, default: transparent): Lays a tint of this color over the images, at 36 percent opacity.
Image with text section: Gutter
Where to find it: Image with text → Gutter
Enable inner content spacing (checkbox): Adds the side padding and the space between the images. Off, the images touch and run edge to edge.
Heading tag (dropdown, default: H3): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Image with text block
Where to find it: Image with text → Add block → Image with text
Heading (text field, default: "Image with text").
Text (rich text, default: "Share your latest products, collections or promotions!").
Button label (text field): Adds a button with this text. Empty, the whole block becomes the link.
Link (link): The entire block will transform into a link unless there is a label for the button.
Background image (image): Sets the image behind the text. It is cropped to the section height, around its focal point.
Related pages
- Image section: one image without text, at its own proportions.
- Slideshow: horizontal section: several images with text, one at a time.
- Rich text section: text with an image beside it instead of under it.
- General section settings: custom colors and inner content spacing.