swatch

swatch 운영 매뉴얼

스킨을 내 쇼핑몰에 적용한 뒤 할 설정과 고칠 곳을 항목별로 모았습니다. 디자인센터는 디자인만 복사하므로, 상품·진열·게시판 같은 관리자 설정은 아래대로 내 쇼핑몰에서 맞춰 주세요.

관리자 쇼핑몰 관리자 화면에서편집창 디자인 > 스마트디자인 편집창에서범위 밖 스킨이 다루지 않는 것

기본 설정

운영 설정 파일(js/config.js) — 무료배송 기준·상담 링크·혜택 문구

편집창
어디서
디자인 편집 > 화면명 검색 "config" > js/config.js > 값 고치고 저장
할 일
각 줄 설명대로 값을 넣는다. 값을 비우거나 0이면 그 기능이 화면에서 빠진다.
  • freeShippingLimit — 관리자 배송비 설정의 무료배송 기준과 같은 금액(상세 "N원 더 담으면 무료배송", 장바구니 막대)
  • shipCutoffHour — 평일 오늘 출고 마감 시각(상세 카운트다운). 공휴일은 모른다 — 연휴엔 0으로
  • topbarMessages — 상단 띠 문구. 둘 이상이면 5초마다 바뀐다(한 줄이면 레이아웃 문구를 고쳐도 된다)
  • csHours — 고객센터 운영 시간(푸터·고객센터 화면). 전화번호는 관리자 내 쇼핑몰 정보
  • kakaoChannelUrl·naverTalkUrl — 오른쪽 아래 상담 버튼, sns — 푸터 SNS 링크
  • mainVideos — 메인 영상(유튜브 주소, 쇼츠는 세로 카드). 손님이 누를 때만 재생된다
  • timeSaleCateNo — 타임세일 분류 번호(아래 "타임세일"), faqBoardNo — FAQ 게시판 번호(제목을 누르면 답이 펼쳐진다)
  • detailBenefits·joinBenefits — 상세 사진 아래·로그인/회원가입 위 혜택 띠. 실제로 운영 중인 혜택만(쿠폰명·금액은 관리자 쿠폰과 같게)
  • detailTopImage·detailBottomImage — 모든 상품 상세설명 위·아래에 공통으로 넣는 이미지 주소(가로 1200px까지, 아래 "상세 공통 이미지")
  • detailFoldHeight — 상세설명이 이 높이(px)의 1.3배를 넘으면 접고 "상세정보 펼쳐보기" 버튼(예: 1600). 0이면 늘 펼친 채
  • detailImageGuide — 상세에 이미지 자리 안내 상자(점선)를 보인다. 데모용 — 운영 몰은 false
  • ownerflowPopups — 메인 팝업(아래 "메인 팝업")
안 하면
배송비 설정과 금액이 다르면 "무료배송"이라고 보여 놓고 배송비가 붙는다.
참고
카페24는 무료배송 기준을 기간할인 전 금액으로 본다 — 상세 "N원 더"도 할인 전 판매가로 계산한다(할인가로 보면 더 담으라는 금액이 실제보다 크다).
참고
저장 뒤 화면이 그대로면 브라우저 새로고침(캐시).

메인 탭 진열·더보기

관리자
어디서
상품 관리 > 메인진열 — "추천상품"(첫 탭), "신상품"(둘째 탭)
할 일
두 진열 그룹 모두 상품을 채운다. 한 화면 개수는 sk/area/main/best.html 진열 주석 $count, 그보다 많으면 "더보기"가 생긴다.
안 하면
빈 진열 그룹은 카페24가 통째로 빼서 탭을 눌러도 아무것도 안 나온다.
참고
탭 이름은 sk/area/main/best.html의 글자다(진열 이름을 바꿔도 탭 글자는 그대로).

인기 검색어

관리자
어디서
쇼핑몰 설정 > 상품 설정 > 상품검색 설정(/disp/admin/shop1/product/ConfigSearchkey) > 인기검색어
할 일
검색어를 쉼표로 이어 넣는다(10개까지, 예: 수분,진정,선크림). 헤더 검색칸을 누르면 아래에 나온다. 같은 화면 "상품 검색영역 홍보 문구"를 켜면 그 문구가 검색칸 안 안내 글자가 된다.
안 하면
검색칸을 눌러도 아무것도 안 나온다(빈 상자는 숨긴다).

