Optimizing Cosmetics Ingredient Listings with Shopify Metafields

Introduction: The Importance of Displaying Ingredient Lists on Cosmetic eCommerce Stores

Clearly displaying ingredient information is crucial in cosmetic eCommerce, as consumers rely heavily on this data to assess skin compatibility and allergy risks. Since online shoppers cannot physically inspect product packaging, accurate and user-friendly online ingredient lists significantly boost trust, conversion rates, and repeat purchases.

1. Cosmetic Ingredient Labeling Regulations in Major Regions

• United States (FDA): Ingredients must be listed on packaging in descending order of predominance. eCFR
• EU: Requires “Full Ingredient Listing” using INCI (International Nomenclature of Cosmetic Ingredients) names. Online stores must also adhere to local guidelines for digital ingredient disclosure.
• Japan: Mandatory full ingredient disclosure according to Japan’s Pharmaceutical and Medical Device Act (Yakkyoku-ho). The Japan Cosmetic Industry Association recommends including INCI names alongside Japanese labeling. cosmetic-ingredients.org bloom-jp.com

2. What Are Shopify Metafields?

Shopify Metafields enable you to add custom data to products, collections, customers, and other existing resources. For cosmetics eCommerce stores, Metafields are ideal for managing detailed ingredient lists, allergen warnings, or other information not available through standard product fields, allowing flexible theme integration. shopify.dev Shopify Help Center

3. Steps to Create a Metafield for Ingredients (Example)

1. In your Shopify admin, go to Settings > Custom data > Products and click “Add definition”.
2. Name: Ingredients, Namespace and key: custom.ingredients, Select content type: Single line text (List of values).
3. Optionally, set validations (such as character limits) and click Save.
4. Enter ingredient details into the newly created Metafield section on each product page.

4. Displaying Metafields on Your Store

4-A. Using Theme-Specific Blocks

1. From your Shopify admin, go to Online Store > Customize > Products > Default product. In the Product Information section, add a block such as Collapsible row.
2. Enter “Ingredients” as the Heading.
3. Click the icon on the right side of “Row content”, select Connect dynamic source > Product > Ingredients.
4. Click Save.

4-B. Using Custom Liquid

1. From your Shopify admin, navigate to Online Store > Customize > Products > Default product and add a Custom Liquid block.
2. Copy and paste the following code:

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>Ingredients</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

Important Points:

• custom.ingredients refers to the namespace and key defined earlier.
• Adjust the styling using CSS as needed.
• You can further boost SEO by adding PropertyValueList markup from Schema.org.

5. UI Best Practices

• Collapsible Sections: Hide lengthy ingredient lists behind accordion panels to improve readability.
• Mobile Optimization: Ensure ample padding and easily tappable font sizes.
• Accessibility: Include descriptive aria-label attributes and appropriate alt texts for screen readers.

Conclusion

Using Shopify Metafields for ingredient lists helps your cosmetics store comply with regulations, enhances user trust, and improves SEO and UX. Follow the outlined steps to seamlessly integrate this feature into your store.