쇼핑몰관리자 매뉴얼

쇼핑몰관리자

1:1문의

고객센터

상점관리

상품관리

주문관리

고객관리

게시판관리

디자인관리

모바일쇼핑몰

프로모션

마켓통합관리

부가서비스

접속통계

FTP

C스토어

디자인관리

스마트디자인

디자인 관리

• 디자인 보관함

• 디자인 추가

• 디자인 예약

• 디자인 백업·복구

디자인 기능설정

• 인트로 화면

• 팝업 설정

• 플래시메이커

• 아이콘

• 쇼핑몰 알리미

쇼핑몰 환경설정

심플디자인

1. 심플디자인 개요

1) 심플디자인이란?

• 누구나 쉽게 쇼핑몰을 디자인할 수 있습니다.

• HTML 지식이 없더라도 블로그나 커뮤니티를 꾸미듯 템플릿으로 간편하게 쇼핑몰을 만들 수 있습니다. 또한, 쇼핑몰 관리자 설정 기능이 연결되어 있어 편리하게 관리자 기능을 설정할 수 있습니다.

[1] 기능 요약 설명

- 공통 영역을 한 번에 쉽게 디자인할 수 있는 공통 디자인 설정

- 각 화면별 디자인 요소를 설정할 수 있는 화면별 상세 꾸미기

- 디자인 편집을 쉽게 할 수 있도록 지원되는 부가 기능 (기능 실행취소/복원/미리보기/개선알림)

2) 시작하기 전에

• 카페24의 쇼핑몰 디자인 서비스는 쇼핑몰 디자인설정 방식에 따라 심플디자인스마트디자인으로 나눠집니다.

2. 시작하기

1) 디자인 추가하기

[1] 기본 디자인 추가

- [기본 디자인 추가] 버튼을 클릭하여, 편집방식을 ‘심플디자인’으로 선택한 후 [저장] 버튼을 클릭합니다.


















※ 기본쇼핑몰을 생성하면 기본적으로 심플디자인 스킨으로 쇼핑몰이 생성됩니다.


[2] 추가된 디자인 확인하기

- 추가된 디자인은 디자인 보관함 목록에서 확인할 수 있습니다. ‘심플디자인’ 편집방식으로 제공된 디자인은 디자인 명 앞에 [심플디자인] 아이콘으로 구분됩니다.

※ 스마트디자인을 사용 중인 경우, ‘기본 디자인 추가’ 시, ‘심플디자인’을 선택하면 심플디자인 스킨을 사용할 수 있습니다.

1

2

기본 디자인 추가 레이어 팝업

2) 디자인 편집하기

[1] 심플디자인 수정

- 심플디자인 편집 화면을 띄울 수 있습니다.


[2] 원래대로

- 초기 디자인으로 돌아갑니다.


[3] 디자인방식 변경

- 심플디자인 편집에서 스마트디자인으로 변경할 수 있습니다. 단, 변경된 이후에는 다시 ‘ 심플디자인 ’ 으로 변경할 수 없으니 사용 시 유의하시기 바랍니다.

1

• ‘심플디자인’ 편집방식으로 제공된 디자인은 디자인 명 앞에 [심플디자인] 아이콘으로 구분됩니다.

2

3

3) 편집창 기본 기능 익히기

[1] 공통 디자인 설정

- 쇼핑몰 디자인의 공통되는 영역을 한 번에 설정하고 싶을 때 사용합니다.

- 쇼핑몰 레이아웃을 비롯하여, 컬러, 버튼 디자인을 공통으로 설정합니다.


[2] 실행취소/복원, 미리보기/ 저장하기


1) 실행취소/복원

- 쇼핑몰 디자인을 하는 도중, 실행 이전 상태로 취소하거나, 다시 앞으로 돌아갈 수 있습니다.

- 작업 도중설정했던 실행 히스토리를 목록에서 확인하고 선택할수 있어 디자인 시 더욱 편리합니다.


2) 미리보기

- 수정한 내용을 ‘미리보기’를 통해 확인합니다.


3) 저장하기

- 수정이 완료되면 ‘저장하기’를 눌러야 최종적으로 쇼핑몰에 반영됩니다.


