쇼피파이 메타필드 기능을 이용해서 컬렉션 디자인 템플릿에 추가적인 정보 표시

쇼피파이는 메타 필드 기능을 이용해서 상품이나 컬렉션에 추가적인 정보를 입력하고,
고객에게 보여줄 수 있습니다.

메타 필드 기능은 크게 코드를 이용하는 방법과 메타필드 기능앱을 이용하는 방법이 있습니다.
이번에는 메타필드 기능앱을 이용해서 컬렉션에 메타정보를 입력하고,
컬렉션 디자인 템플릿에 추가 정보를 표시하는 작업을 진행하였습니다.

이번에 이용한 메타필드앱은 Metafy 이라는 앱으로 비교적 최근에 나온 앱입니다.
예전에는 다른 메타필드앱을 사용했었는데,
이 앱은 나온지 얼마안되서 그런지 아직까지 무료로 이용이 가능하면서도, 사용법은 더 간단합니다.

앱을 설치 한뒤, [앱]->[Metafy] 로 간 뒤,  추가정보를 입력하고자하는 리소스 탭을 선택합니다.
아래 이미지에서 보시는 대로 대부분의 리소스에 정보를 추가할 수 있습니다.

  • 커스텀 컬렉션 (수동 컬렉션)
  • 스마트 컬렉션 (자동컬렉션)
  • 상품 및 옵션 상품
  • 페이지
  • 블로그 & 포스트
  • 고객
  • 주문

쇼피파이-컬렉션페이지-메타필드추가-앱추천-커스터마이징-쇼핑몰개발-1

 

해당 리소스 탭에서 원하는 컬렉션이나 상품, 페이지 등을 선택한 다음 아래 순서로 메타필드를 추가하고 정보를 입력할 수 있습니다.
이번 작업의 경우 각각의 컬렉션에 다른 사이즈 가이드를 입력해 주는 작업이었기 때문에, String 필드를 추가해 HTML 테이블 (표) 를 넣어주었습니다.

  • [Create metafield] 를 클릭합니다.
  • Key는 원하는 구별값을 입력합니다. 소문자로 입력을 해야됩니다. 저는 sizeguide 라고 입력을 했습니다.
  • Namespace는 기본적으로 global이 입력되어있습니다. 그대로 사용해도 되고, 별도의 이름을 입력해도 됩니다.
  • Value type은 원하는 데이터 타입을 선택하면 됩니다. 일반적으로 String (텍스트 편집기) 을 사용합니다.
  • 코드 아이콘을 눌러서 HTML 코드로 입력하거나 비주얼 모드로 편집기 를 이용해서 내용을 입력할 수 있습니다.

 

표같은 경우는 비주얼 편집기보다 , 예시로 하나의 코드를 만들어놓고,
코드를 복사해서 수치만 변경하고 입력하는 방식이 더 쉬울 수 있습니다. 그리고 앱의 편집기가 다소 크기가 작아서 편집이 불편할 수 있으니
별도의 편집기 프로그램을 이용해서 코드를 만든 다음 붙여넣는 것이 나을 수 있습니다.

추천 코드편집기 프로그램은 다음과 같습니다.

  • 서브라임텍스트
  • 아톰 편집기
  • 어도비 브라켓
  • 윈도우 메모장

 

사이즈 가이드의 경우 HTML 테이블 코드를 사용하면 좋은데, 대략적인 코드 설명은 다음과 같습니다.

HTML 테이블 태그 설명
• <table> 은 표 시작 태그.
• <thead> 는 표의 제목줄.
• <th> 는 표의 제목줄의 칸. <td> 와 같은 역할이지만 의미가 조금 상이. 혼용해서 사용해도 문제없음.
• <tbody> 는 표의 본문 부분.
• <tr> 은 표의 줄.
• <td> 는 표의 칸.

더욱 구체적인 내용은 아래 강좌 사이트를 참고하시면 됩니다.

  • W3SCHOOL : https://www.w3schools.com/html/html_tables.asp
  • 생활코딩 : https://opentutorials.org/course/2039/10949

 

메타 필드를 추가해서 정보를 입력했다면,
이 내용을 원하는 디자인 템플릿을 찾아서 넣어주면 됩니다.
[판매채널]->[온라인스토어]->[테마] 에서 [액션] 을 눌러서 [코드편집] 으로 가신 다음,
수정할 템플릿을 선택해줍니다.

이번에는 사이즈 가이드를 각 상품별로 표시해 주기위해서 product-template.liquid 을 선택했습니다.
이 파일은 테마마다 다르니 테마에서 상품 템플릿을 찾으시면 됩니다.
원하시는 위치에 아래 형식으로 입력해주면 메타 필드의 내용이 표시가 됩니다.

{% if collection.metafields.global.sizeguide %}

{{ collection.metafields.global.sizeguide }}

{% endif %}

 

작업 후에 가이드 매뉴얼을 정리해서 보내드리는 것으로 간단히 커스텀 작업을 마무리했습니다.
원하시는 페이지에 추가적인 정보를 입력하고자 하시면 위의 가이드대로 한번 해보시거나
직접하기 힘드시면 저희 쇼피파이 기술팀에 유지보수 의뢰를 주시면 됩니다.