신선한 테마 (쇼핑몰)

신선식품 쇼핑몰을 위한 Zittme 공식 테마 신선한(sinsunhan)의 상세 매뉴얼입니다. 커머스 모듈과 짝을 이루어 설계되었으며, 대문(메인페이지)을 레이아웃이 직접 그리는 것이 가장 큰 특징입니다 — 위젯 페이지를 따로 만들지 않아도 슬라이더 · 일일특가 · 기획전 · 상품 섹션 · 랭킹 · 게시판 최신 글이 갖춰진 쇼핑몰 대문이 완성됩니다. 다크 모드와 반응형을 기본 지원하고, 기본 서체는 Pretendard입니다.

이 문서의 화면은 실제 데모 사이트를 그대로 캡처한 것입니다. 데모는 shopdemo.zitt.me 에서 직접 볼 수 있습니다.

구성

모든 구성요소가 같은 디자인 토큰(브랜드 그린 · 서체 · 라운드 · 간격)을 공유합니다. 포인트 색상은 레이아웃 설정 한 곳에서 바꾸면 전 화면에 함께 적용됩니다.

설치와 적용

1. 테마 파일을 themes/sinsunhan 에 둡니다. (스토어 설치 또는 압축 해제)
2. 관리자 > 디자인 설정에서 신선한 테마를 고르고 적용합니다. 레이아웃과 모듈 스킨이 한 번에 적용됩니다.
3. Zittme 1.0.1 이상에서는 쪽지 · 메시지 · 알림센터 스킨까지 테마 적용 시 함께 바뀝니다. 1.0.0 에서는 커뮤니케이션 · 메시지 · 알림센터 모듈 설정에서 각각 신선한 을 골라 주세요.
4. 커머스 모듈이 설치되어 있으면 상점 메뉴 · 헤더 검색 · 대문 상품 섹션이 자동으로 연동됩니다. 상점 모듈이 여러 개면 레이아웃 설정 > 메인 구성의 "상점 모듈 주소(mid)" 에 사용할 mid 를 적습니다.

권장 환경: Zittme 1.0.1 이상, 커머스 0.2.15 이상. 1.0.0 에서도 동작하지만 3번 항목처럼 일부 스킨을 손으로 지정해야 합니다.

함께 권장하는 사이트 설정

• 반응형 전환: 이 테마는 반응형이므로 모바일 전용 뷰를 끄는 것을 권장합니다. 시스템 설정 > 고급에서 모바일 뷰를 끄거나, config/config.user.inc.php 는 두지 않고 mobile.enabled 를 끕니다. 켜져 있으면 모바일에서 별도 모바일 레이아웃이 대신 표시됩니다.
• XE 호환 버튼 스타일 끄기: 코어 공통 CSS의 XE 시절 .btn 스타일(height 24px !important)이 스킨 버튼을 덮어쓸 수 있습니다. config/config.user.inc.php 에 아래 한 줄을 넣고 files/cache/assets 안의 파일을 비우면 깔끔하게 제거됩니다.

define('DISABLE_XE_BTN_STYLES', true);

헤더

헤더는 위에서부터 유틸 바(로그인 · 관리 링크 · 언어) → 로고 · 검색 · 마이페이지 · 장바구니 · 알림 → 카테고리 메뉴 3단으로 구성됩니다.

• 관리자 바로가기: 관리자로 로그인하면 유틸 바에 관리자 외에 쇼핑 관리(커머스 콘솔)와 페이 설정(짓미페이 설정) 링크가 함께 나옵니다. 모바일 메뉴 서랍의 도구 줄에도 같은 링크가 있습니다. 일반 회원에게는 보이지 않습니다.
• 전체 카테고리 메가메뉴: 1차 카테고리를 열 머리로, 2차를 세로 목록으로 펼칩니다. 열 수는 1차 카테고리 수에 따라 자동으로 늘어납니다 (6개까지 3열, 8개까지 4열, 그 이상 5열).
• 알림 벨: 알림센터가 설치되어 있고 사용 중인 알림 종류가 하나 이상이며, 알림센터 설정의 표시 대상(PC · 모바일)에 해당할 때만 나타납니다. 벨을 누르면 최근 알림이 펼쳐지고, 알림센터의 "회원 메뉴 표시"가 켜져 있으면 아래에 전체 알림 보기 링크가 붙습니다. 링크는 회원 모듈에 지정된 mid 가 있으면 그 주소로, 없으면 알림 목록 액션 주소로 이동합니다.

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

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

