지식 센터/맞춤 블록/아티클
맞춤 블록

Shopify 제품 메타 필드를 모바일 앱 제품 세부 정보 페이지에 표시하는 방법

업데이트됨 2025년 9월 1일

참고: 이 문서는 EDL을 사용하는 레거시 커스텀 블록을 위한 것입니다. react-native를 사용하는 새로운 커스텀 블록의 경우 Product metafields codeable blocks를 참고하세요.

소개

경쟁이 치열한 오늘날의 이커머스 시장에서 상세하고 개인화된 상품 정보를 제공하는 것은 고객 경험을 향상시키는 데 매우 중요합니다. Shopify의 상품 메타필드를 사용하면 사이즈, 소재, 관리 방법, 프로모션 정보 등의 커스텀 데이터를 저장하고 표시할 수 있습니다. Evlop Mobile App Builder를 사용하면 이러한 메타필드를 모바일 앱의 상품 상세 페이지에 손쉽게 통합하여 더 풍부한 쇼핑 경험을 제공할 수 있습니다.

이 문서에서는 Evlop을 사용하여 모바일 앱에서 Shopify 상품 메타필드를 로드하고 표시하는 과정을 안내합니다.

Shopify 상품 메타필드란?

Shopify 상품 메타필드는 상품에 대한 추가 정보를 저장할 수 있게 해주는 커스텀 필드입니다. 메타필드는 네임스페이스(카테고리)와 키(특정 필드)로 정의됩니다. 예를 들어:

  • 네임스페이스: custom
  • 키: text

메타필드는 텍스트, 이미지, URL, QR 코드 등 다양한 유형의 데이터를 저장할 수 있어, Shopify의 기본 속성을 넘어서는 고유한 상품 정보를 제공할 수 있습니다.

EDL에 상품 메타필드 로드하기

모바일 앱에 Shopify 상품 메타필드를 표시하려면 먼저 Extended Data Layer (EDL)에 해당 데이터를 로드해야 합니다. 방법은 다음과 같습니다:

  1. 커스텀 블록 내의 "Data for EDL" 탭으로 이동하세요.
  2. "Add Data to Pass to EDL"을 클릭하세요.
  3. 데이터 유형으로 "Product Metafields"를 선택하세요.
  4. 로드하려는 각 메타필드의 namespace와 key를 추가하세요. 예시:
    • namespace: custom  key: text
    • namespace: details  key: material
    • namespace: media  key: image
    • namespace: promo  key: qrcode
  5. 변경 사항을 저장하세요.

로드가 완료되면 data.myMetafields.custom.text 또는 data.myMetafields.media.image와 같은 경로를 통해 EDL에서 해당 메타필드에 접근할 수 있습니다.

메타필드 데이터로 텍스트 표시하기

메타필드의 텍스트 데이터를 표시하려면 커스텀 블록에서 아래 EDL 스니펫을 사용하세요:

<Box>
  <Text>Custom Text: {data.productMetafields.custom.text}</Text>
</Box>

메타필드에서 텍스트 값을 동적으로 가져와 상품 상세 페이지에 표시합니다.

메타필드 데이터로 이미지 표시하기

메타필드에 저장된 이미지를 표시하려면 커스텀 블록에서 아래 EDL 스니펫을 사용하세요:

<Box>
  <Image src={data.productMetafields.media.image.small} />
</Box>

필요한 표시 크기에 따라 다음 중 하나를 사용할 수 있습니다

  • data.productMetafields.media.image.small(최대 너비: 240px, 최대 높이: 240px)
  • data.productMetafields.media.image.medium(최대 너비: 480, 최대 높이: 480)
  • data.productMetafields.media.image.large(최대 너비: 960px, 최대 높이: 960px)

상품 이미지, 취급 방법 또는 추가 비주얼을 보여주기에 적합합니다.

메타필드 데이터로 QR 코드 표시하기

메타필드의 QR 코드를 표시하려면 커스텀 블록에서 아래 EDL 스니펫을 사용하세요:

<Box>
  <QRCode value={data.productMetafields.promo.qrcode} />
</Box>

프로모션, 할인 또는 추가 상품 정보 연결에 활용하기 좋습니다.

마무리

Evlop Mobile App Builder로 모바일 앱에 Shopify 상품 메타필드를 불러와 표시하면 고객에게 더욱 개인화되고 유익한 쇼핑 경험을 제공할 수 있습니다. 텍스트, 이미지, QR 코드 등 어떤 형태든 메타필드를 활용하면 Shopify 기본 속성을 넘어서는 상품 고유의 정보를 보여줄 수 있습니다.

이 아티클의 단계를 따라 하면 메타필드를 앱에 자연스럽게 연동하고 고객의 쇼핑 여정을 한층 더 풍성하게 만들 수 있습니다. 추가 도움이 필요하시면 언제든지 Evlop 지원팀에 문의하세요!