Editorial grid lays out two to five images the way a magazine would: different sizes and shapes, set off against each other instead of in a tidy row. Each image can carry a numbered caption and a link, so the grid works as a campaign page, a set of collection links, or simply a mood board. It is part of the Masthead preset's home page.
Where to find it
In the theme editor, click Add section and choose Editorial grid. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
There is no layout setting. The layout follows the number of Image blocks, and each image is cropped to the shape its place calls for:
- Two images: a wide lead image, and a narrower second image set lower down the page.
- Three images: a tall lead image, with two smaller images stepping down beside it.
- Four images: a tall portrait, a square and an offset portrait, with a landscape image beneath.
- Five images: three across with the middle one set lower, then a landscape and a square beneath.
The order of the blocks decides which image gets which place, so drag the blocks to rearrange the grid. On mobile, the first image runs the full width and the rest follow two to a row.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| 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
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 5 blocks.
Image
One image in the grid, with an optional caption and link. Captions are numbered 01, 02, 03 in block order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The image. It is cropped around its focal point to fit its place in the grid. |
| Caption | Text. | A line under the image, such as the name of the look or the collection. Leave empty for no caption. |
| Link | Link. | Optional. Makes the image and its caption a link. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Each image | 2000 px on the longer side | Most places are 4:5 portrait; some are square or landscape, depending on how many images there are. Leave room around the subject and set a focal point, so any crop works. |
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
- Try the same images in a different order. The lead place suits your strongest photo.
- Mix distances: one full-length shot, one detail, one still life. The uneven layout rewards variety.
- Add a fifth image only if it earns its place. Three or four often look more deliberate.