Images with text overlay section
The Images with text overlay section shows up to 4 images with text on top in Highlight, in an asymmetrical layout or a regular grid.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Images with text overlay section shows up to 4 images with a heading, text and a button on top of each. Like the Featured collection section, it uses either Highlight's asymmetrical layout or a regular grid.
Where to find it: Online Store → Themes → Customize → Add section → Images with text overlay (Storytelling category).
Ways to use it:
- A collection list, with each image linking to a different collection.
- Product features, when you sell a single product and want to show several of its details.
- An alternative gallery: images without text, to break the flow of the page.
- Team members or selected vendors.
Layout
Layout sets how the images are arranged. The arrangement also depends on how many images (1 to 4) the section has.
- Asymmetrical (the default) gives the images different widths and positions, and some of them move at a different speed while the page scrolls (parallax). The first image is the largest.
- Regular grid shows evenly sized images: two per row, or one full-width image followed by two when there are three.
Text and colors
- Text alignment places the text of every image in one of nine positions, from Left top to Right bottom. Default: Left bottom.
- Custom text color colors the text and buttons over the images. Leave it empty to use the store text color.
- Background overlay lays a color over every image, so the text stays readable. Pick a color with some transparency, for example a semi-transparent black under white text.
- Heading shows a small title above the images. Leave it empty for no title.
Blocks
Image
Each Image block is one image with its text, up to 4. The section starts with three.
- Image picks the picture. It fills a fixed shape and is cropped around its focal point.
- Heading and Text are the text on the image.
- Button label adds an underlined link with an arrow.
- Link is where the button goes. Without a Button label, the whole image becomes the link.
Why is the whole image a link?
Because the block has a Link but no Button label. If your block has a link but you don't write a button label, the entire block becomes the link. Otherwise, the link applies only to the button.
How do I choose which part of the image shows?
Set the image's focal point. The images have fixed shapes, so they are cropped, and Highlight keeps the focal point visible. Select the image in the block, choose Edit, and drag the focal point onto the important part. You can also set it in Shopify admin → Content → Files.
All Images with text overlay settings
Every setting, with its type and default.
Accepts these blocks: Image (up to 4 blocks in the section).
Heading (text field, default: "Images with text overlay").
Layout (dropdown, default: Asymmetrical): Sets the arrangement: Asymmetrical gives the images different sizes and positions with parallax, Regular grid shows even images two per row. Both adapt to the number of images (1 to 4) Options: Asymmetrical, Regular grid.
Text alignment (dropdown, default: Left bottom): Places the text of every image in one of nine positions on the image. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Custom text color (color): Sets the color of the text and buttons over the images. Empty uses the store text color.
Background overlay (color): Lays a color over every image to keep the text readable. Use a color with transparency.
Images with text overlay section: SEO
Where to find it: Images with text overlay → SEO
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Image block
Where to find it: Images with text overlay → Add block → Image
Image (image): Sets the picture. It fills a fixed shape, cropped around the image's focal point.
Heading (text field, default: "Write your Story"): Sets the heading shown on the image.
Text (rich text, default: "Write some information about your brand, products or story."): Sets the text shown on the image under the heading.
Button label (text field): Sets the text of the link on the image. Without it, the whole image becomes the link.
Link (link): Sets where the button goes, or where the whole image goes when Button label is empty.
Related pages
- Featured collection section: the same two layouts for products.
- Collections list page: all your collections as image cards with text.
- Image with text section: one image next to the text.