이벤트 게시판(메인 이벤트 띠·갤러리 목록)

관리자
어디서
게시판 관리 > 게시판 8번(기본 "갤러리")
할 일
게시판 이름을 "이벤트"(또는 매거진)로 바꾸고, 글마다 사진을 첨부한다(첫 첨부 사진이 카드 사진, 세로 4:5 권장). 메인에는 최근 4개.
안 하면
글이 없으면 메인 섹션이 통째로 숨는다. 사진이 없는 글은 회색 칸.

타임세일

관리자 편집창
어디서
프로모션 > 혜택 등록 > 기간할인(분류 지정), 상품 설정 > 상품정보 표시설정 "할인 기간" 표시함
할 일
타임세일 분류를 하나 만들어 상품을 넣고, 기간할인(상품범위 "상품분류"로 그 분류, 기간은 달력 아이콘으로 고른다)을 건 뒤 그 분류 번호를 config.js timeSaleCateNo에. 목록 카드에 할인가가 나오게 아래 "할인판매가 표시 켜기"도 한다.
안 하면
분류 목록 제목 아래 남은 시간이 안 나온다. 상세·카드의 남은 시간은 "할인 기간" 표시를 켜면 분류와 상관없이 나온다.

회원가입 혜택(가입 혜택 띠)

관리자 편집창
어디서
쇼핑몰 설정 > 고객 설정 > 적립금 설정(/admin/php/shop1/m/mileage_info_f.php) > 회원가입 적립금, 또는 쿠폰 만들기(회원가입 쿠폰)
할 일
실제 혜택을 만든 뒤 같은 금액으로 config.js joinBenefits 문구를 쓴다(로그인·약관 동의·회원가입 제목 아래 띠).
안 하면
띠를 비워 두면 안 나온다. 혜택을 없앴는데 문구를 그대로 두면 없는 혜택을 약속하게 된다.

관리자만 쓰는 게시판의 글쓰기 버튼

편집창

게시글 작성자 옆 IP

관리자
어디서
게시판 관리 > 게시판 이름 > IP표시
할 일
손님이 보는 게시판(공지·이벤트 등)은 "표시안함".
안 하면
글 보기 화면에 "관리자 (ip:…)"가 나온다.

고객센터 화면·브랜드 소개

편집창
어디서
board/index.html(고객센터), shopinfo/brand.html(브랜드 소개)
할 일
게시판 번호를 바꿨으면 고객센터 링크를 고친다. 브랜드 소개 문구·사진은 그 파일에서 바꾼다(모듈 밖이라 쇼핑몰명 변수는 안 된다).
안 하면
기본 스킨에는 /board/index.html이 없어 게시판 화면의 "게시판" 경로 링크가 404였다 — 이 파일을 지우면 다시 404.

상품 가격 줄 — 할인판매가 표시 켜기

관리자
어디서
상품 설정 > 상품정보 표시설정(/disp/admin/product/ShowDisplayDefault) — 메인화면 탭(진열 그룹마다), 상품목록 탭(일반·추천·신상품마다)
할 일
각 그룹에서 "할인판매가" 표시설정을 표시함, 맨 아래 확인. 그룹마다 따로 저장해야 한다.
안 하면
목록 카드가 기간할인 전 판매가를 최종가로 보여 상세 가격과 다르다.
참고
스킨은 항목 이름으로 가격을 고른다 — 최종가 = 할인판매가(없으면 판매가), 취소선은 하나(할인 있으면 판매가, 없으면 소비자가), 할인율은 그 취소선 대비, "최적할인가"(쿠폰·회원 할인 포함)는 작은 줄. 항목 순서·글자 크기 설정은 카드 모양에 영향이 없다.

상세 가격 헤드라인·빈 안내 칸

범위 밖

상세 공통 이미지(상단·하단)

