Article Feed

A heading on the left, an optional “Visit the blog” link on the right, then a row of article cards. Meant for a homepage or landing page — it’s a promo module, not a blog index.

Used on the homepage as “Insights & resources.”

Layout

On phones the cards become a horizontally scrolling row that runs to the edge of the screen, with a visible scrollbar underneath. From md up they settle into a static three-across grid that doesn’t scroll. Three articles fill that row exactly, which is what the design is built around.

The header stacks on small screens so a long heading and the link never compete for the same row.

Set more than three articles and phones still show them all

The scrolling row has no card limit — a fourth and fifth article are simply further along the scroll. On desktop, though, anything past three wraps onto a second row, so three (or six) keeps the grid tidy.

Where articles come from

The Where articles come from setting picks one of three modes:

Mode	What it does
Most recent from a blog	Newest posts from the selected blog, newest first. The default.
Curated metafield list	Reads a list-of-articles metafield, so one curated list can drive several placements.
Hand-picked articles	You choose each article and the order, using the Articles picker.

Most recent is the low-maintenance choice — the feed keeps itself current as new posts publish. Use the other two when a placement needs specific articles.

How the metafield mode resolves

It looks for the metafield you name in this order, using the first one it finds:

1. The article being viewed
2. The page being viewed
3. The product being viewed
4. The store itself

That means one section placed on a template can show a different curated list per page, while a store-level metafield acts as the site-wide default.

Settings

Setting	What it does
Section ID	Optional anchor id, for linking directly to this section.
Color scheme	Background and text colors. Dark schemes invert nested components automatically.
Heading	The large heading on the left. Leave empty to hide it.
Where articles come from	Most recent, curated metafield list, or hand-picked. See above.
Blog	The blog used by “Most recent”. Also sets where the link points when no link URL is given.
Metafield name	The metafield key used by “Curated metafield list”. Defaults to featured_articles.
Articles	The picker used by “Hand-picked articles”. Shown in the order listed. Up to 12.
Articles to show	How many cards render, 1–12. Defaults to 3.
Excerpt length	Approximate word count under each title, 10–50. Defaults to 26.
Link text	The link on the right. Leave empty to hide it.
Link URL	Where the link goes. Falls back to the selected blog when empty.
Padding	Top and bottom, set separately for mobile and desktop.

The Blog and Articles pickers are always visible

Shopify doesn’t allow conditional visibility on blog or article-list settings, so those two stay on screen in every mode. Their help text says which mode uses them. The Metafield name field does hide when it isn’t relevant.

Curated modes fall back to the latest posts

If a curated mode comes up empty — the metafield isn’t set on that page, or the picker was left blank — the section shows the blog’s latest posts instead of an empty row. Set a Blog even when using a curated mode so the fallback has something to draw on.

If no fallback is available either, the section renders nothing on the live storefront. In the theme editor you’ll see a short placeholder explaining why.

Cards

Cards are the same ones the Health Library index uses, so the two stay visually identical: a landscape image with rounded corners, then the title and an excerpt. The whole card is one link.

If an article has no excerpt, the start of its body copy is used instead, so a card is never left without a summary. Articles without a featured image get a tinted placeholder block rather than a collapsed card.

Tips

• Three articles fill the desktop row exactly. Four wraps one onto a second row on its own.
• Leave Link text empty to hide the link entirely — useful when the section sits directly above a blog index.
• Excerpt length is approximate. Titles vary in length, so cards in a row won’t always end on the same line.