헤어살롱 테마 (미용실·뷰티 살롱)
헤어살롱 테마 (미용실 · 뷰티 살롱)
미용실과 뷰티 살롱을 위한 Zittme 공식 테마 헤어살롱(hairsalon)의 매뉴얼입니다. 첫 화면을 가득 채우는 슬라이더로 시작해 시술 메뉴, 디자이너, 스타일, 매장 안내, 예약 유도 칸으로 이어집니다. 시술과 디자이너는 예약 모듈에서, 매장 정보는 지점 모듈에서 그대로 가져오므로 첫 화면과 예약 화면의 내용이 따로 놀지 않습니다. 먹색과 아이보리 바탕에 브론즈 포인트를 얹었고, 글꼴은 테마에 들어 있어 외부 CDN 을 쓰지 않습니다.
구성
| 구성요소 | 위치 | 역할 |
|---|---|---|
| 레이아웃 | themes/hairsalon/layouts/hairsalon | 사이트 골격 + 첫 화면(슬라이더 · 소개 · 시술 · 디자이너 · 스타일 · 매장 · 예약 유도) |
| 예약 스킨 | themes/hairsalon/modules/reservation | 시술 목록 · 매장/디자이너/날짜·시간 고르기 · 예약 확인 · 결과 · 내 예약 |
| 지점 스킨 | themes/hairsalon/modules/branch | 매장 목록(지역 필터) · 매장 상세(영업시간 · 휴무 · 지도 · 편의시설) |
| 게시판 스킨 | themes/hairsalon/modules/board | 사진형(룩북) · 글 목록형(저널) |
| 회원 · 쪽지 스킨 | themes/hairsalon/modules/{member, communication} | 로그인 · 가입 · 회원 정보 · 쪽지 |
| 짓미페이 스킨 | themes/hairsalon/modules/zittme_pay | 예약금 결제 · 결제 결과 · 무통장입금 안내 |
설치와 적용
- 스토어에서 설치하거나
themes/hairsalon에 압축을 풉니다. - 관리자 > 디자인 설정에서 헤어살롱을 골라 적용합니다.
- 예약 모듈을 설치하고 예약 페이지(예: mid
reservation)를 만든 뒤, 레이아웃 설정 > 기본 > 예약 페이지 주소에/reservation을 적습니다. 상단 예약 버튼과 디자이너 카드의 "이 디자이너로 예약"이 이 주소로 연결됩니다. - 매장이 여럿이면 지점 모듈로 매장을 등록합니다. 지점 모듈이 없어도 테마는 동작하며, 첫 화면의 매장 안내 칸만 나오지 않습니다.
- 예약금을 받으려면 짓미페이를 설치하고 결제수단(무통장입금 또는 PG)을 켭니다.
- 포인트 색: 기본은 브론즈(#b08d57)입니다. 포인트 색을 바꾸면 버튼 위 글씨색(흰색/먹색)과 글자로 쓰는 포인트 색(라벨 · 링크)을 테마가 자동으로 골라, 밝은 색을 골라도 글씨가 읽히도록 대비를 맞춥니다.
- 로고: 로고 이미지가 없으면 로고 텍스트, 그것도 없으면 사이트 제목을 씁니다. 슬라이더 위에서는 "밝은 로고 이미지"를 씁니다.
- 페이지 유형: 사이트맵 메뉴 클래스에
m을 적으면 그 메뉴를 첫 화면처럼,s를 적으면 서브 페이지로 그립니다. - 시술 목록: 분류별로 시술 · 설명 · 소요 시간 · 가격. 시술을 누르면 예약 단계로 넘어갑니다.
- 매장 · 디자이너 · 날짜와 시간: 매장을 고르면 그 매장의 디자이너만 남습니다. "디자이너 무관"을 고르면 가능한 분으로 배정합니다. 자리가 없는 날은 누를 수 없고, 이번 달에 남은 날이 없으면 다음 달을 먼저 보여 줍니다.
- 예약 확인: 이름 · 연락처 · 이메일 · 조회 비밀번호(비회원) · 남기실 말씀과 개인정보 수집 동의. 예약금이 있으면 "결제하고 예약"으로 짓미페이 결제 화면으로 넘어갑니다.
- 결과 · 내 예약: 예약번호와 상태를 보여 줍니다. 비회원은 내 예약에서 예약번호와 조회 비밀번호로 확인합니다. 회원은 적립금 · 쿠폰함도 함께 봅니다.
권장 환경: Zittme 1.0.2 이상, 예약 1.0.0 이상. 반응형 테마이므로 모바일 전용 뷰는 끄는 것을 권장합니다.
첫 화면 구성
레이아웃 설정의 첫 화면 슬라이더와 첫 화면 구성 탭에서 정합니다. 사이트 대문(시작 메뉴)은 따로 지정하지 않아도 첫 화면으로 봅니다.
| 칸 | 설정 | 내용 | |||
|---|---|---|---|---|---|
| 슬라이더 | 슬라이드, 넘김 간격, 높이 | 한 줄에 하나씩 `이미지주소 \ | 작은문구 \ | 큰문구 \ | 링크. 큰문구 안의 \n` 은 줄바꿈으로 바뀝니다. 간격을 0 으로 두면 자동으로 넘기지 않습니다. |
| 소개 | 소개 문구 · 본문 · 서명 | 슬라이더 아래 한 문장과 짧은 문단. 문구를 비우면 칸을 감춥니다. | |||
| 시술 메뉴 | 시술 메뉴 보이기 | 예약 모듈에 등록한 시술을 분류별로 묶어 소요 시간과 가격을 보여 줍니다. | |||
| 디자이너 | 디자이너 보이기 | 예약 모듈의 담당자를 가로로 흐르는 카드로 보여 줍니다. 사진이 없으면 이름 첫 글자를 크게 씁니다. | |||
| 스타일 | 스타일 게시판 주소 · 개수, 룩북 사진 | 게시판 mid 를 적으면 그 게시판의 사진을, 비우면 "룩북 사진"에 적은 이미지를 모자이크로 보여 줍니다. 모자이크가 빈칸 없이 채워지도록 5장 단위로 맞춰 보여 줍니다(예: 7장이면 5장). | |||
| 매장 안내 | 지점 안내 보이기 | 지점 모듈의 매장을 영업 중/종료 표시와 함께 보여 줍니다. | |||
| 예약 유도 | 마무리 문구 · 배경 이미지 | 첫 화면 맨 아래 예약 버튼 칸. 문구를 비우면 감춥니다. |
색과 로고
예약 화면 (예약 스킨)
게시판
게시판 설정의 목록 모양으로 고릅니다. 사진이 주인공이면 gallery(룩북), 글이 주인공이면 journal(공지 · 저널)입니다. 댓글은 비회원도 닉네임 · 비밀번호로 남길 수 있습니다(게시판 권한에 따름).
푸터
레이아웃 설정 > 푸터에서 사업자 정보(줄바꿈으로 여러 줄), 소셜 주소(이름 | 주소), 저작권 문구를 적습니다.