펄핏에서 발급한 API 키와 쇼핑몰 HTML을 편집할 수 있는 권한이 필요합니다. 연동 항목과 버튼 위치는 초기 설치 요청서에 적어 펄핏 담당자에게 보냅니다. 아직 키가 없으면 도입 문의로 요청하세요.
1. PerfittSize script tag 삽입
PerfittSize는 사이트에 스크립트 삽입을 통해 간단히 설치하실 수 있습니다.
아래의 코드를 웹사이트의 모든 페이지에 넣어주세요. 보통은 모든 페이지가 공유하는 공통 레이아웃(head)에 한 번 넣으면 됩니다. <head> 안에서도 위쪽에 두는 것을 권합니다.
<script
id="PerfittSize-JS"
type="text/javascript"
src="https://perfittsize.perfitt.io/js/PerfittSize.js?apiKey=##API_KEY##"
charset="UTF-8"
></script>Shopify 스토어는 관리자의 온라인 스토어 › 테마 › 코드 편집에서 theme.liquid 파일의 <head> 안에 같은 스크립트를 넣으면 됩니다.
apiKey : script 태그의 src 에서 ##API_KEY## 자리에 Perfitt에서 발급해드린 고객사별 API_KEY 값으로 바꿔서 넣어주셔야 합니다.
2. 펄핏 버튼 위치 지정
펄핏 버튼은 사이즈 인디케이터 한 가지입니다. 이 신발이 크게 나왔는지 작게 나왔는지(사이즈 경향성)를 보여 주고, 아래에 발 측정 버튼이 붙습니다. 고객사가 정하는 것은 두 가지, 버튼이 들어갈 영역과 버튼 색입니다.
사이즈 인디케이터
- 상품 페이지(PRODUCT)에서 상품 정보가 잡히면 자동으로 표시됩니다.
- 경향성 문구는 펄핏이 착화·리뷰 데이터로 정합니다. 고객사가 바꿀 수 없습니다.
- 측정 버튼의 배경색과 글자색은 브랜드 색에 맞춰 바꿀 수 있습니다. 원하는 색상 코드를 요청서에 적어 주세요(예: 배경
#111927, 글자#FFFFFF). 배경과 글자색의 대비가 낮으면 버튼이 잘 안 보이니 피하세요. - 한 페이지에 여러 개 둘 수 있습니다.
영역 지정
버튼이 그려질 영역을 HTML 페이지 안에 만들고, 그 영역을 가리키는 CSS Selector를 초기 설치 요청서의 버튼 노출위치 탭에 적어 펄핏 담당자에게 전달해 주세요.
위와 같은 HTML 구조의 페이지에서 id 가 perfitt-block-1 인 div 태그 내에 펄핏 버튼을 노출하고자 하는 경우 CSS Selector 값으로 #perfitt-block-1 을 입력해주시면 됩니다.
perfitt-block-1 영역에 버튼이 이렇게 들어갑니다.<head>
<!-- ... 전략 ... -->
<script id="PerfittSize-JS" type="text/javascript" src="https://perfittsize.perfitt.io/js/PerfittSize.js?apiKey=##API_KEY##" charset="UTF-8"></script>
<!-- ... 후략 ... -->
</head>
<body>
<!-- ... 전략 ... -->
<div id="perfitt-block-1"></div>
<!-- ... 후략 ... -->
</body>3. 설치 확인
상품 페이지를 모바일에서 열어 펄핏 버튼이 뜨면 설치는 끝입니다. PC에서는 버튼을 눌러도 측정 화면 대신 휴대폰으로 이어 가는 QR 코드가 뜨므로, 확인은 모바일에서 하세요.
버튼이 보이지 않으면 문제 해결의 '버튼이 안 떠요'를 위에서부터 차례로 확인하세요.
이전 버튼 유형
2025년 이전에 도입한 고객사 중 일부는 아래 유형을 쓰고 있습니다. 새로 도입하는 경우에는 선택 항목이 아닙니다.
