Image with text pairs an image with a column of text. It is the section for telling the story behind a collection, a fabric or the brand. The text is built from theme blocks, so it can hold headings, paragraphs, buttons, accordion rows or anything else. The Masthead and Almanac presets use it on the home page.
Where to find it
In the theme editor, click Add section and choose Image with text. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Layout offers three arrangements:
- Standard: the image on one side, the text on the other.
- Offset pair: adds a second, smaller image that overlaps the corner of the first. A close-up beside a full-length shot works well.
- Floating card: the image runs the full width of the screen, and the text sits on a card over it.
Image position chooses the side. With the floating card, the card sits on the other side from the one you pick. Overlap text and image puts the text on a panel that laps over the edge of the image on desktop. On phones the image and text stack, and Show first on mobile decides which comes first.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Layout | Standard, Offset pair or Floating card. Default: Standard. | How the image and text are arranged. |
| Image | Image. | The main image. Set its focal point. |
| Second image | Image. | The second image, for the Offset pair layout. A close-up or detail works well. |
| Image ratio | Adapt to image, Portrait (4:5), Square (1:1) or Landscape (3:2). Default: Portrait (4:5). | The shape the image is cropped to. Adapt to image keeps its own shape. |
| Image position | Left or Right. Default: Left. | Which side the image sits on, on desktop. |
| Overlap text and image | On or off. Default: off. | On desktop, sets the text on a panel that laps over the edge of the image. |
| Vertical alignment | Top, Middle or Bottom. Default: Middle. | Lines the text up with the top, middle or bottom of the image. |
| Text alignment | Left or Center. Default: Left. | Aligns the text to the left or the center. |
| Mobile | ||
| Show first on mobile | Image or Text. Default: Image. | Whether the image or the text comes first on phones. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
Theme blocks
This section is filled with Masthead's theme blocks: headings, text, buttons, images, videos, products, collections, accordion rows, spacers and groups, in any order and nested inside each other. Theme blocks explains each one. The section holds up to 10 blocks at its top level.
App blocks
Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Image | 2000 x 2500 px for portrait (4:5) | Cropped to the Image ratio you choose: 4:5, 1:1 or 3:2. With Floating card, use a landscape image at least 3000 px wide. |
| Second image | 1200 x 1500 px | Shown smaller, overlapping the first. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Alternate Image position when you stack two of these sections, so the page zigzags.
- Give the section a different color scheme from its neighbors to set a story apart.
- Keep the text short enough that it is no taller than the image.