Ingredient Spotlight

A title and supporting copy on the left, an optional link on the right, then a row of ingredient cards. Clicking any card slides in a panel with that ingredient’s full write-up.

Built for product pages, where each product can list its own ingredients — but it works anywhere a row of ingredients makes sense.

Layout

On phones the cards stack, one per row, full width. From md up they settle into a static three-across grid. Three ingredients fill that row exactly, which is what the design is built around.

The header stacks on small screens, putting the link on its own line beneath the copy.

Sideways scrolling on phones is optional

By default the cards stack. Turn on Scroll cards sideways on mobile to show them as a single swipeable row instead, with a visible scrollbar underneath — the same behavior the Article Feed uses. It changes nothing on desktop.

Stacking is the default because it keeps every ingredient visible without the visitor needing to discover that a row scrolls.

Where ingredients come from

The Where ingredients come from setting picks one of two modes:

Mode	What it does
Metafield list on this page	Reads a list-of-metaobjects metafield from whatever page is being viewed. The default.
Hand-picked ingredients	You choose each ingredient and the order, using the Ingredients picker.

Metafield list is the one to use on a product template: each product carries its own ingredient list, and a single section placed once shows the right ingredients on every product.

How the metafield mode resolves

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

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

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

The metafield must be a Custom metafield of type List of metaobjects pointing at the ingredient metaobject. The default name the section looks for is ingredients.

Settings

Setting	What it does
Section ID	Optional anchor id, for linking directly to this section.
Where ingredients come from	Metafield list or hand-picked. See above.
Metafield name	The metafield to read. Only shown when the metafield mode is selected. Defaults to ingredients.
Ingredients	The hand-picked list. Also used as the fallback when a metafield list is empty.
Ingredients to show	Caps how many cards render. Defaults to 3.
Scroll cards sideways on mobile	Off by default, which stacks the cards. On makes phones show one swipeable row.
Padding (mobile / desktop)	Space above and below the section at each size.

The hand-picked list is the fallback

If the metafield mode comes up empty — the metafield isn’t set on that product, or the section sits on a template with no product — the section falls back to whatever is in the Ingredients picker rather than showing an empty row.

Filling the picker even when using metafield mode is therefore worth doing: it gives every page a sensible default. If both come up empty, the section renders nothing on the live storefront. In the theme editor you’ll see a short placeholder explaining why.

Blocks

The header is built from static blocks — fixed positions, always present:

• Title — the section heading
• Rich text — supporting copy below the title
• Buttons — the link on the right

They are the same blocks every other section header uses, so the typography scale, alignment controls and button variants are identical. Edit them by selecting the section in the theme editor and opening the block beneath it.

Hiding a piece of the header

Each part disappears on its own when you empty it. Clear the Title text to drop the heading, clear the rich text to drop the supporting copy, and delete the button inside Buttons to drop the link.

Cards and the detail panel

Each card is a photo with the ingredient’s name in a frosted bar across the bottom. The whole card is one button — clicking it opens a panel that slides in from the right carrying that ingredient’s write-up, any extra detail sections, and links to the products the ingredient appears in.

All of that copy is already in the page when it loads, so opening a panel is instant and search engines can read it.

The panel can also be linked to directly: adding #ingredient- plus the ingredient’s handle to a URL opens that panel on arrival. Closing it returns focus to the card that opened it, and Esc closes it from anywhere.

These are the same cards and the same panel the Ingredients Grid section uses, so the two stay consistent — this section just uses the shorter card.

Tips

• Three ingredients fill the desktop row exactly. A fourth wraps onto a second row on its own.
• Delete the button inside the Buttons block to hide the link when the section sits directly above something it would duplicate.
• Ingredients without a photo get a tinted placeholder block rather than a collapsed card, so a missing image never breaks the row.