# Ingredients

### Prerequisites

Before you begin, make sure you have:

* An active Shopify store
* Accentuate Custom Fields installed from the Shopify App Store
* Staff permissions to access Apps in your Shopify admin
* (Recommended) An Online Store 2.0 theme, which allows metafield values to be displayed via the theme editor without touching code

***

### Key Concepts to Know First

**Scope** — The Shopify object the metafield attaches to. For an Ingredient List, this will be Products.

**Namespace & Key** — The unique identifier for your field. The namespace groups related fields (e.g. custom) and the key is the specific field name (e.g. ingredient\_list). Together they form custom.ingredient\_list, which is the address used in your theme to pull the value.

**Field Data Type** — Controls what kind of data the field holds. For an Ingredient List, a Multi-line text field is recommended. Ingredient lists are typically long blocks of text (full INCI names separated by commas) that don't need to be broken into individual selectable options — they just need to be stored and displayed as-is. If you want basic formatting support (bold, bullet points), you can use Rich Text instead.

***

### Step-by-Step Guide

**Step 1** — Open ACF from your Shopify Admin Go to your Shopify Admin, click Apps in the left sidebar, and open Accentuate Custom Fields. You'll land on the ACF dashboard, which shows the Metafields and metaobjects section with cards for Products, Shops, Metaobjects, and Customers.

**Step 2** — Open Product Metafields In the Products card, click the Metafields button. This takes you into the Product Custom Fields screen where you can see all existing fields listed with their types and manage your definitions.

**Step 3** — Add a New Section Click the + Add section button in the top-right area of the Product Custom Fields screen. An Add Section modal will open across two pages.

**Page 1** — Basic Details:

* Title: Ingredient List — displayed in bold as a visual header when editing product values (1–50 characters, no HTML)
* Name: ingredient\_list — must be unique within your Product fields (3–64 characters, letters, digits, underscores or dashes only)
* Description: Optionally add a note like Full INCI ingredient list for this product — supports Markdown
* Color: Leave as the default #dfe3e8, or choose a colour to visually distinguish this section from others like Skin Type or Skin Concerns
* All fields in this section apply to: Leave as All types unless you want to restrict this to specific product types
* Make visible to the Storefront API: Leave checked (default) — this makes the ingredient list accessible in themes and custom storefronts

Click Next to continue.

Page 2 — Advanced Settings:

* Repeatable section: Leave unchecked — the ingredient list is a single block of text per product, not a repeating block.
* Include value of first text field: Optionally check this — since the field is a text field, this will show a preview of the ingredient list in the section header when it is collapsed, which can be handy when scanning products.
* Show as collapsed when editing: Optionally check this — ingredient lists can be very long, so collapsing the section by default keeps the product edit page tidy. Editors can expand it when needed.
* Hide section: Leave unchecked — checking this would make the section invisible in the editor entirely.
* Show section even if empty: Optionally check this if you want the section to always appear on products, even before an ingredient list has been added.
* Exclude from layout: Leave unchecked — only tick this if you want the section excluded from ACF's layout editing tools.

Click Done to save the section.

**Step 4** — Add the Ingredient List Field Once the section is saved, click + Add field to add the actual field inside it. Fill in the details:

* Label: Ingredient List
* Namespace: accentuate (ACF's default, or use your own e.g. beauty)
* Key: ingredient\_list
* Field Data Type: Select Multi-line text — this gives editors a large text area to paste or type the full ingredient list. If you want bold or bullet point formatting, choose Rich Text instead.

**Step 5** — Save Click Save. Your Ingredient List field will now appear inside its section on every product edit page in your Shopify admin, giving your team a dedicated space to paste or type the full ingredient list for each product.<br>

***

### Populating Ingredient List Values on Products

**One by one:** Open any product in Shopify Admin, scroll to the Ingredient List section added by ACF, paste or type the full ingredient list into the text area, and save. This is the most common method for ingredient lists as each product's list is unique.

**Bulk edit:** Back on the Product Custom Fields screen, click Edit Values to open the table/bulk edit view. The Ingredient List column will be visible for each product. This is useful for reviewing or making small edits across multiple products at once, but for long ingredient lists the one-by-one method is usually more practical.

**CSV import:** Use the Export button to download a CSV template, fill in the ingredient\_list column for each product row, then re-import via the Import button. This is the fastest method when migrating ingredient data from an existing spreadsheet or product database.

***

### Displaying the Ingredient List on Your Storefront

**Theme Editor (no code, OS 2.0 themes):** Go to Online Store → Themes → Customize. Open a product template, click Add Block, select an ACF or Metafield block, choose the Ingredient List field, position it on the page (typically below the product description or in a collapsible tab), and save.

**Liquid Code (all themes):** Add this to your product template file where you want the ingredient list to appear:

For Multi-line text:

```
{% if product.metafields.accentuate.ingredient_list%}
  <div class="ingredient-list">
    <strong>Ingredients:</strong>
    <p>{{ product.metafields.accentuate.ingredient_list.value }}</p>
  </div>
{% endif %}
```

For Rich Text:

```
{% if product.metafields.accentuate.ingredient_list%}
  <div class="ingredient-list">
    <strong>Ingredients:</strong>
    {{ product.metafields.accentuate.ingredient_list.value }}
  </div>
{% endif %}
```

If you used a accentuate namespace (e.g. beauty), replace accentuate with your namespace name.

***

### Tips & Best Practices

* Use INCI names — International Nomenclature of Cosmetic Ingredients (INCI) names are the industry standard. Using them consistently across all products makes your store more professional and compliant.
* Decide on a separator format — most brands list ingredients separated by commas (e.g. Aqua, Glycerin, Niacinamide). Pick a format and apply it consistently across all products.
* Consider a collapsible tab — ingredient lists can be very long. Displaying them inside a collapsible accordion or tab on the product page keeps the layout clean without hiding the information.
* Use "Show as collapsed when editing" — enabling this on the section (Page 2 of setup) keeps the product edit page tidy for your team, since ingredient lists take up a lot of vertical space.
* Keep a master spreadsheet — maintain an internal spreadsheet of all product ingredient lists. This makes it easy to update ACF via CSV import whenever formulations change.
* Avoid the shopify namespace — it is reserved by Shopify and can cause conflicts. Use accentuate or a brand-specific name.
* Multi-language stores — ACF supports translatable metafields. Mark the Ingredient List as translatable if your store serves markets that require ingredient names in the local language.
* Rich Text vs Multi-line text — choose Rich Text only if you need formatting (e.g. bolding key ingredients or adding a "Key Ingredients" bullet list above the full INCI list). For a plain comma-separated list, Multi-line text is simpler and easier to manage.

***

### Quick Reference

| Setting          | Value                                                                      |
| ---------------- | -------------------------------------------------------------------------- |
| Scope            | Products                                                                   |
| Section Title    | Ingredient List                                                            |
| Section Name     | ingredient\_list                                                           |
| Field Label      | Ingredient List                                                            |
| Namespace        | custom                                                                     |
| Key              | ingredient\_list                                                           |
| Full Identifier  | accentuate.ingredient\_list                                                |
| Field Data Type  | Multi-line text (or Rich Text for formatting)                              |
| Liquid Reference | {{ product.metafields.accentuate.ingredient\_list.value }}                 |
| Storefront API   | Enabled (checked by default)                                               |
| Tip              | Enable "Show as collapsed when editing" to keep the product edit page tidy |

***

For further details, visit the official ACF documentation at help.accentuate.io

<br>