편집창
어디서
이미지는 디자인 편집 > 파일 업로드(또는 FTP)로 올리고, 그 주소를 js/config.js detailTopImage·detailBottomImage에
할 일
배송·교환 안내, 브랜드 소개처럼 모든 상품에 같은 이미지만. 가로 1200px까지(더 크면 줄여서 보인다).
안 하면
비워 두면 아무것도 안 나온다. 상품마다 다른 내용은 상품 등록의 상세설명에 넣는다.

상세 사진 — 확대 없음, 썸네일

범위 밖

쿠폰 받기 버튼

범위 밖

네이버페이·카카오페이 버튼 자리

관리자
할 일
결제 연동(네이버페이 주문형·카카오페이 구매)을 마치면 카페24가 상세 구매 버튼 아래에 실제 버튼을 넣는다. 스킨은 버튼을 만들지 않는다.
참고
테스트 디자인 미리보기(?PREVIEW_SDE=1)에서는 연동 전에도 그 자리에 점선 빈 틀("네이버페이 버튼 자리")이 보인다 — 디자인 확인용이고, 손님 화면에는 나오지 않는다.

메인 팝업

관리자 편집창
어디서
카페24 앱스토어 "오너플로우 팝업 & 배너 매니저"(무료) 설치 → 앱에서 팝업 만들기 → 팝업 목록의 [코드] 창
할 일
코드 창의 data-area="…" 값을 js/config.js ownerflowPopups에 넣는다(예: ['91f4f919'], 여러 개면 쉼표). 앱 공통코드·팝업 자리는 스킨이 메인에 넣으니 HTML은 고치지 않는다. 카페24 기본 팝업(디자인 > 팝업 관리)을 쓰면 이 값은 비워 둔다.
안 하면
값을 비우면 앱 팝업이 안 뜨고 앱 스크립트도 불러오지 않는다.

상세 "할인 기간" 글자색

범위 밖

편집창 모듈 "속성" 탭은 쓰지 않는다

편집창
어디서
스마트디자인 편집창 > 상품 진열 모듈에 마우스 > 편집 > 속성(표시항목별 디자인 설정)
할 일
표시명·글자 크기·색은 여기서 바꾸지 말고 관리자 상품정보 표시설정에서 바꾼다. 단, 글자 크기는 관리자에서도 카드·상세 표에 반영되지 않는다(아래 "글자 서체·크기"). 항목 이름이 undefined로 보이는 것도 정상이다.
안 하면
속성 탭에서 적용해도 편집창에만 값이 남고 쇼핑몰 화면·관리자 설정은 그대로라 "설정이 안 먹는다"로 보인다.

글자 서체·크기

범위 밖

쇼핑몰 정보(푸터·회사소개)

관리자
어디서
기본 설정 > 내 쇼핑몰 정보(/admin/php/shop1/m/company_info_f.php)
할 일
상호·대표자·사업장 주소·대표 전화·수신전용 이메일·개인정보보호책임자, 통신판매업 신고(신고함 + 번호), 회사소개 본문. 저장 시 "쇼핑몰 주소"가 비어 있으면 저장되지 않는다.
안 하면
푸터에서 값이 빈 항목은 이름째 숨는다(통신판매업 신고·팩스·사업자정보 확인 링크). 전자상거래법 표기 항목이 빠진 채로 보인다.
참고
이메일은 개인정보보호책임자 이메일로 표시된다(카페24 {$email}이 비어 나오는 문제). 주소는 도로명 → 상세주소 순으로 스킨이 맞춘다. 관리자명·대표 휴대전화·대표 이메일(기본정보 설정)은 카페24 계정 본인확인용이라 쇼핑몰 화면에 나오지 않는다. 쇼핑몰명은 아래 항목.

쇼핑몰명 바꾸기

