Health Library

The article index for the Health Library. It renders a heading and subheading, a search box, a “Filter by category” panel of topic buttons, then a three-up grid of article cards with a Load more articles button underneath.

It’s the main section on both blog templates — the default blog template and the dedicated Health Library one — so it’s what you see at /blogs/health-library and at any other blog on the store.

Most of what makes this section useful isn’t configured at all. Search, topic filters and load-more all work automatically off the blog’s own articles and tags; the settings below only control whether those controls are shown and what they’re labelled.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id.
Blog	Which blog to list articles from. Only used when this section isn’t already on a blog page — on a blog page, that blog is always used and this picker is ignored.
Heading	The page’s main heading. Default “Health Library”. If you clear it, the blog’s own title is used instead.
Subheading	The line under the heading. Default “Knowledge for living a long and healthy life”. Clear it and the line disappears entirely.
Articles per page	How many articles load at a time, and how many each Load more click adds. 3–24 in steps of 3, default 12.
Search → Show search	On by default. Turn off to hide the search box.
Search → Search placeholder	Grey text inside the empty search field. Default “Search our blog”.
Filters → Show filters	On by default. Turn off to hide the “Filter by category” button and the topic panel.
Padding (mobile) — Top / Bottom	0–10 rem, 0.5 steps. Default 3 / 4.
Padding (Desktop) — Top / Bottom	0–10 rem, 0.5 steps. Default 6 / 6.

No tablet padding here

Unlike most sections, this one has only mobile and desktop padding — there’s no tablet pair. The mobile values hold until the desktop breakpoint.

Blocks

None. This section accepts no blocks. The article cards are generated from the blog’s own articles, and the topic buttons from the blog’s own tags — there’s nothing to add or arrange in the customizer.

How filtering actually works

Everything below happens automatically. There’s nothing to configure beyond the two on/off switches above.

The topic buttons come from your article tags. Every tag used on any article in the blog becomes a button in the filter panel, plus an “All topics” button that clears the filter. Add a tag to an article in the Shopify admin and it appears here on the next page load; remove the last article using a tag and the button disappears. There is no way to hide, rename or reorder individual topic buttons from the theme — that’s managed entirely through how you tag articles.

The filter panel is hidden by default and opens on click, except when someone arrives on a URL that already has a tag applied, in which case it opens automatically so the active filter isn’t buried.

Search runs as you type, about half a second after you stop. It searches articles only — products and pages never appear in these results. Clearing the box brings the full list back without needing to press anything.

Search and topic filters are mutually exclusive. Running a search clears the active topic; picking a topic clears the search. You can’t search within a topic. This is a limitation of how Shopify handles blog tag URLs, not a setting that can be turned on.

Every state has a real URL. A topic filter is a shareable link (/blogs/health-library/tagged/migraine), and so is a search. Someone can bookmark a filtered view or send it to a colleague, and search engines can crawl them.

Load more adds to the grid rather than replacing it. Previously loaded cards stay where they are and the next batch appends below. The button disappears on the last page.

It all works without JavaScript. Search is a real form, the topic buttons are real links, and Load more is a real link to page 2. The live-as-you-type search and the in-place grid updates are enhancements on top.

Tag names become the button labels, exactly as typed

A tag called Migraine relief shows as “Migraine relief”; a tag called migraine-relief shows as “migraine-relief”. There’s no tidying step in the theme. Tag consistently in the admin — capitalisation, spacing and singular versus plural all show through, and Migraine and Migraines will appear as two separate buttons.

Empty search results say so, but empty blogs look broken

With no matching articles the grid is replaced by “No articles found” and a short suggestion. With an entirely empty blog you get the heading, a search box, no filter panel (no tags exist yet) and a “There aren’t any articles here yet” message. That’s the intended empty state, but it reads as a broken page — publish at least a few articles before pointing anyone at it.

Article cards

Each card is an image, a title and a short excerpt, and the whole card is one link. A few things worth knowing:

• The excerpt is the article’s own excerpt field. If that’s empty, the first ~26 words of the article body are used instead, with the formatting stripped. Write a proper excerpt — the auto-fallback frequently starts mid-sentence or picks up a stray intro line.
• Article images are cropped to a landscape 5:4 frame. A portrait image gets cut top and bottom. Set featured images with that crop in mind.
• An article with no image gets a pale green placeholder block rather than a collapsed card, so the grid stays aligned.

Tips

• Leave Articles per page at 12. It fills exactly four rows of the desktop three-up grid. Values that aren’t multiples of 3 leave a ragged last row.
• Don’t turn off filters just because there are only a few tags. The panel is collapsed until clicked, so it costs nothing visually — and it’s the main way people navigate a growing library.
• Write excerpts on every article. It’s the single biggest thing you control about how this page reads.
• Audit your tags before launch. Every tag is a public button. Internal or workflow tags (draft, needs-review, 2024) will show up on the front end.
• The Blog picker is only for reuse. If you drop this section on a normal page to show a blog feed, set it there. On the blog templates it does nothing.
• Check the load-more behaviour with a full blog. With fewer than 13 articles the button never appears, so it’s easy to ship without ever seeing it work.