Shopify 메타필드를 활용한 화장품 성분 리스트 표시 최적화 방법

서론: 온라인 화장품 쇼핑몰에서 성분 표시의 중요성

화장품은 피부에 미치는 영향과 알레르기 위험을 고려해야 하므로, 소비자가 구매 전에 성분 정보를 확인할 수 있도록 하는 것이 신뢰 확보로 이어집니다. 특히 온라인에서는 실물 패키지를 직접 볼 수 없기 때문에 웹사이트 상에서 성분 정보를 얼마나 정확하고 보기 쉽게 제공하느냐가 매출과 재구매율에 큰 영향을 줍니다.

1. 주요 국가의 화장품 성분 표시 규정

• 미국 (FDA): 패키지에 성분명을 포함하고, 함량이 높은 순으로 표시해야 함. eCFR
• EU: INCI 명칭을 사용한 “전성분 표시(Full Ingredient Listing)” 의무화. 온라인 판매 시에도 각국 가이드라인에 맞는 웹사이트 내 성분 리스트 공개가 필요함.
• 일본: 화장품은 약기법에 따라 전성분 표시가 의무이며, 일본화장품공업연합회는 INCI(국제 화장품 성분 명명법) 병기를 권장함. cosmetic-ingredients.orgbloom-jp.com

2. Shopify 메타필드란?

Shopify 메타필드는 상품, 컬렉션, 고객 등 기존 리소스에 맞춤 데이터를 추가할 수 있는 기능입니다. 화장품 쇼핑몰에서는 기본 필드에 포함되지 않은 “성분 리스트”나 “알레르기 주의 사항” 등을 메타필드로 관리하고, 테마 상에서 자유롭게 표시할 수 있습니다. shopify.devShopify Help Center

3. 성분 리스트용 메타필드 정의 방법 (예시)

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는 정의 시 설정한 네임스페이스와 키
• 필요 시 CSS로 디자인 조정 가능
• Schema.org의 PropertyValueList 마크업을 추가하면 SEO 효과 향상 가능

5. UI 최적화 베스트 프랙티스

• 접힘 표시: 긴 성분 리스트는 아코디언으로 숨겨서 가독성 향상
• 모바일 최적화: 터치하기 쉬운 여백과 글자 크기 확보
• 접근성 확보: 스크린 리더 대응을 위한 aria-label 및 대체 텍스트 적절히 설정

정리

Shopify 메타필드를 활용한 성분 리스트 표시는 컴플라이언스 준수와 사용자 신뢰 확보를 동시에 실현할 수 있습니다. 위 절차를 참고하여 귀사 테마에 적용하고, SEO와 UX 측면 모두에서 최적화를 달성해 보세요.