Ingredients Grid

The ingredient index: a grid of every ingredient, where clicking any card slides in a panel with that ingredient’s full write-up. This is the section behind the Our Ingredients page.

It shares its card and detail panel with Ingredient Spotlight, so an ingredient looks and reads the same wherever it appears. The difference is scope: Spotlight is a short promo row for a product page, this is the whole library.

Which ingredients show

Leave the Ingredients picker empty and the section shows every ingredient in the store, in the order set in the metaobject admin. This is the normal setup for the library page — publish a new ingredient and it appears on the page with nothing to update here.

Pick ingredients in the picker and it shows only those, in the order you list them. Use that when the page should be a curated subset rather than everything.

Ingredients are metaobjects, not products

Ingredients live under Content → Metaobjects → Ingredient in the Shopify admin, not in your product catalog. Adding an ingredient there is what makes it available to this section. Each one has a name, an image, a description, and an optional list of the products it appears in.

The detail panel

Clicking a card slides a panel in from the right, covering about a third of the screen on desktop and the full width on phones. It contains, in order:

• the ingredient’s image, with the name across the bottom
• the description
• “[Ingredient] is an ingredient in:” — links to each product that lists it

Every ingredient’s panel is already in the page when it loads, so opening one is instant and the text is visible to search engines and AI crawlers.

Visitors close the panel with the ✕ button, the Esc key, or by clicking the dimmed area outside it.

Panels can be linked to directly

Each panel has its own web address — the page URL with #ingredient- and the ingredient’s handle on the end, for example /pages/ingredients#ingredient-magnesium. Opening that link takes the visitor straight to the page with that panel already open, which is useful in an email or a blog post.

A sparse ingredient shows a sparse panel

The panel only shows what the ingredient actually has. An ingredient with no description opens to just the image and the name. If a panel looks empty, the fix is to fill in that ingredient’s description in the metaobject admin — not to change anything in this section.

Settings

Setting	What it does
Ingredients	Which ingredients to show, and in what order. Leave empty to show all of them.
Title	Optional heading above the grid.
Description	Optional supporting text below the title.
Columns on desktop	Two or three across. Cards are always one per row on phones and two across on tablets, whichever you pick.
Top / bottom padding	Space above and below the section, set separately for mobile and desktop.
Section ID	An optional name for linking to this section from elsewhere on the page.

Tips

• Three columns is the design default and what the library page uses. Two is there for a shorter list, where three across would leave a gappy last row.
• Image quality matters more than usual here. The cards are large and the name sits over the bottom of the photo, so pick images that are not busy or bright along their lower edge.
• The title and description are both optional. The Our Ingredients page leaves them empty because its hero section already says the same thing — repeating it directly beneath would be redundant.