Blog posts

Your latest posts, as a numbered index rather than a wall of cards.

Each post is one row: a small square thumbnail, a meta line (01 · 12 June · Inspiration), the headline, and a single line of the opening. A "Read the journal" link under the rows leads to the blog itself.

• It reads like a contents page — three or four rows, parted by a thin waterline, taking up a fraction of the space a card grid would.
• The category is the post's first tag — tag your articles in Shopify admin and the index picks it up. Untagged posts simply show the number and date.
• The whole row is the link — one clean tap target, one accessible name, nothing nested inside it.

Use it near the foot of a homepage, where a card grid would compete with the sections above it.

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.

←Blog posts

Color scheme

Heading

Blog

Maximum posts

3

Show featured image

Show published date

Storefront preview

From the Design Journal

1. 

   01·12 June 2026·Inspiration

   What a galley kitchen actually needs

   A narrow room is not a smaller kitchen, it is a different one. Where the sink lands decides…

   →
2. 

   02·28 May 2026·Guides

   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…

   →
3. 

   03·9 May 2026·Projects

   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 index on its own.

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

Composition

                 Section heading
─────────────────────────────────────────────────  ← waterline seam
┌────┐  01 · 12 JUNE · INSPIRATION
│    │  What a galley kitchen actually needs                  →
│ 72 │  A narrow room is not a smaller kitchen, it is a…
└────┘
─────────────────────────────────────────────────
┌────┐  02 · 28 MAY · GUIDES
│    │  Wet rooms, drainage and the things nobody tells…      →
│ 72 │  Falls, tanking and the linear drain: three decisi…
└────┘
─────────────────────────────────────────────────
                 READ THE JOURNAL →

The index sits on a narrow measure (720px) and stays centred however wide the section is, so the rows never stretch into an unreadable line length.

Settings

Setting	What it does
Color scheme	Paints the whole section — the ink, the seam between rows, and the wash behind a missing thumbnail.
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. Until a blog is chosen the section shows a reminder to pick one.
Maximum posts	How many rows to show — between 2 and 4.
Show featured image	The 72px thumbnail beside each row. A post with no featured image simply shows none, and the text takes the space.
Show published date	The date in each row's meta line.

The excerpt

Each row shows about 18 words, always ending on a whole word, on a single line that trims with an ellipsis if the row is narrow.

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 rows 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 an index that cannot be got out of is a dead end.

Presets

Available in every preset. The Uisce identity turns the plain seam between rows into a two-tone sea-glass waterline and squares off the thumbnails; the other presets keep the neutral hairline and their own card corner radius.

Responsive & accessibility

• It is a real ordered list. The rows are an <ol>, so a screen reader announces "1 of 3" — the numbering is meaning, not decoration.
• One link per row. The headline's link is stretched over the whole row, so there is a single large tap target and a single accessible name (the post title). The thumbnail 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 seam and the arrow. That is what keeps the index legible on every shipped scheme, light and dark.
• Thumbnails carry the article's own alt text from Shopify admin, falling back to the post title.

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 your posts have no featured images, turn Show featured image off rather than leaving a column of empty squares.

Related sections

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