Ingredient atlas

The ingredient atlas is not a list of one product’s contents. It is a library of every ingredient your brand uses, written once, that each product draws from automatically.

That distinction is the whole design. Write hyaluronic acid once — its story, image, source, and type — and every product containing it shows that same card, without you retyping anything.

The two modes

One section setting, Ingredient source, decides where the section gets its list.

Mode	What renders	Where to use it
Ingredient blocks (default)	Every block, always	Home page, an ingredients page, brand storytelling
Product data	Only the ingredients that product declares	Product templates

Product data applies on product pages only. Placed anywhere else — a home page, a regular page — there is no product to read from, so the section shows the entire library instead. That is deliberate, not a fault: the home page is exactly where you want every ingredient on display.

The full walkthrough

Step 1 — tell Shopify what is in each product

Ingredient names come from a category attribute, so the product needs a category.

1. In Shopify admin, open a product.
2. Set Product category in the product organization card. Pick the most specific match.
3. Fill in Active ingredient on the product, one entry per ingredient.
4. Save.

By default the section reads Active ingredient. You can point it at Constitutive ingredients, Skin care features, or Ingredient origin instead using the Value source setting.

Step 2 — build the library

In the theme editor, add one Ingredient block per ingredient your catalog uses — not per ingredient in one product.

The Ingredient name on the block must match the name on the product. Matching ignores capitalization and punctuation differences, so Hyaluronic Acid on the block finds hyaluronic acid on the product. It does not match partially: Vitamin C will not find Vitamin C (Ascorbic Acid). Use the same wording Shopify offers on the product.

Fill in the rest of the block — type, image, story, source — once. Every product containing that ingredient inherits it.

Step 3 — switch the product template to product data

On your product template, open the section and set Ingredient source to Product data.

Each product now shows only its own ingredients, as full cards, drawn from the library.

What renders in each situation

Product mode has four outcomes, and all four are intentional:

The product…	What a customer sees
lists ingredients, all in the library	A full card for each one
lists ingredients, some not in the library	Cards for the matches, plus the remaining names as a plain list
lists ingredients, none in the library	The names as a plain list, no cards
lists no ingredients at all	Nothing — the section is hidden

That last row matters. A product that declares no ingredients does not borrow the library’s, because that would claim contents the formula may not have. The section stands down instead.

Every one of these states explains itself in the theme editor. If a section looks empty or shorter than you expected while editing, read the note — it names the exact products or ingredients causing it.

Ingredients the library has no entry for still appear as names. The list stays truthful rather than quietly dropping them, and the editor tells you which blocks to add.

The 30-ingredient cap

The section holds 30 Ingredient blocks. That is the library size, not a per-product limit — a product can only ever show as many as it declares.

Thirty covers a focused skincare range comfortably. If you are pressing against it:

• Build the library around actives, not every excipient. Nobody reads the twenty-eighth card, and the ingredients that carry your claim get buried.
• Split by range. Use a second atlas section on a different template rather than one library serving unrelated product lines.
• Drop ingredients no product declares. They render on the home page and never on a product.

Filter groups

Each block has a Filter group. Ingredients sharing the same spelling group under one filter automatically, and the filter row appears once at least one block has a group set.

Use a handful of broad groups — Hydration, Barrier, Brightening — rather than one per ingredient. A filter row where every filter shows a single card is not a filter.

Leave the field blank and the ingredient still shows under All.

Using it well

• Write the library once, properly. This is the section with the best effort-to-payoff ratio in the theme, because every entry is reused across every product containing it. Time spent on a card is spent once.
• Keep the intro short. One or two sentences. The ingredients are the content.
• Match Shopify’s wording exactly when naming blocks. Most gaps come from a block named slightly differently from the attribute value.
• Check a phone. The rail scrolls horizontally, so confirm the first card hints that a second one exists.
• Two blocks with the same name is a mistake. Only the first is used, and the second silently never renders.

When an ingredient does not appear

Work down this list:

1. The name does not match. The most common cause by far. Compare the block’s Ingredient name with the value on the product, character for character.
2. The product has no category, or Active ingredient is empty. No data, nothing to match.
3. Ingredient source is still on Ingredient blocks. The section is showing the whole library, not the product’s.
4. You are pointed at the wrong attribute. Check Value source matches the field you filled.
5. A duplicate block. Two entries with the same name mean only the first ever renders.