관리자
어디서
기본 설정 > 내 쇼핑몰 정보 > 기본정보 설정 > 쇼핑몰명
할 일
쇼핑몰명을 고치고 저장 → "상점명을 수정하시면 이용약관 및 개인정보보호정책에 있는 상점명은 수작업으로 수정하셔야 합니다. 상점명을 수정하시겠습니까?" 확인창에서 반드시 확인. 그다음 이용약관·개인정보처리방침 본문의 상점명을 직접 고친다(자동으로 바뀌지 않는다).
안 하면
확인창을 닫거나 취소하면 다른 항목은 저장돼도 쇼핑몰명만 그대로 남는다(저장된 것처럼 보여 헷갈린다).
쓰이는 곳
푸터 저작권 줄, 로고 대체 문구, 검색·SNS 공유 태그(작성자·사이트 이름), 분류 페이지 제목의 [MALL_NAME]. "멀티쇼핑몰 설정"의 쇼핑몰 이름은 관리용 명칭이라 쇼핑몰 화면과 무관하다.

설정을 바꿨는데 쇼핑몰 화면이 그대로일 때 — 사이트캐시 삭제

관리자
어디서
관리자 상단 "사이트캐시 삭제" → 뜨는 팝업 창에서 삭제
할 일
쇼핑몰 정보·SEO·약관처럼 여러 화면에 나오는 값을 바꾼 뒤 쇼핑몰이 예전 값을 보이면 캐시를 지운다. 분류 페이지 제목 등은 지워도 몇 분 늦을 수 있다.
참고
팝업 창으로 열리므로 브라우저 팝업 차단을 풀어야 한다.

검색엔진용 코드(구조화 데이터·OG 문구)에 넣은 사업자 정보

관리자
어디서
기본 설정 > 검색엔진 최적화(SEO) > 고급설정 > 코드 직접입력(PC 쇼핑몰·모바일 쇼핑몰 탭 각각), SEO 태그 변수 활용 > 오픈그래프 태그 설정(설명 문구)
할 일
여기에 직접 적은 상호·전화·이메일·주소(application/ld+json Organization 등)는 내 쇼핑몰 정보와 연동되지 않는다 — 사업자 정보를 바꾸면 이곳도 같이 고치고 저장, 필요하면 사이트캐시 삭제.
안 하면
화면(푸터)엔 새 정보가 보여도 페이지 소스·검색 결과에는 예전 연락처·주소가 남는다. - 오픈그래프 태그 설정은 메인화면·상품상세·상품분류·게시판 탭마다 og:title·og:description이 따로 있다 — 상호가 들어간 탭을 모두 고친다.

이용약관·개인정보처리방침

범위 밖
어디서
기본 설정 > 이용 약관 설정(/admin/php/shop1/m/mall_agree_f.php) — 쇼핑몰 이용약관 / 개인정보처리방침 탭
할 일
기본 서식의 자리표시("OO 회사", "(주)○○○", 보호책임자 "OOO", 적용일 "OOOO년 OO월 OO일")를 실제 값으로, 맨 위 "본 양식은 … 샘플" 문구 삭제. 내용은 운영 형태에 맞게 검토(법률 검토 권장). 스킨은 글자 모양만 정한다.

회원가입 필수 동의 내용

관리자
어디서
이용 약관 설정 > 개인정보처리방침 > 회원가입 시 > "개인정보 수집 및 이용 동의(필수)"
할 일
사용 여부 켜기(기본 꺼짐).
안 하면
회원가입 화면의 "개인정보처리방침 동의(필수)" 상자가 비어 있다 — 내용 없이 필수 동의를 받는 상태.

분류 페이지 제목(검색 결과·브라우저 탭)

관리자
어디서
기본 설정 > 검색엔진 최적화(SEO) > SEO 태그 변수 활용 > 주요 페이지 SEO 태그 설정 > 상품분류 설정
할 일
메타태그 Title을 [CURRENT_CATE_NAME] - [MALL_NAME]으로.
안 하면
1단 분류 제목이 "아우터 - 아우터 - 몰이름"처럼 겹친다. 바꾼 뒤 분류마다 캐시로 늦게 반영된다.

사이즈 가이드

관리자
어디서
상품 수정 > 사이즈 가이드(상품마다)
할 일
사용함 + 기본 사이즈표(여성·남성 등) 선택. 잡화는 끈다.
안 하면
상세의 "사이즈 가이드" 링크가 나오지 않는다. 링크를 누르면 환산표 레이어가 뜬다(모바일에선 표가 가로 스크롤).