섹션 종류	내용	출처(source)	개수(count)
상점 카테고리 타일	1차 카테고리 바로가기 타일	-	표시할 타일 수
일일특가	할인율 상위 상품이 날마다 하나씩 로테이션, 자정 카운트다운	-	-
진행 중 기획전 카드	커머스 기획전을 이미지 카드로	-	카드 수
추천 / 신상품 / 할인 / 인기 상품	상품 카드 그리드 (담기 바 포함)	-	상품 수
실시간 인기 랭킹	구매수 → 조회수 순 1~N위	-	순위 수
배너 스트립	비주얼 슬라이드 이미지를 중간 배너로 재사용	몇 번째 슬라이드인지 번호 (비우면 차례대로)	-
게시판 최신 글	게시판 글 목록. mid 를 쉼표로 여러 개 적으면 다단 배치	게시판 mid (예: notice,board)	글 수

섹션 제목을 비우면 종류별 기본 제목이 사용됩니다.

카테고리 타일 아이콘

카테고리 타일은 기본으로 카테고리 이름의 첫 음절을 크게 보여 줍니다. 영어 · 스페인어처럼 첫 글자로 구분이 어려운 언어나, 그림 아이콘을 쓰고 싶을 때는 레이아웃 설정 > 메인 구성의 카테고리 아이콘 반복 필드를 씁니다.

항목	설명
카테고리 이름	상점 카테고리 이름과 정확히 일치해야 합니다 (다국어 이름이면 현재 언어로 표시되는 이름)
아이콘 이미지	이미지를 올리면 이미지가 우선합니다. 정사각형 PNG · SVG 권장
이모지 또는 글자	이미지가 없을 때 대신 보여 줄 이모지나 한두 글자

등록하지 않은 카테고리는 그대로 첫 음절이 나옵니다.

비주얼 슬라이더

레이아웃 설정 > 첫 화면 탭에서 슬라이드를 등록합니다(배경 이미지 · 제목 · 설명 · 버튼 · 정렬). 컨트롤(화살표 + 점)은 우하단에 한 덩어리로 모여 있어 모바일에서도 문구를 가리지 않습니다.

슬라이드를 하나도 등록하지 않으면 커머스 상점 홈 배너를 자동으로 승계합니다 — 상점 배너만 관리해도 대문 슬라이더가 함께 채워집니다.

상점 화면 (커머스 스킨)



상점 홈은 배너 슬라이더 · 카테고리 타일 · 기획전 · 추천/신상품/할인 섹션으로 구성됩니다. 배너는 커머스 관리자 > 프론트 설정에서 등록합니다.



목록 화면 상단에는 1차 카테고리 칩과 현재 카테고리의 2차 칩, 검색과 정렬이 배치됩니다. 모바일에서는 칩 줄이 여러 줄로 접히지 않고 좌우 스와이프 한 줄로 표시됩니다.



상품 상세는 일반 옵션 · 추가 옵션 · 조합형 옵션(축 × 축)을 모두 지원합니다. 위 화면은 분쇄도 × 용량 2축 조합형 옵션의 예입니다. 가격 아래에는 적립 혜택 · 배송비 · 배송/신선/교환 안내가 한 덩어리로 이어집니다. 안내 문구는 커머스 설정 > 배송 · 교환반품 안내에서 관리합니다.

기획전



커머스 관리자에서 기획전을 만들면 상점 홈과 메인페이지의 기획전 카드에 자동으로 노출됩니다. 배너는 이미지 · 단색 · 그라디언트 중 고를 수 있습니다.

기획전 노출 기간(start_date / end_date)을 직접 DB 나 스크립트로 넣는 경우 반드시 14자리(YmdHis) 로 저장해야 합니다. 8자리로 넣으면 날짜 비교에서 항상 기간 만료로 처리되어 노출되지 않습니다.

게시판 스킨

게시판 스킨 설정의 목록 형태에서 게시판마다 다른 모양을 고를 수 있습니다.

형태	용도	예시
목록형	공지사항 등 일반 게시판. 카드 프레임 + 구분선 행	아래 공지사항 화면
웹진형	썸네일 + 요약이 있는 커뮤니티	아래 자유게시판 화면
카드형	썸네일 중심 갤러리	-
FAQ형	질문 클릭 시 답변이 펼쳐지는 아코디언	아래 Q&A 화면







