Squarespace 연동#
코드 삽입 기능으로 Squarespace에 Room Visualizer를 설치하고 페이지 편집기에서 사용자 정의 코드를 허용하는 위치에 상품별 컨테이너를 배치하세요.
검증 상태: 2026년 9월 7일에 Squarespace 도움말 센터 문서를 검토했습니다. 고객 Squarespace 사이트는 사용할 수 없었습니다. 코드 삽입 및 JavaScript 코드 블록에는 해당 기능을 지원하는 요금제가 필요합니다. 사용자 정의 코드는 Squarespace 지원 범위 밖이며 Ajax 로딩의 영향을 받을 수 있습니다.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
적용 범위 및 사전 준비#
이 방식은 상품 페이지가 안정적인 소규모 카탈로그 또는 명시적인 상품 코드 데이터 계층을 직접 제어하는 사이트에 가장 적합합니다. 지원 요금제, 사이트 소유자 권한, Shop ID, Publishable Key 및 가져온 ideal.house SKU가 필요합니다.
이 가이드에서는 Squarespace용 ideal.house 확장을 제공하지 않습니다. 표준 상품 편집기는 선택한 상품 옵션의 SKU를 제공하는 안정적인 공개 JavaScript API를 보장하지 않으므로 옵션 수준 매칭에는 고객 측 어댑터 구현이 필요하며 모든 템플릿에서 실용적이지는 않을 수 있습니다.
최소 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>
상품 코드는 가져온 카탈로그 sku와 정확히 일치해야 합니다. 코드 삽입 기능에 Client Secret을 사용하지 마세요.
로더 설치#
웹사이트 → 페이지 → 사용자 정의 코드 → 코드 삽입을 여세요. 사이트 버전에 따라 메뉴 이름은 다를 수 있습니다. 푸터에 SDK <script>를 붙여 넣고 두 자리표시자를 교체한 다음 저장하세요. 푸터 삽입은 사이트 페이지의 </body> 앞에서 실행되며 결제 페이지는 삽입 코드를 지원하지 않습니다.
로더는 한 번만 설치하세요. 다른 연동에서 이미 추가했다면 중복된 로더를 제거하세요.
상품 버튼 배치#
페이지 편집기가 JavaScript를 지원하는 코드 블록을 허용하는 위치에 다음을 넣으세요.
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
해당 상품의 정확한 SKU를 사용하세요. Squarespace 7.1의 스토어/상품 상세 레이아웃은 주요 상품 정보 영역에 임의의 블록을 허용하지 않을 수 있습니다. 실용적인 대안은 일반 레이아웃 페이지에 상품 블록과 인접한 코드 블록을 상품마다 한 쌍씩 배치하는 것입니다. 상품 블록이 스토어 페이지에 의존하므로 스토어 페이지가 활성 상태인지 확인하세요.
카탈로그가 더 크다면 개발자가 URL 경로-SKU와 같은 안정적인 고객 관리 매핑으로 컨테이너를 삽입할 수 있습니다.
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
URL 매핑, 마운트 요소 삽입 및 탐색 콜백은 고객 측 코드입니다. 비공개 Squarespace 상태를 수집하거나 그 구조가 안정적이라고 가정하지 마세요.
상품 옵션, 빠른 보기 및 Ajax 로딩#
Squarespace 상품 하나의 여러 옵션이 서로 다른 ideal.house 자산을 사용한다면 어댑터가 지원되는 출처에서 선택한 옵션의 SKU를 식별한 후에만 버튼을 표시하세요. 변경할 때마다 이전 컨테이너를 새 컨테이너로 교체하세요. 지원되는 선택 콜백/데이터 출처가 없다면 모든 옵션이 같은 시각화 자산을 공유하는 경우에만 공통 상품 수준 SKU를 사용하거나 버튼을 생략하세요.
빠른 보기, 상품 블록 및 Ajax 페이지 로딩은 페이지 콘텐츠를 교체할 수 있습니다. Squarespace는 Ajax 로딩이 사용자 정의 코드와 충돌할 수 있다고 안내합니다. 실제 템플릿을 테스트하고, 필요한 경우 Ajax 로딩을 비활성화하거나 직접 관리하는 탐색 메커니즘에서 renderForPath()를 호출하세요. MutationObserver는 고객 측 어댑터의 최후 수단이며 범위를 상품 영역으로 제한해야 합니다.
상품 데이터 가져오기#
Squarespace 상품/상품 옵션 SKU와 ideal.house sku의 매핑 표를 유지하고 상품 업로드를 사용하세요. 전체 공개 작업 흐름은 상품 가져오기, 작업 상태, 상품 목록 조회, 상품 수정, 상품 삭제 및 오류와 재시도에 설명되어 있습니다.
브라우저 SDK는 Squarespace 상품을 동기화하지 않습니다. 전자상거래 API 내보내기, 웹훅 또는 예약 작업은 고객이 관리해야 합니다.
검증 및 제거#
로그인 상태의 편집 모드에서는 사용자 정의 코드가 억제될 수 있으므로 비공개 창에서 배포된 사이트를 테스트하세요. 매핑된 상품 하나, SKU 누락 하나, 알 수 없는 SKU 하나, 상품 블록, 빠른 보기, Ajax 탐색, 브라우저 뒤로 가기/앞으로 가기, 모바일 레이아웃, 쿠키 동의 및 결제 페이지 제외를 확인하세요. SDK 요청이 한 번 성공하고 상품 코드/SKU가 정확히 같은지 확인하세요.
제거하려면 푸터 삽입과 모든 코드 블록/마운트 요소/매핑 스크립트를 삭제하고 저장한 다음 캐시를 비우세요. 배포된 페이지에 SDK 요청이나 data-idealhouse-* 요소가 없는지 검증하세요.