상품 후기 — 기본 게시판(상품 사용후기) 설정

관리자
어디서
게시판 > 게시판 관리 > "상품 사용후기"(4번) 제목 클릭(/admin/php/shop1/b/board_admin_c.php?mode=modify&board_no=4), 맨 아래 "저장"
할 일
평점 기능 사용·상세페이지 내 평점 표시를 "사용", 파일첨부기능 "사용". 작성자 보호 설정 "사용"(일부 글자만 노출)은 그대로 둔다.
안 하면
평점을 끄면 상세 후기에 평균·별점·점수 막대가 없이 "리뷰 N"만 나온다. 파일첨부를 끄면 고객이 사진을 못 올려 상세 "포토 리뷰"와 메인 "Photo Review" 섹션이 숨는다(사진 후기가 하나도 없으면 스스로 숨는다). - 스킨이 그리는 방식(운영자가 헷갈릴 것):
  • 상세 후기는 이 게시판 글로 스킨이 직접 그린다 — 평점 요약(평균·점수별 개수), 포토 리뷰, 카드 목록(5개씩 "리뷰 더보기"). 카드 굵은 줄은 본문 첫 문장이다(제목은 쓰지 않는다). 사진은 글마다 첫 첨부 한 장.
  • 상품마다 최근 200개까지 읽는다 — 그보다 많으면 오래된 후기는 평균·목록에서 빠진다. 관리자 답변글은 빠진다.
  • 상품 카드(메인·목록·더보기) 가격 아래 후기 줄 "★4.8 (12)" — 몰 전체 최근 후기 200개를 상품별로 묶는다(후기가 더 많은 몰은 최근 것 기준). 후기 없는 상품은 줄이 없다.
  • 후기 게시판 목록(전체 보기)도 제목 대신 본문 첫 문장(굵게)과 나머지 두 줄, 첨부 사진 썸네일. 왼쪽 상품 이미지는 어떤 상품 후기인지 보이는 것이라 첨부 사진과 따로다.
제목
같은 화면 "게시글 제목 지정"에서 "글의 제목을 관리자가 지정한 형태로 고정합니다"를 켜고 제목지정 칸에 "상품 후기"(데모 몰 값). 고객은 본문만 쓰면 된다. 스킨은 제목을 쓰지 않고 본문 첫 문장을 굵은 줄로 보여서(상세 카드·메인·후기 게시판 목록) 모든 글 제목이 같아도 된다. 이미 쓴 글의 제목은 그대로다. 비밀글은 본문이 가려져 목록에 제목이 나온다.

후기 적립금

관리자
어디서
같은 게시판 설정 화면 > "적립금 바로주기 설정"
할 일
후기에 적립금을 줄 거면 금액(금액1~3)을 넣고 "설정 금액표시 후 바로 지급" 또는 "원클릭으로 적립금 지급". 쓰기 권한("회원이상")도 여기서.
안 하면
적립금은 관리자가 글마다 직접 준다(기본 "적립금주기 버튼 표시"). 스킨 화면에는 적립금 안내가 없다 — 알리려면 공지·배너로.

PRO 리뷰(카페24 PRO)를 쓸 때·끌 때

관리자
어디서
카페24 PRO > PRO 리뷰 > 리뷰 설정 > 디자인 설정 — 상품상세 위젯(상품 상세·사진&동영상·AI 리뷰 요약·AI 베스트 리뷰·리뷰 목록), 게시판 위젯, 메인 위젯, 상품목록 위젯. 탭마다 맨 아래 "저장하기"(누르지 않으면 되돌아간다). - 이 스킨은 기본 게시판 후기를 그린다. PRO 리뷰는 카페24 PRO에 들어 있는 기능이라 마이앱에서 삭제가 안 된다 — 안 쓰면 위젯을 모두 끈다.
PRO를 켜면
켠 위젯이 있는 화면은 PRO에 맡긴다(스킨이 스스로 비킨다). 상세 위젯을 켜면 상세 후기가 PRO 화면으로, 메인 위젯을 켜면 메인 "Photo Review" 섹션이 빠지고 PRO 위젯이 들어간다. 겹쳐 보이지 않는다.
  • PRO 화면(다른 도메인 iframe)의 글자·색·모양은 스킨이 바꿀 수 없다 — PRO 설정(색상 설정)으로만. 스킨은 메인 위젯 폭·여백만 본문 칸에 맞춘다.
  • PRO 화면에는 PRO로 쓴 리뷰만 나온다 — 관리자나 Admin API로 게시판에 직접 넣은 후기는 PRO 목록에 없다(스킨 화면에는 모두 나온다).
