Recipe Article

The primary section for recipe blog articles. On desktop it splits into a sticky image gallery on the left and scrollable recipe content on the right. The gallery supports multiple images and videos from the recipe_gallery metafield, shown in a Splide slider with overflow peek. On mobile everything stacks — gallery first, then content.

All recipe data is pulled from article metafields: ingredient lines, direction steps, yield, prep time, season, base ingredients, “made with” products, and an optional recipe note. The section also emits Recipe JSON-LD structured data automatically for search engines.

Settings

Setting	What it does
Section ID	Optional anchor for jump links. Must be unique on the page, in handle format.
Collapse collection	A collection used to group “What you’ll need” products. When enough products in the recipe belong to this collection, they collapse into a single link.
Collapse label	The text shown for the collapsed link. Defaults to the collection title. Example: “A Nama Juicer”.
Collapse threshold	How many matching products trigger the collapse. Default 3, range 2-10.
Padding top / bottom (mobile)	Default 32/52px.
Padding top / bottom (tablet)	Default 48/72px.
Padding top / bottom (desktop)	Default 64/138px.

Blocks

This section has no configurable blocks. All content comes from article metafields.

Content sections

The right column renders these content areas in order, each conditionally based on whether the corresponding metafield has data:

1. Breadcrumb — blog title / article title, linked back to the blog.
2. Title — the article title at heading-2xl.
3. Prep time and yield — shown inline on mobile above the body, and in the meta bar on desktop.
4. Article body — the article content in an RTE container.
5. Meta bar — prep time, yield, and share links (Facebook, Pinterest, email, print).
6. Ingredients + What you’ll need — side-by-side grey boxes. Ingredients from recipe_ingredients_custom (rich text) or ingredient_lines (JSON list). “What you’ll need” lists linked products from recipe_made_with, with optional collection collapse.
7. Directions — numbered steps with circled step indicators.
8. Recipe note — optional grey callout box.
9. Made with — product cards in a Splide slider (2 per page desktop, 1 with peek on mobile). Only shows when products are linked.
10. Tag pills — filterable tags for recipe type, base ingredients, season, and associated products. Each links back to the blog filtered by that tag.

Where it’s used

Recipe blog article template (article.recipes).

Tips

• The collapse feature keeps “What you’ll need” tidy. If a recipe uses three or more Nama juicers, they collapse into a single “A Nama Juicer” link to the collection instead of listing each model. Adjust the threshold if recipes typically reference fewer products.
• Ingredient display has two modes. The recipe_ingredients_custom rich text metafield takes priority over the ingredient_lines JSON list. Use the rich text version when you need subheadings or formatted groups.
• The gallery is sticky on desktop. It stays pinned while the recipe content scrolls, so users always have a visual reference. This means tall galleries work well — add multiple images.
• Tag pills link to blog filtered views. The tag format matters — a type tag like “Smoothie” generates a link to /blogs/recipes/tagged/type_smoothie. Make sure article tags match the expected prefix pattern.
• JSON-LD is automatic. The Recipe structured data includes ingredients, directions, yield, prep time, and category. No setup required — it emits whenever the metafields are populated.