본문 바로가기
문서

공식자료

고운결 테마 (뷰티 쇼핑몰)

고운결 테마 (뷰티 쇼핑몰)

화장품 · 뷰티 쇼핑몰을 위한 Zittme 공식 테마 고운결(goungyeol)의 매뉴얼입니다. 뷰티 편집숍처럼 흰 여백을 넓게 두고 각진 카드에 상품 사진을 크게 실었으며, 로즈 푸시아 포인트와 블러시 아이보리로 색을 잡았습니다. 신선한 테마와 같은 뼈대(테마 내장 메인페이지, 반복 필드 섹션 조립)를 쓰므로, 여기 없는 내용은 신선한 테마 문서를 함께 보세요.

데모: shopdemo2.zitt.me

고운결 데모

구성

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

설치와 적용

  1. 스토어에서 설치하거나 themes/goungyeol 에 압축을 풉니다.
  2. 관리자 > 디자인 설정에서 고운결을 골라 적용합니다.
  3. 커머스 모듈이 있으면 상점 메뉴 · 헤더 검색 · 대문 상품 섹션이 자동으로 연동됩니다. 상점 모듈이 여럿이면 레이아웃 설정 > 메인 구성의 "상점 모듈 주소(mid)"에 mid 를 적습니다.
  4. 권장 환경: Zittme 1.0.1 이상, 커머스 0.2.16 이상. 반응형 테마이므로 모바일 전용 뷰는 끄는 것을 권장합니다.

    상품 카드의 브랜드 줄 · 별점 · 랭킹

    • 브랜드 줄: 상품의 요약(summary) 항목이 카드와 상세의 브랜드 줄로 나옵니다. 요약에 브랜드명만 짧게 적어 두면 편집숍처럼 "브랜드 / 상품명" 두 줄 표기가 됩니다. (스트리트랩 테마는 상품명 안의 / 로 나누는 방식이라 서로 다릅니다.)
    • 별점 · 리뷰 수: 커머스 상품 후기의 평균 평점과 후기 수를 카드에 함께 보여 줍니다. 후기가 없는 상품은 표시하지 않습니다.
    • 랭킹 번호 · 세일 배지: 랭킹 섹션은 순위 번호를, 할인 상품은 할인율 배지를 카드 위에 겹쳐 보여 줍니다.

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

    레이아웃 설정 > 메인 구성 탭의 "메인페이지 섹션" 반복 필드로 순서대로 조립합니다. 하나도 없으면 기본 구성을 씁니다.

    섹션 종류내용출처(source)개수(count)
    상점 카테고리 타일1차 카테고리 바로가기. 아이콘은 "카테고리 아이콘" 반복 필드에서-타일 수
    추천 / 신상품 / 할인 / 인기 상품상품 카드 그리드-상품 수
    일일특가할인율 상위 상품이 날마다 하나씩 로테이션--
    진행 중 기획전 카드커머스 기획전을 이미지 카드로-카드 수
    실시간 인기 랭킹구매수 → 조회수 순 1~N위-순위 수
    배너 밴드비주얼 슬라이드 이미지를 중간 배너로 재사용몇 번째 슬라이드인지 번호-
    에디토리얼사진 한 칸 + 글 한 칸. 비주얼 슬라이드의 이미지 · 제목 · 설명 · 버튼을 그대로 씁니다몇 번째 슬라이드인지 번호 (비우면 1)-
    게시판 최신 글게시판 글 목록. mid 를 쉼표로 여러 개 적으면 다단게시판 mid (예: notice,board)글 수

    에디토리얼 섹션 만드는 법

    1. 레이아웃 설정 > 첫 화면 > 비주얼 슬라이드에 사진 · 제목 · 설명 · 버튼을 채운 슬라이드를 하나 더 등록합니다. (슬라이더에 노출하지 않으려면 슬라이드 순서를 뒤로 두고 "비주얼 슬라이더 표시"에서 개수를 조절하세요.)
    2. 메인페이지 섹션에 "에디토리얼"을 추가하고 출처에 그 슬라이드 번호를 적습니다.
    3. 섹션 제목을 비우면 기본 제목이, 적으면 그 문구가 작은 라벨로 나옵니다.
    4. 상점 화면 (커머스 스킨)

      • 목록: 카테고리 탭 · 검색 · 정렬. 카드에 브랜드 줄(요약) · 별점 · 세일 배지.
      • 상세: 브랜드 줄 · 상품명 · 가격 · 적립 혜택 · 배송비 · 옵션 · 바로 구매 · 장바구니. 상품관리의 "추가 정보"는 요약 아래 표로 나옵니다.
      • 기획전 · 장바구니 · 주문 · 마이쇼핑: 신선한 테마와 같은 흐름이며 결제는 짓미페이 스킨으로 이어집니다.

      푸터

      레이아웃 설정 > 푸터에서 사이트 소개 문구, 고객센터 전화 · 운영시간 · 이메일, SNS 주소, 하단 안내 문구, 사업자 · 연락처 정보, 저작권 표기를 채웁니다.

      레이아웃 설정 전체 항목

      기본

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

      첫 화면

      비주얼 슬라이더 표시 · 자동 넘김 간격 · 비주얼 슬라이드(배경 이미지 · 제목 · 설명 · 버튼 이름 · 버튼 링크 · 문구 정렬)

      메인 구성

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

      본문 · 사이드

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

      푸터

      사이트 소개 문구 · 고객센터 전화번호 · 운영시간 · 문의 이메일 · SNS 주소 4종 · 하단 안내 문구 · 사업자 · 연락처 정보 · 저작권 표기