Blog Listing

The main section for blog index pages like Recipes and Fresh Press. It renders a hero area with the blog title, optional category image pills, a search-and-filter bar, up to three featured article cards, and a paginated grid of article cards below. Two rendering modes work together: server-rendered Shopify pagination for the initial load and /tagged/ URLs, and Alpine.js client-rendered results when the visitor searches or applies filters via the JS-driven UI.

Filters and search sync to the URL (?tags= and ?search= params), so the browser back button works as expected.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Blog	The Shopify blog to pull articles from.
Subtitle	Small text rendered below the blog title in the hero area.
Show featured section	Toggles the hero row of up to three featured article cards. On by default.
Featured card CTA text	The link text on each featured card. Default “Read more”. Only visible when the featured section is enabled.
Category group	The blog_category metaobject group name used for card tags and category images (e.g. recipe_type, article_topic).
Tag prefix	Tag prefix for filtering and card category labels (e.g. type_, topic_). Leave blank to auto-derive from the group name.
Show category images	Displays image pills for each category above the grid.
Show search & filter bar	Toggles the search input and filter drawer button.
Search placeholder	Custom placeholder text for the search field. Falls back to the default translation.
Per page	Number of articles per page, 4 to 48 in steps of 4. Default 16.
Padding top / bottom	Default 32/48/64px (mobile/tablet/desktop).

Blocks

Repeatable:

• Featured Article (limit 3) – pick a specific article to pin in the hero featured row. When fewer than three are chosen the remaining slots fill from the most recent posts.
• Filter Group – defines one group in the slide-out filter drawer. Each group targets a tag prefix (e.g. type_, season_, ingredient_) and renders checkboxes for every matching tag found in the blog. Supports optional metaobject enrichment for display labels and sort order, and per-group search within the checkbox list.

Where it’s used

• blog.recipes.json
• blog.fresh-press.json

Tips

• Use Filter Group blocks to build the drawer. Each block becomes one accordion group. The preset ships with Type, Season, and Ingredients – add or remove groups to match the blog’s tagging scheme.
• Category images come from metaobjects. The blog_category entries referenced by card_tag_source need an image field populated or the pills render as text-only.
• Featured articles are optional. Uncheck “Show featured section” for blogs where the hero row doesn’t make sense, like Fresh Press.
• The search is blog-scoped. It hits Shopify’s Search API filtered to the selected blog, so results never leak in from other blogs or pages.
• Tag prefixes must match your tagging convention. If articles are tagged type_smoothie the prefix is type_. A mismatch means empty filter groups.