[3] 개선 알림

- 쇼핑몰의 기능이 업데이트되거나 추가된 경우, 화면 좌측 하단에 [개선알림]이 표시됩니다.

- [개선알림]을 클릭하면 알림 팝업이 노출되면서 개선사항 목록을 확인할 수 있습니다. 팝업 내 [일괄적용하기] 클릭 시 심플디자인 기능에 자동반영 됩니다.


※ 알림 받은 신규 기능을 추가하거나 수정할 경우, 기존의 편집한 디자인이 초기화될 수 있습니다. 신규 기능의 추가/수정 시에는 디자인 확인 후, 다시 설정하시기 바랍니다.

1

2

3

쇼핑몰 화면 표시

[1] 화면별 상세 꾸미기

- 쇼핑몰 화면별로 디자인을 꾸미고자 할 때, 사용합니다.

- 각 화면별로 디자인 요소를 수정하거나, 관리자화면에서 설정이 필요한 항목을 설정할 수 있습니다.

- 편집하고자 하는 영역을 선택하면 오른쪽에 모듈 설정 기능과 관리자 기능설정이 표시됩니다.

- 영역을 선택하면, ‘편집’ 버튼이 표시되고, 편집을 선택하면 오른쪽에 ‘② 스타일 수정’ 이 표시됩니다.


[2] 영역을 선택하면 설정메뉴가 표시되는 영역

1

2

디자인 편집 영역

3. 공통 디자인 설정

1) 공통 디자인 개요

[1] 공통 디자인 설정

- 쇼핑몰 편집화면 영역에 기본적으로 메인화면, 상품상세화면, 장바구니 화면, 마이쇼핑 메인화면, 로그인화면이 탭으로 제공됩니다.

- 디자인 요소는 ‘ 화면, 색상, 글자, 버튼, 테이블’ 총 5개로 나뉘며, 선택 시 해당 디자인 요소를 편집합니다.

- 공통 디자인 설정에서는 쇼핑몰 디자인의 공통되는 화면 레이아웃, 대표 색상, 글자 스타일, 버튼 스타일 등을 설정합니다.

- 또한, 공통으로 설정된 디자인 항목은 화면별 상세꾸미기 시, 설정 항목을 불러와 쉽게 적용할 수 있습니다.


[2] 쇼핑몰 편집 화면

2

1

[1] 화면

- 쇼핑몰 화면의 전체적인 공통 레이아웃을 설정할 수 있습니다.


[2] 설정 화면 미리보기

- 레이아웃, 사이드 바, 화면위치, 화면크기의 변경 사항이 반영된 미리보기가 표시 됩니다.

- [색상영역] : 각 주요색, 보조색 등을 원하는 색상으로 직접 수정

- [원래대로] : 최초 기본으로 제공되었던 색상으로 돌아감


[3] 레이아웃

- 카테고리 형태를 ‘좌측, 상단, 우측’으로 설정 합니다.


[4] 사이드 바

- ‘좌측, 우측’에 위치한 각 사이드 바 메뉴를 노출, 미노출 되도록 설정합니다.


[5] 화면위치

- 화면을 ‘좌측정렬, 중앙정렬, 우측정렬’로 설정 합니다.


[6] 화면 크기

- 화면크기 설정 내 ‘상단 가로크기, 좌측 가로크기’ 설정합니다.  각 슬라이드 바를 움직여 축소 또는 확대시킬 수 있습니다.

- [직접수정] : 체크박스에 체크하면 수치를 직접 입력하여 설정할 수 있습니다.

2) 화면[공통 디자인 설정 > 화면]

1

2

3

4

5

6

[1] 색상

- 쇼핑몰의 전체적인 색상과 배경을 설정할 수 있습니다.


[2] 대표색상

- 대표색상은 기본으로 4가지가 제공됩니다. ‘주요색/보조색/강조색’에 따라 쇼핑몰 화면이 디자인 됩니다.

- [     수정]을 클릭하면 각 적용되는 색상을 변경할 수 있습니다.

- [색상영역] : 각 주요색, 보조색 등을 원하는 색상으로직접 수정

