공식자료

스트리트랩 테마 (패션 쇼핑몰)

패션 · 스트리트 브랜드 쇼핑몰을 위한 Zittme 공식 테마 스트리트랩(streetlab)의 매뉴얼입니다. 순백 바탕에 잉크블랙 한 가지로 정리한 모노크롬 톤이고, 랭킹 탭과 브랜드 스트립을 갖춘 대문에서 상품 사진이 주인공이 됩니다. 신선한 테마와 같은 뼈대(테마 내장 메인페이지, 반복 필드 섹션 조립)를 쓰므로, 여기 없는 내용은 신선한 테마 문서를 함께 보세요.

데모: fashiondemo.zitt.me

스트리트랩 데모

구성

구성요소	위치	역할
레이아웃	themes/streetlab/layouts/streetlab	사이트 골격 + 테마 내장 메인페이지
커머스 스킨	themes/streetlab/modules/commerce	상점 홈 · 목록 · 상세 · 장바구니 · 주문 · 마이쇼핑 · 기획전
게시판 스킨	themes/streetlab/modules/board	목록형 · 카드형 · 웹진형 · FAQ형
회원 · 쪽지 · 알림센터 · 메시지 스킨	themes/streetlab/modules/{member, communication, ncenterlite, message}	로그인 · 마이페이지 · 쪽지 · 알림 · 시스템 안내
예약 · 짓미페이 · 문의 · 지식질문 스킨	themes/streetlab/modules/{reservation, zittme_pay, contact, kin}	해당 모듈이 설치된 사이트에서만 적용

포인트 색상은 레이아웃 설정 > 기본에서 바꾸며 전 화면에 함께 적용됩니다. 기본값은 잉크블랙입니다.

설치와 적용

스토어에서 설치하거나 themes/streetlab 에 압축을 풉니다.
관리자 > 디자인 설정에서 스트리트랩을 골라 적용합니다. 레이아웃과 모듈 스킨이 한 번에 바뀝니다.
커머스 모듈이 있으면 상점 메뉴 · 헤더 검색 · 대문 상품 섹션이 자동으로 연동됩니다. 상점 모듈이 여럿이면 레이아웃 설정 > 메인 구성의 "상점 모듈 주소(mid)"에 사용할 mid 를 적습니다.

권장 환경: Zittme 1.0.1 이상, 커머스 0.2.16 이상. 반응형 테마이므로 모바일 전용 뷰는 끄는 것을 권장합니다.

상품명 표기 규약 — 브랜드 줄

이 테마는 상품마다 브랜드를 따로 저장하지 않습니다. 대신 상품명을 브랜드 / 상품명 형태로 적으면 슬래시 앞을 브랜드로 떼어 작게 윗줄에, 뒤를 상품명으로 크게 보여 줍니다.

예: 상품명을 BLACKLINE / Lambswool Crewneck 으로 등록하면 목록 카드 · 상세 · 장바구니 · 주문 줄에 BLACKLINE 이 브랜드 줄로, Lambswool Crewneck 이 상품명으로 나옵니다.
구분자는 양쪽에 공백이 있는 슬래시( / ) 하나입니다. 슬래시가 없으면 브랜드 줄 없이 상품명만 나옵니다.
상품관리의 "추가 정보"는 이 브랜드 줄과 무관합니다. 추가 정보는 상세 페이지 요약 아래에 표로 나오는 별개 항목입니다.
검색 · 정렬 · 주문서에는 전체 상품명(브랜드 / 상품명)이 그대로 쓰입니다.

헤더

로고 · 상단 메뉴 · 검색 · 마이페이지 · 장바구니 · 알림 벨로 구성됩니다. 메뉴 바 색상(어둡게 · 포인트 · 밝게)과 너비(본문 폭 · 100%)를 레이아웃 설정에서 고릅니다. 모바일에서는 서랍 메뉴로 접히며, 다크모드 버튼과 언어 선택의 위치(서랍 안 · 헤더 · 푸터)를 따로 정할 수 있습니다.

테마 내장 메인페이지 (메인 구성)

사이트 대문이 메인 형태일 때 레이아웃이 직접 그립니다. 레이아웃 설정 > 메인 구성 탭의 "메인페이지 섹션" 반복 필드로 순서대로 조립하고, 하나도 없으면 기본 구성(카테고리 → 랭킹 → 신상품 → 브랜드 스트립 → 배너 → 기획전 → 추천 → 일일특가 → 배너 → 할인 → 최신 글)을 씁니다.

