Blog posts

Your latest posts, as a small grid of cards with the photograph doing the work.

Each post is one card: the featured image across the top on a 3:2 crop, then a meta line (01 · 12 June · Inspiration), the headline, and a single line of the opening. A "Read the journal" link under the grid leads to the blog itself.

It keeps the numbering — 01, 02, 03 in publication order, so the section still reads as a journal rather than a pile of links.
The category is the post's first tag — tag your articles in Shopify admin and the section picks it up. Untagged posts simply show the number and date.
The whole card is the link — one clean tap target, one accessible name, nothing nested inside it.

Use it near the foot of a homepage, where the images give the section enough presence to close the page.

Try it

Change the heading, drag Maximum posts, turn the thumbnails and dates off, and use the screen-size and light/dark buttons in the preview header to check a phone and dark mode.

From the Design Journal

0112 June 2026Inspiration
What a galley kitchen actually needs
A narrow room is not a smaller kitchen, it is a different one. Where the sink lands decides…
0228 May 2026Guides
Wet rooms, drainage and the things nobody tells you
Falls, tanking and the linear drain: three decisions taken before the first tile that quietly determine whether the…
039 May 2026Projects
The case for a proper pantry
One square metre of shelving takes more pressure off a kitchen than any amount of extra worktop. Here…

Read the journal

Clear the Blog field to see what a merchant sees before they pick one — the section says so rather than rendering an empty box.

How it works

Add the Blog posts section and choose which Blog it reads from. It shows that blog's most recent posts, numbered 01, 02, 03… in order — you never type the numbers, so publishing a new post renumbers the cards on its own.

This section does not use blocks. It reads posts straight from the blog you pick.

Composition

                            Section heading

┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│                   │ │                   │ │                   │
│   featured image  │ │   featured image  │ │   featured image  │
│       (3:2)       │ │       (3:2)       │ │       (3:2)       │
│                   │ │                   │ │                   │
├───────────────────┤ ├───────────────────┤ ├───────────────────┤
│ 01 · 12 JUNE ·    │ │ 02 · 28 MAY ·     │ │ 03 · 14 MAY ·     │
│ INSPIRATION       │ │ GUIDES            │ │ MATERIALS         │
│ What a galley     │ │ Wet rooms and the │ │ Brass, and what   │
│ kitchen needs   → │ │ things nobody   → │ │ it does in ten  → │
│ A narrow room is… │ │ Falls, tanking a… │ │ It darkens, and … │
└───────────────────┘ └───────────────────┘ └───────────────────┘

                         READ THE JOURNAL →

The cards fill the section's width rather than sitting on a narrow measure: one column on a phone, two from 750px, three from 990px. With Maximum posts at 2 or 3 that is a single row on a desktop; at 4 the last card wraps onto a second.

Nothing separates the cards but their own edges — the card border and corner radius are the frame, and the colour scheme paints them.

Settings

Setting	What it does
Color scheme	Paints the whole section — the ink, the card edges, and the wash behind a missing image.
Card corner radius	How rounded this section's cards are. Leave on Use theme default to follow Theme settings → Layout.
Heading	The title above the index. Defaults to "From our blog"; leave it blank to hide it.
Blog	Which blog the posts come from. A new section points at your News blog. See Before you have posts below for what shows while it is empty.
Maximum posts	How many cards to show — between 2 and 4. Three is the default, and fills a desktop row exactly.
Show featured image	The 3:2 image across the top of each card. A post with no featured image gets no image area at all — its card starts at the meta line, so it sits shorter than its neighbours.
Show published date	The date in each card's meta line.

Before you have posts

Two different things can be empty here, and they do not look the same.

No blog chosen yet. Only you see this, and only in the theme editor: a line telling you to pick a blog. A shopper on the live store sees nothing at all — the section keeps quiet rather than showing them a note meant for you.

A blog chosen, but no posts in it yet. This is the common one: Shopify creates a News blog on every new store with nothing in it, and a new section points there. Rather than a heading with a bare "Read the journal" link under it, the section draws its own shape — placeholder cards in the real grid, as many as Maximum posts — so you can see what it will look like before you have written anything. Publish a post and the first card becomes real.

The excerpt

Each card shows about 18 words, always ending on a whole word, on a single line that trims with an ellipsis when the card is narrower than the sentence.

Write a custom excerpt on the article in Shopify admin to control exactly which words those are. With no excerpt set, the section takes the start of the post body and strips the formatting out of it — which usually works, but reads better when you have written the excerpt yourself.

The category

The category in the meta line is the post's first tag. Tag order in Shopify admin is alphabetical, so a post tagged Guides, Kitchens shows "Guides". If you want a specific word to appear, make it the only tag, or pick tags whose alphabetical first is the one you want.

A post with no tags shows the number and date and nothing else — no empty separator, no blank space.

The "Read the journal" link

The link under the cards points at the selected blog's own listing page. It is always there when a blog is chosen; there is no setting to hide it, because a journal teaser that cannot be got out of is a dead end.

Presets

Available in every preset. The Uisce identity squares off the image corners where the other presets round them; every preset otherwise shares this section's card treatment and takes its corner radius from its own theme settings.

Responsive & accessibility

It is a real ordered list. The cards are an <ol>, so a screen reader announces "1 of 3" — the numbering is meaning, not decoration, and it survives the grid.
One link per card. The headline's link is stretched over the whole card, so there is a single large tap target and a single accessible name (the post title). The image and the arrow are not separately focusable.
The arrow is decorative and hidden from screen readers; it nudges on hover, and stops entirely under reduced motion.
All ink is the scheme's foreground colour — the meta line, the title and the "Read the journal" link — with brand colour left to the arrow. That is what keeps the section legible on every shipped scheme, light and dark.
Images carry the article's own alt text from Shopify admin, falling back to the post title.

When it isn't showing

The section renders its heading whatever happens. If there is nothing under it, either no Blog is chosen — the theme editor says so in place — or the chosen blog has no published articles. A scheduled or draft post does not count.

Tips

Three rows is the natural length. Four fills a homepage slot; two can look like an accident.
Write real excerpts. One line is all the reader gets, and the automatic version takes whatever the post happens to start with.
Tag your posts. The category word is what turns a list of headlines into an index.
If only some posts have featured images, either give the rest one or turn Show featured image off — a card with no image starts at its meta line and sits shorter than the ones beside it.

Blog — the full journal listing the link leads to.
Article — the reading page for each post.

Blog posts ​

Try it ​

From the Design Journal

What a galley kitchen actually needs

Wet rooms, drainage and the things nobody tells you

The case for a proper pantry

How it works ​

Composition ​

Settings ​

Before you have posts ​

The excerpt ​

The category ​

The "Read the journal" link ​

Presets ​

Responsive & accessibility ​

When it isn't showing ​

Tips ​

Related sections ​