使用 Shopify Metafields 最佳化化妝品成分列表顯示方式

前言：在線化妝品電商中成分列表顯示的重要性

由於化妝品可能對肌膚產生影響或引發過敏，消費者在購買前能查看成分資訊是建立信任的關鍵。特別是在網路商店中，看不到實體包裝上的標示，因此網頁上的成分展示準確與否，將大幅影響銷售與回購率。

1. 各國化妝品成分標示規範

• 美國（FDA）：需在包裝上標示所有成分，並依含量高低排列。eCFR
• 歐盟：強制以 INCI 命名法列出完整成分（Full Ingredient Listing）。即使是網路販售，也必須在網站上依各國規範公開成分列表。
• 日本：依藥機法規定必須進行全成分標示，日本化妝品工業聯合會也建議附上 INCI 名稱。cosmetic-ingredients.orgbloom-jp.com

2. 什麼是 Shopify Metafields

Shopify Metafields 是一種可以擴充商品、系列、顧客等資料的功能，可添加自訂欄位。在化妝品電商中，可以使用 Metafields 來管理標準欄位中沒有的「成分列表」、「過敏注意事項」等資料，並在主題中靈活呈現。shopify.devShopify 說明中心

3. 設定成分用 Metafield 的範例步驟

1. 進入 Shopify 後台 → 設定 → 自訂資料 → 商品 → 點擊「新增定義」
2. 名稱：成分，命名空間與金鑰：custom.ingredients，類型選擇「單行文字（值清單）」
3. 可視需要設定驗證（如字數限制），然後儲存
4. 進入各商品頁的「中繼欄位」區域，輸入該商品的成分資料

4. 顯示在商店前台

4-A. 使用主題區塊方式

1. 進入 Shopify 後台 → 網路商店 → 自訂 → 產品 → 預設產品 → 在「產品資訊」中新增「可折疊的橫列」區塊
2. 標題輸入：成分
3. 在「橫列內容」欄位點選「連結動態來源」圖示 → 選擇範本「商品」 → 成分
4. 點擊儲存

4-B. 使用自訂 Liquid 區塊

1. 進入 Shopify 後台 → 網路商店 → 自訂 → 產品 → 預設產品 → 在「產品資訊」中新增「自訂 Liquid」區塊
2. 貼上以下程式碼

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

補充說明：

• custom.ingredients 是你在 Metafield 定義時設定的命名空間與金鑰
• 可透過 CSS 自訂樣式
• 也可加入 Schema.org 的 PropertyValueList 標記以強化 SEO

5. UI 設計最佳實踐

• 折疊顯示：針對較長的成分列表，建議使用手風琴式區塊進行收折展示，讓頁面更易讀
• 行動裝置優化：保持充足的點擊區域與適當字體大小
• 無障礙設計：為螢幕閱讀器設置 aria-label 與替代文字

總結

運用 Shopify 的 Metafields 功能管理成分列表，能夠兼顧法規遵循與用戶信任。建議依據上述步驟將其整合至佈景主題中，達成 SEO 與 UX 的雙重優化。