SHOPLINE 연동#
테마 앱 확장 또는 직접 관리하는 사용자 정의 테마 블록을 통해 SHOPLINE 온라인 스토어에 Room Visualizer를 연동하세요.
검증 상태: 2026년 9월 7일에 SHOPLINE 온라인 스토어 2.x/3.0 테마 문서를 검토했습니다. 파트너 앱 또는 판매자 테스트 스토어는 사용할 수 없었습니다. 온라인 스토어 세대에 따라 템플릿 문법과 지원 확장 유형이 다르므로 정확한 스토어 버전에서 검증하세요.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
연동 지점 선택#
- 온라인 스토어 2.0/2.1에서 재사용 가능한 공개 앱을 개발할 때 SHOPLINE은 앱 블록과 선택적인 앱 임베드 블록을 포함한 테마 앱 확장을 권장합니다.
- 온라인 스토어 3.0 테마는 선택적인 JavaScript 자산 및 앱 블록을 갖춘 재사용 가능한 블록을 제공합니다.
- 스크립트 태그/자산 API는 기존 방식이거나 버전/앱 유형에 따라 달라집니다. SHOPLINE 호환성 표를 확인하지 않고 선택하지 마세요.
- 단일 스토어의 테마를 사용자 정의하려면 활성 버전의 블록/템플릿 및 자산 구조를 사용하세요.
개발 스토어, 확장/테마 접근 권한, Shop ID, Publishable Key 및 가져온 상품 옵션 코드를 준비하세요.
최소 SDK 연동 규약#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
상품 코드는 ideal.house 카탈로그 sku와 일치해야 합니다. 이 문서는 설치 가능한 ideal.house SHOPLINE 앱이 있다고 주장하지 않습니다.
테마 블록 구현#
상품 상세 페이지에 마운트 요소를 렌더링하는 앱 블록 또는 공개 테마 블록을 만드세요. 해당 온라인 스토어 세대에 문서화된 정확한 상품/상품 옵션 객체 및 이스케이프 헬퍼를 사용하세요. 최종 스토어 HTML은 다음과 같아야 합니다.
<div class="idealhouse-host">
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>
템플릿 소스의 CHAIR-OAK-01을 현재 선택한 상품 옵션의 SKU/코드 표현식으로 교체하세요. SHOPLINE 3.0 Handlebars 템플릿에 Shopify Liquid 표현식을 붙여 넣지 마세요. 서로 다른 언어이며 객체 규약도 다릅니다.
앱 블록은 테마 편집기에서 상품 섹션에 추가하세요. 앱 임베드는 표시되는 UI 없이 SDK를 전역으로 불러오는 데 사용하세요. 앱 블록은 일반적으로 설치 후 판매자가 활성화하거나 배치해야 합니다.
SDK를 한 번만 불러오기#
확장/테마 JavaScript 자산에서 스크립트를 생성하고 두 공개 설정을 적용한 다음 문서에 추가하세요.
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const script = document.createElement('script');
script.src = 'https://sdk.ideal.house/sdk.js';
script.async = true;
script.dataset.shopId = '<SHOP_ID>';
script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
document.head.append(script);
}
여러 판매자의 인증 정보에는 확장 설정/동적 매개변수를 사용하세요. Publishable Key만 노출하고 앱 비밀 정보는 서버에 보관하세요.
선택한 상품 옵션 및 동적 섹션#
활성 테마의 문서화된 상품 선택 콜백을 고객 측 어댑터에 연결하세요.
function setIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = String(sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
SHOPLINE 테마는 사용자 정의할 수 있으므로 이 가이드는 임의의 공통 스토어 상품 옵션 이벤트를 정의하지 않습니다. 온라인 스토어 3.0은 테마 편집기 섹션/블록 이벤트를 문서화하지만 이는 편집기 생명주기 이벤트이며 고객의 상품 옵션 선택 이벤트가 아닙니다.
섹션, 필터, 페이지 나누기, 빠른 보기 또는 테마 편집기 미리보기가 상품 노드를 다시 렌더링하면 새 컨테이너를 만드세요. 테마 편집기에서 블록이 해제될 때 리스너를 정리하세요. 상품 카드 버튼에는 항목별 SKU가 필요하며 최종 상품 옵션이 확정되지 않았다면 컨트롤을 생략하세요.
상품 가져오기#
SHOPLINE 상품 및 상품 옵션 데이터를 내보내고 선택한 스토어 코드를 ideal.house sku에 매핑하세요. 상품 업로드와 공개된 가져오기, 작업 상태, 목록 조회, 수정, 삭제, 재시도 처리 가이드를 사용하세요.
SHOPLINE 관리 API 동기화, 웹훅, 앱 OAuth 및 앱 스토어 배포는 고객 측 어댑터 구현에 해당합니다.
검증 및 제거#
설치 및 판매자의 블록 활성화, 단순 상품, 각 상품 옵션, 누락/알 수 없는 코드, 카드, 빠른 보기, 필터, SPA 방식 탐색, 모바일, 동의, 테마 편집기 미리보기 및 지원하는 모든 온라인 스토어 버전을 테스트하세요. SDK 요청이 한 번만 실행되고 코드/SKU가 정확히 매핑되는지 확인하세요.
제거하려면 앱 블록/임베드를 비활성화하고 확장을 삭제하거나 사용자 정의 블록 및 자산을 제거하세요. 정리된 테마를 배포하고 캐시를 비운 다음 SDK URL 또는 data-idealhouse-* 마크업이 남아 있지 않은지 검증하세요.