การเพิ่มประสิทธิภาพการแสดงรายการส่วนผสมเครื่องสำอางด้วย Shopify Metafields

เกริ่นนำ: ความสำคัญของการแสดงรายการส่วนผสมในร้านค้าเครื่องสำอางออนไลน์

ผลิตภัณฑ์เครื่องสำอางอาจส่งผลต่อผิวหนังหรือก่อให้เกิดอาการแพ้ได้ การแสดงรายการส่วนผสมอย่างชัดเจนจึงมีความสำคัญต่อการสร้างความไว้วางใจจากลูกค้า โดยเฉพาะในการขายออนไลน์ที่ลูกค้าไม่สามารถเห็นฉลากจริงได้ วิธีการนำเสนอและความถูกต้องของข้อมูลบนเว็บไซต์มีผลโดยตรงต่อยอดขายและการกลับมาซื้อซ้ำ

1. ข้อกำหนดด้านการแสดงส่วนผสมของเครื่องสำอางในประเทศหลัก ๆ

• สหรัฐอเมริกา (FDA): ต้องแสดงชื่อส่วนผสมบนบรรจุภัณฑ์ โดยเรียงตามปริมาณจากมากไปน้อย eCFR
• สหภาพยุโรป (EU): ต้องแสดง “รายการส่วนผสมทั้งหมด” (Full Ingredient Listing) โดยใช้ชื่อ INCI และต้องแสดงบนเว็บไซต์ตามแนวทางของแต่ละประเทศเมื่อขายออนไลน์
• ญี่ปุ่น: กฎหมายว่าด้วยยาและเครื่องสำอางกำหนดให้ต้องแสดงส่วนผสมทั้งหมด และสมาคมอุตสาหกรรมเครื่องสำอางญี่ปุ่นแนะนำให้ใช้ชื่อ INCI ควบคู่กัน cosmetic-ingredients.orgbloom-jp.com

2. Shopify Metafields คืออะไร

Shopify Metafields คือฟีเจอร์ที่ให้คุณสามารถเพิ่มข้อมูลแบบกำหนดเองในสินค้าหรือหมวดหมู่ เช่น “รายการส่วนผสม” หรือ “คำเตือนเกี่ยวกับสารก่อภูมิแพ้” ซึ่งไม่ได้อยู่ในฟิลด์มาตรฐาน ข้อมูลเหล่านี้สามารถแสดงบนธีมได้อย่างยืดหยุ่น shopify.devShopify Help Center

3. ตัวอย่างขั้นตอนการตั้งค่า Metafield สำหรับรายการส่วนผสม

1. ในแผงผู้ดูแล Shopify ไปที่ การตั้งค่า > ข้อมูลแบบกำหนดเอง > สินค้า > คลิก “เพิ่มความหมาย”
2. ชื่อ: ส่วนผสม, เนมสเปซและคีย์: custom.ingredients, ประเภท: ข้อความบรรทัดเดียว (รายการค่า)
3. ตั้งการตรวจสอบข้อมูล (validation) เช่น จำกัดจำนวนอักขระ หากจำเป็น แล้วคลิกบันทึก
4. กรอกข้อมูลรายการส่วนผสมในแท็บ “เมตาฟิลด์” ของหน้ารายละเอียดสินค้าแต่ละรายการ

4. การแสดงบนหน้าร้าน

4-A. ใช้บล็อกที่มาพร้อมกับธีม

1. ไปที่ Shopify > ร้านค้าออนไลน์ > ปรับแต่ง > สินค้า > สินค้าเริ่มต้น > เพิ่มบล็อก แถวที่ย่อได้ ในส่วนข้อมูลสินค้า
2. ในฟิลด์ หัวเรื่อง ให้กรอกคำว่า “ส่วนผสม”
3. คลิกที่ไอคอน เชื่อมต่อซอร์สแบบไดนามิก ด้านขวาของ “เนื้อหาในแถว” > เทมเพลต สินค้า > เลือกฟิลด์ “ส่วนผสม”
4. คลิก บันทึก

4-B. ใช้ Custom Liquid

1. ไปที่ Shopify > ร้านค้าออนไลน์ > ปรับแต่ง > สินค้า > สินค้าเริ่มต้น > เพิ่มบล็อก Custom 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 ได้ตามต้องการ
• สามารถเพิ่มมาร์กอัป PropertyValueList ของ Schema.org เพื่อช่วยในด้าน SEO

5. แนวทางปฏิบัติที่ดีที่สุดสำหรับ UI

• การแสดงแบบยุบ/ขยายได้: ใช้ Accordion ซ่อนรายการส่วนผสมที่ยาวเพื่อให้หน้าเว็บดูเรียบร้อย
• การปรับให้เหมาะกับมือถือ: ตรวจสอบให้แน่ใจว่าปุ่มและข้อความมีขนาดและระยะห่างที่แตะได้ง่าย
• การเข้าถึงสำหรับทุกคน: ใช้ aria-label และข้อความแสดงแทนสำหรับผู้อ่านหน้าจอ

สรุป

การใช้ Shopify Metafields เพื่อแสดงรายการส่วนผสมช่วยให้ร้านค้าปฏิบัติตามข้อบังคับ และสร้างความไว้วางใจจากผู้บริโภค ทำให้คุณสามารถเพิ่มข้อมูลลงในธีมได้อย่างมีประสิทธิภาพ และปรับแต่งให้เหมาะทั้งในแง่ UX และ SEO