주의
위젯을 꺼도 PRO 스크립트는 페이지에 붙어 기본 후기 목록·후기 쓰기 버튼을 숨기는 스타일을 남긴다 — 스킨(js/review.js)이 지운다. PRO로 쓴 구매 리뷰도 게시판 4번에 같이 저장돼서 스킨 후기에 그대로 나온다. 위젯 설정을 바꾼 뒤 화면 반영이 늦으면 사이트캐시 삭제.

장바구니 — 스킨이 숨기는 기본 기능

편집창
스킨이 숨기는 것
견적서출력 버튼(B2B용), 해외배송 상품이 0개일 때 국내/해외 탭과 "해외장바구니로 이동", 배송 그룹이 하나일 때 그룹 합계(오른쪽 합계와 같음), 적립금이 없을 때의 "-" 줄. 이용안내는 제목을 눌러 펼친다(js/polish.js).
할 일
견적서가 필요한 몰은 편집창 css/components.css에서 estimatePrint 줄을 지운다.

앱이 그리는 화면 — 추천 팝업 등

범위 밖
끄거나 바꾸려면
관리자 앱 메뉴(마이앱)에서 해당 앱 → 캠페인·위젯 끄기 또는 디자인 설정. 필요 없는 앱은 삭제한다.
안 하면/주의
앱 팝업·위젯은 스킨과 모서리·서체가 달라 "디자인이 안 맞는다"로 보일 수 있다 — 스킨 수정으로 고칠 수 없다.

상품 옵션을 버튼·컬러칩으로 보이기(선택창 대신)

관리자
어디서
상품목록 → 상품 수정 → 옵션/재고 탭 → "사용된 옵션" 표의 옵션마다 [옵션값 수정](새 창이 열린다 — 팝업 차단을 풀어 둔다).
할 일
1. 새 창 "옵션 스타일"에서 고른다 — 텍스트버튼(사이즈처럼 짧은 값), 미리보기(색상: 옵션값마다 "색상 설정"에 색 코드를 넣으면 컬러칩, "색상 이미지 연결"로 원단 사진도 가능), 라디오버튼, 셀렉트박스(기본). 2. [저장] → "…[상품수정]을 클릭해야 최종 반영됩니다. 수정하시겠습니까?" 확인. 3. 상품 화면 맨 아래 [상품수정] → "상품이 수정되었습니다" 확인. 이걸 누르지 않으면 반영되지 않는다.
상품마다 해야 하나
이미 등록된 상품은 상품마다 바꾼다(옵션을 상품에서 직접 입력한 경우). 앞으로 등록할 상품은 상품 → 상품 옵션 관리 → 품목생성형 옵션(공용 옵션 "색상"·"사이즈")에도 같은 "옵션 스타일"이 있으니 거기서 정해 두고 등록할 때 불러온다(불러온 상품에 스타일이 따라오는지는 아직 확인 전).
스킨
버튼·컬러칩 모양을 맞춘다(테두리·선택 표시 — 컬러칩은 둘레 링, 품절 사선, 누르기 크기). 선택한 값 이름은 버튼 아래 "[필수] 차콜"처럼 나온다. 조합 분리선택형이면 두 번째 옵션(사이즈)은 첫 옵션(색상)을 고르기 전까지 흐리게 보인다(정상).
안 하면
기본 셀렉트박스 — 모바일에서 누르면 기기 목록이 올라온다.
참고
옵션 설명·"최대할인" 같은 태그를 옵션마다 붙이는 목록형은 스킨 스크립트가 필요한 별도 작업이다.

장바구니 담기 후 동작

