SDK 빠른 시작#

전체 상품에 적용하기 전에 준비된 상품 하나로 스토어에 상품 시각화 진입점을 추가하세요.

1. 스토어 및 상품 준비#

대시보드에서 스토어를 선택하세요. 해당 스토어의 Shop ID와 Publishable Key를 준비하세요. Dashboard → Settings를 열어 **Allowed Origins (CORS)**에 스토어 출처를 추가하고 저장을 클릭하세요. 시각화할 준비가 된 상품이 하나 이상 있는지 확인하세요. 백엔드에서 가져오는 경우 Product Import API를 따르고 최종 작업 결과를 확인하세요.

2. 플랫폼 가이드 선택#

Liquid 테마는 Shopify, WooCommerce 스토어는 WooCommerce, 직접 구축한 사이트는 자체 구축 스토어 가이드를 사용하세요. 더 많은 플랫폼 가이드는 SDK 개요에 있습니다.

3. SDK를 한 번만 불러오기#

자체 구축 스토어에서는 호스트 페이지에서 이 스크립트를 한 번만 불러오세요. 두 자리표시자를 동일한 스토어의 값으로 교체하세요.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. 상품과 일치하는 대상 요소 렌더링#

준비된 카탈로그의 상품 코드를 정확히 사용하세요. 이 예제는 상품 검증 후 SDK가 버튼을 생성하도록 요청합니다.

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

대상 요소가 있다고 해서 상품이 시각화 요건을 충족하는 것은 아닙니다. 선택한 상품 옵션, 상품 준비 상태 및 식별자 매핑을 확인하세요.

5. 고객 이용 과정 테스트#

sdk.js가 정상적으로 불러와지고 올바른 버튼이 표시되며, 클릭 시 의도한 상품으로 Viewer가 열리는지 확인하세요. 상품 옵션을 바꾸고 다른 상품으로 이동한 다음 모바일에서도 반복하세요. 배포 전에 출시 체크리스트를 완료하세요.