1단계: Photta 위젯 키 가져오기
business.photta.app에서 Photta Business 대시보드에 로그인합니다. 설정 → API 키로 이동하여 공개 키(Publishable key)를 찾으세요. pk_live_로 시작하며 pk_live_xxxxxxxxxxxxxxxxxxxxxxxx와 같은 형태입니다. 키 옆의 복사 아이콘을 클릭하세요. 이것이 Shopify 연동에 필요한 유일한 인증 정보입니다. 절대로 sk_live_ 비밀 키를 프론트엔드 코드에 붙여넣지 마세요.
아직 계정이 없다면 Photta Business 페이지에서 '무료 체험 시작하기'를 클릭하세요. 체험 기간 동안 신용카드 없이 50회의 무료 피팅을 이용할 수 있습니다. pk_live_ 키는 이메일 주소를 인증하고 설정 → 허용 도메인에 스토어 도메인을 등록한 즉시 사용할 수 있습니다.
2단계: Shopify 테마 코드 열기
Shopify 관리자 패널에서 온라인 스토어 → 테마로 이동합니다. 사용 중인 테마 옆의 점 세 개 메뉴를 클릭하고 '코드 편집'을 선택합니다. 코드 편집기 왼쪽의 파일 트리에서 Layout 폴더를 확장하고 theme.liquid를 클릭하세요. 이것은 스토어의 모든 페이지를 감싸는 마스터 템플릿입니다.
코드 편집기 내부에서 브라우저 검색 기능(Cmd+F 또는 Ctrl+F)을 사용하여 </body>를 검색합니다. 파일의 맨 아래쪽, </html> 바로 위에서 일치하는 항목을 찾을 수 있습니다. </body> 바로 앞 줄에 커서를 위치시킵니다. 여기에 붙여넣는 모든 내용은 스토어의 모든 페이지에 로드되며, 이것이 바로 우리가 원하는 방식입니다.
3단계: Photta 스크립트 조각 붙여넣기
</body> 바로 앞 줄에 다음 코드를 붙여넣으세요. 이때 pk_live_... 부분을 1단계에서 복사한 실제 키로 교체해야 합니다: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. defer 속성은 매우 중요합니다. 이 속성은 DOM이 준비된 후에 위젯이 초기화되도록 보장하면서도 스크립트가 페이지 렌더링을 방해하지 않도록 합니다.
코드 편집기 오른쪽 상단의 저장을 클릭합니다. Shopify가 파일을 저장하고 녹색 확인 메시지를 표시합니다. 새 테마 버전을 게시하거나 다른 작업을 수행할 필요 없이, 저장을 클릭하는 순간 사용 중인 테마에 변경 사항이 실시간으로 적용됩니다.
4단계: 위젯 로드 확인
새 브라우저 탭(로그인 캐시를 피하기 위해 시크릿 모드 권장)에서 스토어의 제품 페이지를 엽니다. 제품 섹션으로 스크롤을 내리면 장바구니 버튼 근처에 '입어보기(Try it on)' 버튼이 보일 것입니다. 버튼을 클릭하고 테스트 사진을 업로드하여 피팅 결과가 나타나는지 확인하세요. 버튼이 보인다면 설치가 완료된 것입니다.
버튼이 나타나지 않으면 브라우저 개발자 도구(F12 → 콘솔 탭)를 열어 photta 또는 sdk.js 관련 오류 메시지가 있는지 확인하세요. 가장 흔한 문제는 도메인 불일치입니다. 스토어 도메인이 비즈니스 대시보드의 설정 → 허용 도메인에 등록되어 있어야 합니다. 도메인을 추가하고 30초 정도 기다린 후 제품 페이지를 새로고침하세요.
5단계: 브랜드에 맞게 위젯 색상 맞춤 설정
기본적으로 위젯은 Photta의 중립적인 다크 팔레트를 사용합니다. 브랜드 이미지와 맞추려면 동일한 스크립트 태그에 데이터 속성을 추가하세요. CTA 버튼 색상에는 data-color-primary(예: #D4AF37), 모달 배경색에는 data-color-surface를 사용합니다. 예시: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. 속성을 추가한 후 theme.liquid를 다시 저장하세요.
더 세밀한 CSS 수준의 수정을 위해 Photta 위젯은 테마의 기본 CSS에서 제어할 수 있는 --photta-* 네임스페이스의 CSS 사용자 정의 속성을 제공합니다. Growth 플랜 이상 사용자는 비즈니스 대시보드의 맞춤 설정 → 브랜딩에서 'Powered by Photta' 배지를 숨길 수도 있습니다. 변경 사항은 저장 후 실시간으로 적용되며 재배포나 위젯 업데이트는 필요하지 않습니다.