섹션 종류	내용	출처(source)	개수(count)
상점 카테고리 타일	1차 카테고리 바로가기. 아이콘은 "카테고리 아이콘" 반복 필드에서	-	타일 수
추천 / 신상품 / 할인 / 인기 상품	상품 카드 그리드. 카드에 브랜드 줄 · 할인율 · 정가 표시	-	상품 수
일일특가	할인율 상위 상품이 날마다 하나씩 로테이션	-	-
진행 중 기획전 카드	커머스 기획전을 이미지 카드로	-	카드 수
실시간 인기 랭킹 (카테고리 탭)	카테고리 탭을 눌러 바꾸는 순위 목록	-	순위 수
브랜드 스트립	"브랜드" 반복 필드에 등록한 브랜드를 한 줄로. 로고 이미지가 있으면 로고, 없으면 이름	-	브랜드 수
배너 스트립	비주얼 슬라이드 이미지를 중간 배너로 재사용	몇 번째 슬라이드인지 번호	-
게시판 최신 글	게시판 글 목록. mid 를 쉼표로 여러 개 적으면 다단	게시판 mid (예: `notice,board`)	글 수

브랜드 스트립

레이아웃 설정 > 메인 구성 > 브랜드 반복 필드에 브랜드 이름 · 로고 이미지 · 링크 주소를 등록합니다. 대문의 브랜드 스트립 섹션이 이 목록을 읽습니다. 상품명의 브랜드 줄과는 연결돼 있지 않으므로, 링크 주소에 해당 브랜드 상품 목록(검색 결과 등)을 직접 적어 두는 것이 좋습니다.

데모 대문의 "About the platform" 블록

데모 사이트 대문 아래쪽의 검은 소개 블록(큰 제목 + 숫자 4개)은 테마 섹션이 아니라 데모 사이트의 대문 페이지에 손으로 넣은 HTML 위젯입니다. 숫자도 직접 적은 값입니다. 같은 블록을 쓰려면 대문(위젯 페이지)에 HTML 위젯으로 아래 마크업을 넣고, 스타일은 레이아웃 설정의 헤더 스크립트(또는 도메인 설정의 추가 HTML 헤더)에 넣습니다.

<section class="sl-editorial">
  <div class="sl-editorial-copy">
    <span class="sl-eyebrow">About the platform</span>
    <h2>Built for<br />brands that<br />move fast</h2>
    <p>소개 문장</p>
  </div>
  <div class="sl-editorial-list">
    <div><strong>12</strong><span>Brands</span></div>
    <div><strong>24</strong><span>Products</span></div>
    <div><strong>6</strong><span>Categories</span></div>
    <div><strong>3</strong><span>Campaigns</span></div>
  </div>
</section>

<style>
.sl-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin: 0; background: #000; color: #fff; }
.sl-editorial-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(36px, 5vw, 76px); }
.sl-editorial-copy .sl-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.sl-editorial-copy h2 { margin: 0; font-family: var(--hr-display, inherit); font-size: clamp(32px, 4.4vw, 68px); font-weight: 400; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.sl-editorial-copy p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.6); }
.sl-editorial-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.sl-editorial-list div { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 190px; padding: 24px; background: #000; }
.sl-editorial-list strong { font-family: var(--hr-display, inherit); font-size: 34px; font-weight: 400; line-height: 1; color: #fff; }
.sl-editorial-list span { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .sl-editorial { grid-template-columns: minmax(0,1fr); } .sl-editorial-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); } }
</style>

상점 화면 (커머스 스킨)

목록: 카테고리 탭 · 검색 · 정렬(진열순 · 최신순 · 인기순 · 가격순). 카드에 추천 · NEW 배지, 브랜드 줄, 할인율과 정가.
상세: 브랜드 줄 · 상품명 · 요약 · 가격 · 적립 혜택 · 배송비 · 옵션 선택 · 바로 구매 · 장바구니 담기. 상품관리의 "추가 정보"는 요약 아래 표로 나옵니다.
기획전: 커머스 기획전(?v=promo&p=슬러그)을 배너 · 소개문 · 상품 그리드로 그립니다.
장바구니 · 주문 · 결제 · 마이쇼핑: 신선한 테마와 같은 흐름이며, 결제는 짓미페이 스킨으로 이어집니다.

푸터

레이아웃 설정 전체 항목

기본

로고 이미지 · 다크모드 로고 · 로고 텍스트 · 포인트 색상 · 본문 최대 너비(1060 · 1180 · 1320) · 메뉴 바 너비 · 메뉴 바 색상 · 모바일 다크모드 버튼 위치 · 모바일 언어 선택 위치 · 색상 모드(기기 설정 · 항상 밝게 · 항상 어둡게)

첫 화면

비주얼 슬라이더 표시(메인만 · 서브에도 · 사용 안 함) · 자동 넘김 간격 · 비주얼 슬라이드(배경 이미지 · 제목 · 설명 · 버튼 이름 · 버튼 링크)

메인 구성

카테고리 아이콘 · 브랜드 · 상점 모듈 주소(mid) · 메인페이지 섹션(종류 · 제목 · 출처 · 개수)

본문 · 사이드

통합 검색 사용 · 사이드에 로그인 상자 표시