관리자
어디서
쇼핑몰 설정 > 주문 설정 > 주문 시 설정 > "장바구니 담기 확인창"
할 일
확인창 출력(알림형) 또는 "담긴 상품 확인 및 구매가능"(사이드 목록형) 중 선택. 스킨은 두 레이어 모두 디자인돼 있다.

무통장입금 계좌

관리자
어디서
결제 설정 > 무통장입금 계좌 설정 — 대표 휴대전화·이메일 본인확인이 먼저 필요
안 하면
주문서에서 무통장입금 은행을 고를 수 없다. 스킨은 계좌를 화면에 적지 않는다(관리자 값과 어긋나지 않게).

게시판 아이콘(NEW·RE·비밀글)

범위 밖

이 스킨의 기능

상단 띠 문구(무료배송 기준·샘플)

편집창
어디서
스마트디자인 편집창 > layout/basic/layout.html 맨 위 <p class="sk-strip">
할 일
관리자 배송비 설정(기본 설정 > 배송 설정)의 무료배송 기준 금액과 같은 값으로 문구를 고친다.
안 하면
띠에 적힌 기준과 실제 결제 때 배송비가 달라 문의가 생긴다.

메인 히어로·루틴·성분 이야기 문구와 사진

관리자 편집창
어디서
문구·링크는 편집창 파일 목록 sk/area/main/ — 히어로 hero.html, 고민별 칩 concerns.html, 루틴 routine.html, 성분 이야기 story.html (메인 섹션은 파일마다 하나, index.html에는 import 한 줄뿐). 히어로 사진·모바일 사진·버튼 링크는 온에디트 슬롯 banner로도 바꾼다. 사진은 스킨 안 img/main/에 있다 — 디자인 > 디자인 FTP의 이 디자인 폴더(skinN) 안 img/main/에 아래 이름 그대로 덮어 올린다. 바뀌지 않으면 사이트캐시 삭제(공통 항목).
  • hero-pc.jpg 1536×640(12:5, 왼쪽에 문구 자리 비움) · hero-mo.jpg 1024×1365(3:4, 위쪽 비움)
  • routine-1.jpg·routine-2.jpg·routine-3.jpg(정사각에 가깝게 잘림) · story.jpg(4:3으로 잘림)
할 일
다른 이름·경로를 쓰려면 그 영역 파일의 src="/img/main/…"(모바일은 srcset) 값을 바꾼다.
안 하면
히어로는 피치 그러데이션, 루틴·이야기는 회색 사진 자리로 보인다.

고민별 칩 연결

관리자 편집창
어디서
상품 > 상품 분류 관리에서 고민별 분류(수분·진정·각질·탄력·모공)를 만든 뒤, 편집창 sk/area/main/concerns.html의 칩 링크
할 일
칩 링크를 /product/search.html?keyword=…(기본값, 검색 결과)에서 /product/list.html?cate_no=<분류 번호>로 바꾼다.
안 하면
칩을 누르면 상품명·검색어에 그 단어가 든 상품만 나온다(분류로 묶은 것과 다를 수 있다).

상품 카드 마우스오버 제형 사진

관리자
어디서
상품 > 상품 등록·수정 > 이미지 정보 — "축소 이미지"를 개별 등록
할 일
축소 이미지에 제형(텍스처) 사진을 넣는다. 목록 이미지와 같은 크기(정사각)로 올린다.
안 하면
등록하지 않거나 작게 올리면 마우스를 올려도 사진이 바뀌지 않는다(흐린 같은 사진이 뜨지 않게 스킨이 끈다). 터치 화면은 원래 바뀌지 않는다.

상세 성분 상자("이런 피부에 맞아요")