- [원래대로] : 최초 기본으로 제공되었던 색상으로 돌아감


[3] 배경색

- PC쇼핑몰 화면을 ‘전체, 상단, 하단’ 영역으로 구분하여 배경색을 설정할 수 있습니다. (대표색상과색상설정 방식동일)


[4] 배경 이미지

- PC쇼핑몰 화면을 색상이 아닌 이미지로도 꾸밀수 있습니다.

- [     수정]을 클릭하여 ‘이미지 등록창’에서 이미지를 편집하여 등록합니다.

- [     삭제]를 클릭하면 등록한 이미지가 삭제되고, 기본 배경색을 기준으로 배경이 변경됩니다.

3) 색상[공통 디자인 설정 > 색상]

1

2

4

3

[1] 글자

- 쇼핑몰에서 공통적으로 사용되는 글자 스타일을 설정할 수 있습니다.


[2] 글자 스타일

- ‘기본, 제목, 강조, 기타’ 로 구분되어진 글자의 스타일을 설정할 수 있습니다.

- [     수정]을 클릭하여 해당 글자 스타일을 변경 할 수 있습니다.

- [글자] : 글꼴, 폰트크기, 글자색상, 글자 스타일을 원하는 대로 편집할 수 있습니다.

- [     사용위치]를 클릭하면 해당 스타일이 적용된 화면 위치를 점선 표시로 알려줍니다.


※ ‘사용위치’ 클릭 시, 선택 화면에 선택영역(점선표시)이 나타나지 않는 경우가 있습니다.  이것은 선택 화면 내에 해당 스타일에 해당되는글자가 없을 경우입니다.


1) 기본 : 일반, 링크

- 일반 : 타이틀이 아닌 기본 글자스타일.  (예)상단/좌측영역_글자 메뉴, 하단영역_회사정보, 상품상세_상품정보 및 설명 등에 사용

- 링크 : 텍스트 메뉴에 마우스 오버했을 때 보여지는 링크의 글자 스타일 (미리 보기에서 적용 확인 가능)


2) 제목 : 화면 내 ‘ 제목 ’ 글자로 적용될 4가지 기본값이 제공. (예)서브화면의 타이틀, 좌측 메뉴 타이틀, 컨텐츠내 서브 타이틀 등에 사용


3) 강조 : 화면 내 텍스트 ‘강조’가 필요한 곳에 적용되는스타일로 5가지 기본값을 제공. (예)상품관련 금액 글자에 사용 (합계, 총 상품금액, 결제예정금액, 옵션 금액 등)


4) 기타 : 화면 내 ‘ 안내 및 설명 ’ 글자로 적용되는 2가지 기본값 제공. (예)마이쇼핑 메인 화면의 서브 메뉴 리스트의 안내 텍스트 등에 사용

4) 글자[공통 디자인 설정 > 글자]

1

2

[1] 버튼

- 쇼핑몰에서 공통적으로 사용되는 버튼 스타일을 설정할 수 있습니다.


[2] 버튼 스타일

- ‘기본, 강조, 상품, 주문’ 등 으로 구분되어진 버튼 스타일을 설정합니다.

- [     수정]을 클릭하면 해당 버튼의 스타일을 변경 할 수 있습니다.

- [영역/테두리] : 버튼 영역과 테두리의 스타일을 지정합니다.  채우기, 테두리, 두께, 선형태, 모서리 값을 편집할 수 있습니다.

- [글자] : 버튼 내의 글자의 글꼴, 글자크기, 글자색상, 스타일 등을 설정합니다.

- [여백] : 버튼 내 글자 기준으로 위, 아래, 좌측, 우 측의 여백을 설정합니다. 각 입력란에 직접입력 또는 상/하 버튼 클릭하여 수치를입력할 수 있습니다.

- [     사용위치]를 클릭하면 해당 스타일이 적용된 화면 위치를 점선 표시로 알려줍니다.


1) 기본 : 기본 버튼 스타일 (예)장바구니 화면_상품별 주문하기, 관심상품등록, 삭제 등에 사용


2) 상품 : 상품 관련된 버튼 (예)상품 상세화면_ 바로 구매하기, 장바구니 담기, 관심상품등록 등에 사용