웹진형 · 카드형 · FAQ형 필수 설정

썸네일과 요약이 나오려면 두 가지 설정이 필요합니다.

1. 게시판 목록 설정에 '요약' 컬럼 포함 — 목록 설정에 summary 가 없으면 목록 조회 자체가 본문을 가져오지 않아 요약·FAQ 답변이 빈 채로 나옵니다.
2. 문서 설정의 썸네일 대상을 '본문 포함'(content)으로 — 기본값(첨부파일만)에서는 본문 이미지로 썸네일을 만들지 않습니다. 설정을 바꾼 뒤에는 files/thumbnails 안의 파일을 비워 기존 실패 캐시(0바이트 파일)를 지워야 다시 생성됩니다.

회원 · 쪽지 · 알림센터

회원 스킨은 로그인 · 가입 · 마이페이지를 카드 하나에 담고, 입력칸 · 셀렉트 · 버튼 높이를 46px 로 통일했습니다. 쪽지(커뮤니케이션)와 알림센터 화면은 회원 스킨의 마이페이지 틀(좌측 프로필 + 우측 내용)을 그대로 이어받아 회원 메뉴와 같은 자리에서 열립니다. 시스템 메시지(에러 · 안내) 화면은 레이아웃 밖에서도 스스로 완결되도록 만들어져 있습니다.

모바일



• 하단에 홈 · 카테고리 · 검색 · 장바구니 · 마이페이지 5탭 바가 고정됩니다.
• 카테고리 탭은 상점 카테고리 바텀시트(1차 헤더 + 2차 칩), 검색 탭은 상점 검색 바텀시트를 아래에서 띄웁니다. 상점이 없는 사이트에서는 메뉴 서랍이 대신 열립니다.
• 메뉴 서랍은 계정 버튼 · 카테고리 칩 · 메뉴 목록 · 다크모드/언어 도구로 구성됩니다. 관리자에게는 도구 줄에 쇼핑 관리 · 페이 설정 링크가 추가됩니다.

푸터

레이아웃 설정 > 푸터 탭에서 구성합니다. 항목을 비우면 해당 블록은 표시되지 않습니다.

항목	설명
사이트 소개 문구	로고 아래 한 줄 소개
고객센터 전화번호 / 운영시간	좌측 고객센터 블록. 전화번호를 비우면 블록 전체가 숨습니다
문의 이메일	이메일 문의 링크
사업자·연락처 정보	줄바꿈한 각 줄이 한 항목으로 표시
인스타그램 · 페이스북 · 유튜브 · 블로그 주소	입력한 것만 SNS 아이콘으로 표시
하단 안내 문구	저작권 위 작은 면책·안내 문구
저작권 표기	맨 아래 표기

페이지 유형과 LNB

사이트맵의 메뉴 클래스에 m(메인) / sl(서브) / sf(전체 폭)를 입력해 페이지 유형을 지정합니다. 사이트 대문은 클래스를 지정하지 않아도 메인으로 처리되고, 회원 · 쪽지 · 결제 화면은 자동으로 전체 폭이 됩니다. 이 테마의 서브페이지는 LNB 없이 본문 전체 폭으로 동작합니다.

레이아웃 설정 전체 항목

기본

항목	기본값	설명
로고 이미지 / 다크모드 로고	없음	높이 40px 기준. 비우면 로고 텍스트 사용
로고 텍스트	없음	비우면 사이트 제목
포인트 색상	브랜드 그린	버튼 · 링크 · 활성 표시 · 스킨 강조색을 함께 결정
본문 최대 너비	1180px	1060 / 1180 / 1320
메뉴 바 너비 · 색상	본문 폭 · 어둡게	전체 폭 채우기, 포인트색 · 밝게 선택 가능
모바일 다크모드 · 언어 버튼 위치	메뉴 서랍 안	헤더 · 푸터로 이동 가능
색상 모드	기기 설정에 맞춤	자동 / 항상 밝게 / 항상 어둡게

첫 화면

비주얼 슬라이더 표시 조건 · 자동 넘김 간격 · 슬라이드 목록(반복 필드).

메인 구성

상점 모듈 주소(mid) · 카테고리 아이콘(반복 필드) · 메인페이지 섹션(반복 필드). 위 "테마 내장 메인페이지" 참고.

본문·사이드

통합 검색 사용 여부 · (구형 호환) 사이드 로그인 상자.

푸터

위 "푸터" 표 참고.