관리자
어디서
쇼핑몰 설정 > 상품 설정 > 상품정보 표시설정(/disp/admin/product/ShowDisplayDefault) — 표시 항목 목록 아래 항목 추가로 4개(피부 고민·핵심 성분·제형·사용법, 이름 그대로)를 만든다. 추가 항목은 메인·목록·상세 탭에 함께 생기므로 상품상세 탭에서 표시함(메인·목록 탭에도 같이 켜지지만 스킨이 카드에서는 숨긴다). 값은 상품 등록·수정 화면의 "(추가항목)" 칸에 상품마다 입력.
할 일
"핵심 성분"은 쉼표로 나눠 적는다(예: 세라마이드 NP, 판테놀 5%, 스쿠알란) — 칩으로 하나씩 보인다.
안 하면
상자가 나오지 않는다(값이 하나라도 있으면 그 줄만으로 상자를 만든다). 이름이 다르면 정보 표에 일반 줄로 남는다.
참고
효능 문구는 화장품 표시·광고 기준 안에서("촉촉하게 가꿔 줘요").

상세 제형 사진(대표 사진 옆)

관리자
어디서
상품 등록·수정 > 이미지 정보 — "축소 이미지" 개별 등록(카드 마우스오버와 같은 사진)
할 일
제형 사진을 대표 이미지와 같은 크기로 올린다. 제형 사진이 없는 상품은 축소 이미지를 자동 생성으로 둔다.
안 하면
축소 이미지에 대표 사진을 원본 크기 그대로 올리면 상세에 같은 사진이 두 장 나란히 보인다(스킨이 같은 그림인지 판별할 수 없다).
모바일
카페24 모바일 사진 넘기기에는 축소 이미지가 들어가지 않는다 — 같은 제형 사진을 추가 이미지 첫 장으로도 올리면 모바일 두 번째 장이 된다. PC 썸네일 줄은 사진이 3장 이상일 때만 나온다(대표·제형 두 장은 위 두 칸과 같아서 숨긴다). 첫 칸 그림은 스킨이 대표 사진으로 바꾼다.
확대
상세 사진 확대(마우스 오버 창)는 스킨이 끈다(공통 "상세 사진 — 확대 없음").

메인 진열(베스트·신상품 탭)

관리자 편집창
어디서
상품 관리 > 메인진열 — "추천상품"(베스트 탭), "신상품"(새로 나왔어요 탭). 섹션 제목·탭 이름은 sk/area/main/best.html 글자
할 일
두 그룹 모두 상품을 채운다. 한 번에 4개, 더 있으면 "더보기"($count = 4).
안 하면
빈 그룹은 탭을 눌러도 비어 있다.

상단 띠 롤링을 쓰지 않는 이유

편집창

브랜드 소개·히스토리·인증

편집창
어디서
shopinfo/brand.html(브랜드 소개), shopinfo/history.html(연표 + 인증·시험)
할 일
문구는 데모용이다. 연표는 실제 연혁으로, 인증·시험 카드는 실제로 받은 것만 남기고 기관·번호를 적는다.
안 하면
받지 않은 인증이 보이면 표시·광고 위반이 될 수 있다.

검색칸 안내 글자

관리자 편집창

로고

관리자

상세설명 틀(제형 → 핵심 성분 → 사용 순서 → 전성분 표)

관리자
어디서
관리자 > 상품 > 상품 수정 > 상세설명 — 에디터를 HTML 모드로 바꿔 붙인다. 틀은 스킨 패키지 snippets/detail-page.html.
할 일
사진을 에디터의 사진 넣기로 먼저 올리고, 틀의 src 주소를 올린 사진 주소로 바꾼다. 사진은 가로 1200px까지(PC는 860px 칸에 맞춰 줄고, 모바일은 좌우 16px 안쪽, 모서리는 스킨이 둥글린다). 성분 상자·사용 순서 칸은 <li>째 지우거나 복사해 늘린다(순서 번호는 자동). 전성분은 용기 표기와 같게 적는다.
안 하면
일반(글쓰기) 모드에 붙이면 HTML이 글자로 들어간다. 1200px보다 넓은 사진은 화면에선 칸에 맞춰 줄지만 파일이 커서 상세가 늦게 뜬다.
참고
js/config.js detailImageGuide가 켜져 있어도 상세설명에 사진이 하나라도 있으면 "상품 상세설명 영역" 안내 상자는 나오지 않는다. 상세설명이 detailFoldHeight(1600px)의 1.3배를 넘으면 접히고 "상세정보 펼쳐보기" 버튼이 붙는다.

항목 48개