3) 주문 : 주문 관련된 버튼 (예)장바구니 화면_ 전체상품주문, 선택상품주문, 쇼핑계속하기 등에 사용


4) 강조 : 강조가 필요한 버튼에 사용. 각 로그인 화면의 로그인 버튼과 주문서 작성화면 결제버튼


5) 게시판 : 게시판 화면 내 제공되는 버튼 (예)게시판 화면_글쓰기, 목록, 답변, 보내기 등


6) 댓글 : 쇼핑몰 내 작성글의 댓글 작성에 관련된 버튼  (예)댓글 관련_수정, 취소, 확인 등

5) 버튼[공통 디자인 설정 > 버튼]

1

2

[1] 테이블

- 쇼핑몰에서 공통적으로 사용되는 테이블, 탭 등의 스타일을 설정할 수 있습니다.


[2] 테이블 스타일

- 기본으로 제공되는 테이블 스타일 중 원하는 스타일로 변경할 수 있습니다.

- [     수정]을 클릭하면 해당 테이블의 스타일을 변경 할 수 있습니다.

- [     사용위치]를 클릭하면 선택된 테이블 스타일이 적용된 화면 위치를 점선 표시로 알려줍니다.


1) 타이틀 영역

- 테이블의 첫 행은 타이틀 영역입니다.  타이틀 영역의 스타일과 폰트를 설정할 수 있습니다.


2) 컨텐츠 영역

타이틀을 제외한 나머지 영역이 컨텐츠 영역입니다. 설정은 타이틀영역과 동일 합니다.


3) 강조 영역

- 타이틀과 컨텐츠 영역 외에 강조되는 테이블 영역에 대해서는 별도로 테두리를 설정할 수 있습니다.


[3] 탭 스타일

- 기본으로 제공되는 탭을 원하는 스타일로 변경할 수 있습니다.

- [     수정]을 클릭하면 탭 스타일을 변경할 수 있습니다.

- [     사용위치]를 클릭하면 선택된 테이블 스타일이 적용된 화면 위치를 점선 표시로 알려줍니다.


1) 선택된 탭 영역, 일반 탭 영역 : 해당되는 탭 영역의 스타일과 폰트를 설정합니다.

6) 테이블[공통 디자인 설정 > 테이블]

1

2

3

4. 화면별 상세 꾸미기

1) 화면별 상세 꾸미기 개요

1

2

3

[1] 쇼핑몰 화면 목록

- 상세 꾸미기를 하고자 하는 쇼핑몰의 화면을 선택 할 수 있습니다.

- 화면은 크게 주요화면, 기타화면, 팝업창으로 구성되어 있으며, 각 화면을 선택하면 상세 화면 목록이 표시됩니다.


1) 주요화면 : 메인 화면, 상품 목록 화면, 상품 상세화면, 장바구니 화면, 주문서 작성화면, 주문완료 화면, 마이쇼핑 메인화면, 로그인 화면


2) 기타화면 : 상품관련화면 (상품검색), 주문관련화면(사은품 안내), 회원관련 화면 (회원가입, 회원정보수정, 이용약관, 개인정보 취급방침), 게시판관련 화면(게시판 목록, 게시판 상세보기, 긴급문의 접수),

마이쇼핑 관련 화면 (주문내역, 주문상세내역, 적립금내역, 쿠폰내역, 예치금내역, 관심상품), 쿠폰관련 화면 (쿠폰존), 쇼핑정보 관련 화면 (이용안내(FAQ),회사소개)


3) 팝업창 : 팝업창 추가 기능 (쇼핑몰 관리자 기능설정)


[2] 현재 수정 화면 위치

- 현재 수정 중인 화면의 경로가 표시됩니다.


[3] 화면 편집 영역

- 상단 영역, 좌측 영역, 컨텐츠 영역, 하단 영역으로 구성 됩니다.

- 꾸미고자 하는 영역을 선택하면 오른쪽에 선택한 영역의 모듈의 상세한 디자인 및 관리자 설정을 할 수 있습니다.

상단영역

좌측영역

하단 영역

컨텐츠 영역

2) 모듈 설정/해제하기

