Blog & Articles
A blog index that works like your collection pages — the same grid controls, the same three loading modes — and an article page built for actual reading: a measured column width, three featured-image styles, reading time, related posts and native comments. Nothing to install, nothing to configure to get a working blog.
Creating your blog and your first post
Shopify gives every store one blog to begin with, called News, at /blogs/news. You can write straight into it — there is nothing to set up in the theme.
- In Shopify admin go to Content → Blog posts and click Add blog post.
- Write the post. The featured image is what the card shows on the blog index and on your homepage — a post without one still renders, using a neutral placeholder card rather than a broken space.
- Add tags if you want topic filtering. Peregrine turns a blog's tags into filter pills at the top of the index automatically; no tags simply means no pills.
- Set Visibility to Visible (or schedule it) and Save. It appears on the index immediately.
- Want a second blog — say a Journal alongside News? Content → Blog posts → Manage blogs → Add blog. Then point the homepage's Blog posts section, or a menu link, at whichever blog you mean.
The blog index
Your blog's home page (/blogs/news, or whatever handle you gave it) lists every post as a card: image, title, date, author, reading time, excerpt and tags — each of those individually switchable under Theme editor → Blog posts → What each post shows. The same card is used on the homepage's Blog posts section and in an article's related row, so a post looks like itself everywhere it appears.
Grid or list
Under Layout, Grid arranges posts in columns (2–4 on desktop, 1–3 on mobile — set separately) and suits visual, image-led posts. List gives every post a full row with the image beside the text, which reads better for longer writing. Posts per page runs from 4 to 24.
Loading more posts
The same three modes as your collection pages, under Loading: numbered pagination, a Load more button, or infinite scroll with a cap on automatic loads. They behave identically to the collection versions — including working with JavaScript off, where the button and the scroll degrade to plain page links.
The featured post
Feature the newest post shows your latest article large above the grid, on the first page only, with an optional "Latest post" label. It is off by default on purpose: it suits a blog you post to regularly, and a featured post that hasn't changed in six months does the opposite of what it's for.
Topic pills
Show topic filter renders a row of your blog's tags above the grid. These aren't JavaScript filters — each pill is a link to Shopify's own tag page (/blogs/news/tagged/care-guides), a real URL that readers can share and bookmark, and that search engines can crawl and index. The current topic is highlighted, with an "All" pill to return to the full index.
Introduction and RSS
The Introduction rich-text setting appears under the blog title on the index — and is deliberately hidden on topic pages, where it would describe the wrong thing. Show RSS link links to the feed Shopify already publishes automatically for every blog; the theme just surfaces it.
The article page
Featured image
Three styles under Featured image → Image style: Full width runs the image edge to edge above the post, Contained keeps it inside the reading column, and Hidden drops it entirely — useful when your images are illustrative rather than headline material.
Reading width
Reading → Reading width caps how wide the text runs. The default keeps lines at a comfortable length — long lines are genuinely harder to read, which is why every serious publication sets a measure. Your other content (heros, related posts) still uses the full page width; only the prose is capped.
Post details
Date, author, reading time (estimated from the post's length at 200 words a minute), tags and a "Back to blog" link — all individually switchable under Post details. Tags on the article link to the same crawlable topic pages as the index pills.
Reading progress bar
Show reading progress bar adds a thin bar at the top of the screen that fills as the reader scrolls. It measures progress through the article text, not the whole page — so it reaches 100% when the reader finishes the post, not after they've also scrolled past the comments and the footer.
Below the post
- Share button — uses the phone's own share sheet, and copies the link on desktop. No third-party scripts, no tracking, no social-network embeds.
- Previous / next post links — navigate through the blog in order.
- Related posts — a row of other articles from the same blog, using the same card as the index. The count is yours to set.
Comments
Comments are Shopify's own — nothing extra to install. Enable them per blog in Shopify admin under Content → Blog posts → Manage blogs, choosing either "Comments are allowed" or "Comments are allowed, pending moderation". The theme handles both: with moderation on, a commenter is told their comment is awaiting approval rather than being left wondering where it went. Comment lists paginate past 20, and the form names its errors specifically — a missing email says so, rather than a generic "something went wrong".
SEO built in
The blog index carries Blog structured data and each article carries BlogPosting — headline, image, author, dates — alongside the theme-wide meta tags and canonical URLs. Both respect the master switch and per-type toggles under Theme settings → SEO, so if an SEO app owns your structured data, Peregrine's steps aside cleanly. Topic pages get real crawlable URLs rather than JavaScript state, as above.
Works without JavaScript
The index, topic pills, pagination, the article, comments and the comment form are all plain HTML. JavaScript adds the progress bar, the share button and the in-place Load more — and nothing breaks without them.