표시 설정
테마와 최대 너비를 지정하는 선택 단계입니다. 호출하지 않으면 기본 테마와 1024px 이 적용됩니다.
테마 지정
어드민에서 만든 추가 테마를 쓸 때 호출합니다.
javascript
window.SauceShowroomLib.setThemeUniqueId('테마 ID')
| 파라미터 | 타입 | 필수 | 설명 |
|---|---|---|---|
| themeUniqueId | String | 선택 | 어드민에서 만든 테마 ID. 호출하지 않으면 기본 테마가 적용됩니다. 값이 없으면 브라우저 콘솔에 테마ID를 설정해주세요. 를 남기고 무시합니다 |
💡 테마는 로고·배경색·텍스트색·콘텐츠 표시 개수·검색 영역 형태·커스텀 폰트를 담습니다. 항목별 설정은 어드민 테마 설정에 있고, 기본 테마 외에 추가 테마를 최대 5개까지 만들 수 있습니다.
최대 너비 지정
쇼룸이 차지할 최대 너비를 픽셀로 지정합니다.
javascript
window.SauceShowroomLib.setMaxWidth(1280)
| 파라미터 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
| width | Number | 선택 | 1024 | 1024 이상만 반영됩니다. 그 밖의 값은 브라우저 콘솔에 경고를 남기고 무시합니다 — 숫자가 아니면 최대 너비는 숫자 형식의 값으로 설정해주세요. · 1024 미만이면 최대 너비는 '1024' 이상의 값으로 설정해주세요. |
⚠️ 1024 미만 값은 경고를 남기고 무시됩니다. 더 좁은 영역에 넣으려면 최대 너비를 줄이는 대신 감싸는 요소의 폭을 제한합니다.
반응형 기준
쇼룸은 화면 폭이 아니라 마운트한 요소의 폭을 기준으로 레이아웃을 바꿉니다.
| 대상 | 기준 요소 |
|---|---|
load · 대부분의 load* | 지정한 elementId 요소 |
| 검색 영역 | topElementId 로 지정한 상위 요소.지정하지 않으면 body |
📌 요소 폭이 바뀌면 레이아웃이 다시 계산됩니다. 좁은 컬럼에 넣어 데스크톱 레이아웃이 나오지 않는 경우, 감싸는 요소의 폭을 확인합니다.
색·여백 직접 조정
테마로 조정되지 않는 항목은 공개 클래스명으로 덮어씁니다. 클래스 목록과 적용 원칙은 CSS 클래스 커스터마이징에 있습니다.
Updated about 4 hours ago
Did this page help you?