• 상단, 좌측, 컨텐츠, 하단 영역 중 하나의 영역을 선택하면, 해당 영역에 포함되어 있는 모듈이 오른쪽 화면에 표시됩니다.

• On/Off 버튼으로 모듈의 노출을 개별적으로 설정할 수 있습니다. 설정하면 편집창에서 바로 확인하거나, 미리보기를 통해 확인합니다.

3) 모듈 상세 꾸미기

• 선택된 영역 내에서 여러 모듈 중 하나의 모듈을 선택하면 우측영역에 스타일 수정, 쇼핑몰 관리자 기능 설정 기능이 제공되어 각 화면별, 모듈별로 설정을 할 수 있습니다.

• [스타일 수정 ]에서는 선택한 모듈 내 색상, 글자, 버튼 스타일, 여백 조정 등 상세한 디자인 설정을 할 수 있습니다. 

    또한, [ 쇼핑몰 관리자 기능 설정 ]은 선택한 모듈과 관련되는 관리자 기능 항목을 클릭하여, 바로 팝업을 띄어 빠르게 설정 할 수 있습니다.

• 모듈에 따라 스타일 수정, 쇼핑몰관리자 기능설정이 함께 제공되거나, 각각 스타일 수정, 쇼핑몰관리자 기능설정만 제공하기도 합니다.

[1] 모듈 선택

- 디자인 설정할 모듈을 선택하면, 우측영역에 '② 스타일 수정'이 제공됩니다.

- 모듈에 따라 제공되는 스타일 수정의 상세 설정의 차이가 있습니다.


1) 디자인 설정 항목

- 채우기 색상, 테두리 색상 및 두께, 위/아래/좌/우측 여백 설정, 높이/폭 설정, 텍스트 입력, 이미지 등록, 이미지 링크, 메인 분류 설정, 상품개수, 상품이미지 설정, 타이틀 설정, 글자 스타일, 버튼스타일, 테이블 스타일, 탭 스타일, 모듈 디자인 선택

- 공통 디자인 설정에서 글자, 버튼, 테이블, 탭 스타일의 설정된 스타일 항목들을 불어와 쉽게 설정 할 수 있으며, 직접수정을 통해 해당 모듈에만 적용되는 새로운 디자인 설정이 가능합니다.

3-1) 스타일 수정

2

1

3-2) 쇼핑몰 관리자 기능설정

1

2

• '[1] 선택한 모듈'에서 설정 가능한 '[2] 관리자 설정'이 표시됩니다. 우측의 [GO]버튼을 클릭하면, 해당 설정 화면이 표시됩니다.

※ 편집창에서 쇼핑몰 관리자 기능을 설정하면, 쇼핑몰 관리자 화면에서 설정하는 것과 동일하게 반영됩니다. 따라서 운영 중인 쇼핑몰의 경우는 관리자 기능설정 시, 주의하시기 바랍니다.

관리자 기능설정에서 'GO' 버튼 클릭 시 표시되는 관리자 설정 팝업

4) 팝업창

[1] 팝업 목록

- 팝업을 설정하면, 좌측 화면에 설정한 팝업 목록이 표시됩니다.

- 팝업을 선택하면, 팝업 모듈이 표시되고, 모듈을 선택하면 우측에 쇼핑몰관리자 기능 설정이 제공됩니다. 

또한 모듈의 편집버튼을 클릭하면, 쇼핑몰관리자 기능의 팝업설정화면이 표시되어 설정을 변경할 수 있습니다.


[2] 팝업창 추가

- [팝업창 추가] 버튼을 클릭하면, 쇼핑몰관리자 화면을 불러와 팝업 설정을 할 수 있습니다.

'팝업창 추가'  버튼을 클릭하면 표시되는 '쇼핑몰 관리자 기능설정' 레이어 팝업

- 팝업 설정 내에서 진행여부, 스킨선택, 기간설정, 화면위치설정, 디자인선택 등 상세한 설정이 가능 합니다.

1

2

▼ 아래의 탭 버튼을 클릭하시면 관련 내용을 확인할 수 있습니다.

심플디자인 이란?

다양한 모듈

심플디자인 이란?

다양한 모듈