MANUAL
2
목차
1. 기본 개념1) 디자인 변경
2) 에디터 영역(섹션, 단, 요소)
3) 반응형
4) 편집도구
2. 메뉴 설명1) 메뉴 & 페이지
2) 섹션
3) 요소
4) 이미지 업로드
5) 스킨
6) 설정
디자인 변경
----- 4 page
----- 6 page
----- 11 page
----- 12 page
3. 페이지 편집1) 헤더
2) 페이지 추가
3) 푸터
4) 편집 완료
----- 14 page
----- 15 page
----- 17 page
----- 28 page
----- 29 page
----- 30 page
----- 32 page
----- 36 page
----- 37 page
----- 38 page
3
① 튜토리얼 :상단 메뉴, 좌측 메뉴, 공통 도구,
개별 도구 등으로 구분되어 메뉴별 자세한
정보를 확인할 수 있습니다.
② 동영상 가이드 :동영상을 시청하시면서
디자인 변경 내용을 보다 쉽게 이해할 수
있습니다.
디자인 스킨 설정, 디자인 변경 테마, 용어 설명,
헤더 수정, 메인 수정, 서브 페이지 수정의
내용으로 구성되어 있습니다.
* shop by 다양한 교육 시청 : 오른쪽 상단의
고셀러TV를 클릭하시면 고셀러TV 유튜브 채널로
이동됩니다.
디자인변경 내용의 이해를 돕기 위한튜토리얼 & 동영상 가이드 입니다.
디자인 변경 > 튜토리얼 & 동영상 가이드
1 2
1-1 2-1
https://www.youtube.com/channel/UCt6kS7eTgvpp3bg8O88rSNg
고셀러TV 유튜브채널
4
① 디자인 변경 가능 : 디자인 편집 시 섹션 및 요소
를 추가하여 디자인 수정이 가능합니다.
② 디자인 변경 불가능 : 디자인 편집 시에도 수정이
불가한 페이지입니다.
페이지별 디자인 변경 가능여부를 이해하면디자인 변경이 쉬워집니다.
디자인 변경 > 기본 개념 > 디자인 변경
1 2디자인변경가능 디자인변경불가능
페이지추가후섹션및요소등의추가로페이지생성가능
1. 이용약관2. 개인정보처리방침3. 상품상세4. 상품후기5. 상품문의6. 검색7. 장바구니8. 주문페이지9. 주문완료페이지10. 로그인11. 회원가입12. 게시글상세13. 게시글작성/수정14. 마이페이지
[기본페이지]1. 헤더2. 메인3. 푸터
[추가페이지]1. 운영목적에따라추가가능
(상품리스트, 게시판페이지등)
고정내용으로기본페이지생성이되어있음
5
① 디자인 변경 : 스킨 설정 페이지가 출력됩니다.
(최초 1회)
② 스킨 설정 : 쇼핑몰에 적용할 스킨 위에
마우스를 올리면 샘플 사이트, 스킨선택 버튼이
노출됩니다.
③ 스킨선택 : 선택한 스킨이 쇼핑몰에 적용됩니다.
④ 샘플 사이트 : 선택한 스킨으로 제작한
샘플사이트가 출력됩니다.
⑤ X : 스킨 설정 창이 닫히고, 디자인 변경페이지로
돌아갑니다.
스킨은 쇼핑몰 화면 구성을 의미합니다.원하는 스킨을 선택하여 수정이 가능합니다.
디자인 변경 > 기본 개념 > 디자인 변경
3
4
5
1
2
6
배너 이미지
텍스트버튼
헤더
배너 이미지 배너 이미지
배너이미지
텍스트
배너 이미지
배너 이미지
텍스트
상품 전시
배너 이미지
배너 이미지
텍스트
배너 이미지
푸터
① 헤더 : 쇼핑몰 메뉴, 검색, 마이페이지, 장바구니
등의 내용이 들어가는 쇼핑몰 상단영역입니다.
② 메인 : 헤더와 푸터를 제외한 섹션의 추가,
편집이 가능한 본문(body)영역입니다.
③ 푸터 : 쇼핑몰 정보, 쇼핑몰 정책 등의 내용이
들어가는 쇼핑몰 하단영역입니다.
헤더, 본문, 푸터의 개념을 파악하면디자인 변경 영역의 이해가 쉬워집니다.
디자인 변경 > 기본 개념 > 에디터 영역
3
1
2
1
3
7
① 섹션 : 단과 요소를 포함한 영역으로
단 설정 (1단~3단)이 가능합니다.
요소의 추가 또는 편집, 섹션의 배경 색상과
이미지 설정이 가능합니다.
② 단 : 요소를 포함한 영역으로 요소의 추가 또는
편집이 가능한 영역입니다.
섹션 가이드 라인을 기준으로 단을 설정할 수
있습니다.
③ 요소 : 섹션과 단에 추가 또는 편집이 가능한
콘텐츠입니다. 각 요소에 따라 다른 종류의
편집 기능을 제공합니다.
요소는 텍스트, 이미지, 버튼, 동영상, SNS,
지도, 게시판, 상품전시 등을 포함합니다.
섹션, 단, 요소의 개념을 파악하면디자인 변경 영역의 이해가 쉬워집니다.
디자인 변경 > 기본 개념 > 에디터 영역
섹션가이드 라인 섹션가이드 라인
섹션 요소
헤더
푸터
요소
단 가이드라인
단단
단 가이드라인
2
1
3
8
섹션 상세 정보
① 메인 영역에 마우스를 올리면 마우스가 위치한
섹션 영역의 라인이 노출됩니다.
② 섹션 영역 높이 조정 : 높이 조정 영역에 마우스를
올리면 화살표가 표시되는데, 마우스를 상/하로
드래그하여 섹션의 높이를 변경할 수 있습니다.
* 섹션의 높이를 조정해도 섹션 안 요소의 높이는
유지됩니다.
③ 편집도구에 현재 섹션 높이 값이 표시되며,
키보드를 이용해 높이 수정이 가능합니다.
④ 섹션 영역 라인 우측 하단의 위/아래 버튼으로
섹션 위치를 변경할 수 있습니다.
- ▲ 버튼 : 위로 위치 이동
- ▼ 버튼 : 아래로 위치 이동
⑤ 섹션 영역에 마우스를 올리면 라인 상단 또는
하단에 섹션 설정 도구, 섹션 배경 편집 도구,
섹션 삭제 기능의 버튼이 노출됩니다.
- 5-1 섹션 설정 도구 : 설정 값을 변경합니다.
- 5-2 섹션 배경 편집 도구 : 배경을 설정합니다.
- 섹션 삭제 : 선택한 섹션이 삭제됩니다.
섹션의 위치와 높이를 수정할 수 있습니다.디자인 변경 > 기본 개념 > 에디터 영역 > 섹션
2
1
3
4
5 5-1 5-2
9
섹션 안에서 단 영역을 1단부터 3단까지설정할 수 있습니다.
디자인 변경 > 기본 개념 > 에디터 영역 > 단
2단
3단
단 상세 정보
① 단 영역은 별도의 선택이 불가능합니다.
② 단 내에서 요소의 추가, 편집이 가능합니다.
③ 섹션을 추가할 때 단 영역(1단~3단)을
설정할 수 있습니다.
*단 영역 설정 시 가이드라인이 함께 노출되며,
가이드라인은 수정이 불가합니다.
1
2
1단
2단
3단 3단
3
10
요소의 크기 및 위치를 조정할 수 있습니다.디자인 변경 > 기본 개념 > 에디터 영역 > 요소
요소 상세 정보
① 선택된 요소의 크기를 마우스로 조정합니다.
② 요소의 크기가 단(섹션 영역의 크기보다 큰 경우
단(섹션) 밖 영역의 요소는 보여지지 않습니다.
1
이미지요소
이미지요소
결과화면설정화면
2
11
반응형 노출 순서
순서는 위에서 아래 좌측에서 우측으로 출력됩니다.
반응형 웹으로 쉬운 디자인 변경이가능합니다.
반응형 웹(responsive web) : 사용자 디스플레이(PC, 모바일) 크기에 따라서 화면이 자동으로 최적화되는 웹 페이지입니다.
디자인 변경 > 기본 개념 > 반응형
①
② ③
④ ⑤ ⑥
PC 화면 모바일화면
①
②
③
④
⑤
⑥
12
편집도구로 쇼핑몰을 디자인합니다.디자인 변경 > 기본 개념 > 편집도구
① 복사하기 : 선택된 섹션 또는 요소를 복사합니다.
② 잘라내기 : 선택된 섹션 또는 요소를 잘라냅니다.
③ 붙여넣기 : 복사 또는 잘라낸 섹션이나 요소를
붙여 넣습니다.
④ 삭제 : 선택된 섹션 또는 요소를 삭제합니다.
⑤ 너비 설정 : 선택된 요소의 크기를 조정합니다.
* 단의 너비 값을 기준(100%)으로 요소의 너비를 %로
조정할 수 있습니다.
⑥ 정렬 설정 : 단 내 요소의 위치를 정렬합니다.
⑦ 순서 설정 : 요소의 순서를 설정합니다.
⑧ 맞춤 설정 : 요소를 복수 선택하여 상/하/좌/우
선을 기준으로 요소를 정렬하고, 요소 간의 간격을
동일하게 조정합니다.
⑨ 크기 : 선택된 요소의 크기를 너비(W)와 높이(H)
값이 표시됩니다.
⑩ 위치 : 선택된 요소의 위치(X, Y) 값이 표시됩니다.
1 2
3 4
5 6
7
9
좌측 우측
상단
하단
8
10
13
① 메뉴 & 페이지 : 메뉴 및 페이지를 관리합니다.
② 섹션 : 종류와 단을 선택하여 섹션을 추가합니다.
③ 요소 : 섹션이나 단 영역에 3-1 중 선택된 요소를
추가합니다.
④ 이미지 업로드 : 이미지 요소에서 사용할
이미지를 등록합니다.
⑤ 스킨 : 쇼핑몰 디자인의 스킨, 템플릿을
변경합니다.
⑥ 설정 : 글꼴, 페이지 너비, 배경색상, 배경 이미지,
디자인 변경 테마를 설정합니다.
* 변경 후 하단 저장하기 버튼을 누르지 않을 경우
변경 사항이 적용되지 않습니다.
* 디자인 변경 테마의 경우 디자인을 수정하는
디자인 페이지에 적용되는 테마입니다.
※ 메뉴가 보이지 않을 경우 상단
메뉴 보이기 체크박스 상태를 확인해 주시기
바랍니다.
다양한 메뉴를 이용하여 쇼핑몰 디자인을수정할 수 있습니다.
디자인 변경 > 메뉴 설명
1
2
3
4
6
3-1
5
14
메뉴 & 페이지를 편집 합니다.디자인 변경 > 메뉴 설명 > 메뉴 & 페이지
① 페이지명 : 페이지명을 입력합니다.
(메뉴 등록 시 화면에 페이지명이 노출됩니다.)
② 페이지 주소(영문) : 페이지 주소로 사용할
영문 또는 숫자를 입력합니다.
Ex) 2를 입력 시 test.shopby.co.kr/2로
접속하면 해당 페이지로 이동됩니다.
③ 메뉴로 등록 : 메뉴 사용여부를 설정합니다.
(메뉴로 등록 시 헤더 섹션에 노출됩니다.)
④ 페이지 설정 정보를 수정합니다.
⑤ 아이콘 모양에 따라
메뉴는 페이지로, 페이지는 메뉴로 전환합니다.
* 필수페이지는 메뉴로 사용이 불가합니다.
⑥ 페이지 또는 메뉴를 삭제합니다.
* 필수 페이지는 삭제가 불가합니다.
4 65
2
1
3
15
① 섹션 종류 선택 : 섹션의 종류를 선택합니다.
일반섹션, 라인섹션으로 선택 가능합니다.
② 단 선택 : 섹션의 단 영역을 1단부터 3단까지
선택 가능합니다.
③ 섹션 설정 도구 : 모바일 최적화 여부를
설정합니다.
④ 라인 선택 : 섹션 라인의 종류를 선택합니다.
실선, 점선, 공백으로 선택 가능합니다.
⑤ 라인 색상 선택 : 라인의 색상을 선택합니다.
섹션 종류를 선택하여 섹션을 추가합니다.
섹션이란,“단” 설정과 “요소” 를 포함하고 있는 영역 입니다.
쇼핑몰에 “단”과 “요소”를 추가하기 위해서는 가장 먼저 섹션을 추가해야 합니다.
디자인 변경 > 메뉴 설명 > 섹션
1
2
3
4
5
16
섹션에서 단 영역이 1단인 경우모바일 최적화 적용여부를 선택합니다.
디자인 변경 > 메뉴 설명 > 섹션 > 모바일 최적화
① 섹션 설정 : 섹션에서 단 영역이 1단인 경우
모바일 최적화 적용여부를 선택합니다.
- 1-1 모바일 최적화 여부 : 최적화 적용 여부에
따라 데스크톱, 태블릿, 모바일에서 노출되는
이미지가 다릅니다.
② 모바일 디자인 변경 모드에서는 모바일 화면
내에서만 요소 이동이 가능합니다.
1
모바일화면내에서만요소이동이가능
모바일최적화여부 데스크톱 태블릿 모바일
1-1
2
17
텍스트 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 텍스트
① 텍스트 요소 : 원하는 종류의 텍스트 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 텍스트 편집 도구 : 텍스트 요소의 텍스트
크기, 글꼴, 스타일, 자간, 줄간격, 색상, 정렬,
맞춤을 설정합니다.
③ 배경 색상 도구 : 텍스트 배경 색상을
설정합니다.
④ 링크 편집 도구 : 텍스트에 링크를 설정합니다.
- 쇼핑몰 내 특정 페이지 또는 링크 주소를
직접 입력할 수 있습니다.
* 새 창에서 열기는 새로운 페이지가 출력되고,
현재 창에서 열기는 접속중인 페이지에서 화면이
전화되어 출력됩니다.
⑤ 요소 삭제 : 요소를 삭제합니다.
요소란, “섹션”과 “단” 영역에 추가하여 편집 가능한 콘텐츠입니다.
각 요소 별 다른 종류의 편집 기능이 제공됩니다.
1
2 3 4 5
18
① 이미지 요소 : 원하는 종류의 이미지 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 이미지 편집 도구 : 이미지를 추가한 후에도
슬라이드 사용여부를 변경할 수 있고,
슬라이드 사용 시 이미지를 최대 6장까지
등록 할 수 있습니다.
* 가로 세로 비율 고정 : 이미지 크기를 조정해도
원본 비율은 유지됩니다. (단, 슬라이드 사용 시 첫번
째 슬라이드의 원본 비율에 맞춰집니다)
③ 링크 편집 도구 : 이미지를 눌렀을 때 이동할 페이
지의 링크를 설정합니다.
- 쇼핑몰 내 특정 페이지 또는 링크 주소를 직접
입력할 수 있습니다.
* 새 창에서 열기는 새로운 페이지가 출력되고,
현재창에서 열기는 접속중인 페이지에서 화면이
전환되어 출력됩니다.
④ 요소 삭제 : 요소를 삭제합니다.
* 이미지 요소를 추가한 후 링크를 설정하여
배너 제작이 가능합니다.
이미지 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 이미지
1
2 3 4
19
버튼 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 버튼
① 버튼 요소 : 원하는 종류의 버튼 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 텍스트 편집 도구 : 버튼 요소의 텍스트
크기, 글꼴, 스타일, 자간, 줄간격, 색상, 정렬,
맞춤을 설정합니다.
③ 배경 색상 도구 : 버튼 색상을 설정합니다.
④ 링크 편집 도구 : 버튼을 눌렀을 때 이동할 페이지
의 링크를 설정합니다.
- 쇼핑몰 내 특정 페이지 또는 링크 주소를 직접
입력할 수 있습니다.
* 새 창에서 열기는 새로운 페이지가 출력되고,
현재창에서 열기는 접속중인 페이지에서 화면이
전환되어 출력됩니다.
⑤ 요소 삭제 : 요소를 삭제합니다.
1
2 3 4 5
20
동영상 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 동영상
① 동영상 요소 : 동영상 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 동영상 편집 도구 : 유튜브 동영상
주소(URL)를 입력하고, 자동 재생, 반복 재생
여부를 설정합니다.
* 자동 재생 기능은 IE(인터넷 익스플로러)에서는 지
원되나 크롬, 파이어폭스 등 일부 브라우저 정책에
따라 지원되지 않을 수 있습니다.
③ 요소 삭제 : 요소를 삭제합니다.
1
3
2
21
SNS(인스타그램)요소를 추가하여편집합니다.
디자인 변경 > 메뉴 설명 > 요소 > SNS
1
3
① SNS(인스타그램) 요소 : SNS 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② SNS 편집 도구 : 인스타그램 연동 설정
페이지가 출력됩니다. 인스타그램 계정을
연동하여 계정의 피드를 보여줄 수 있습니다.
③ 요소 삭제 : 요소를 삭제합니다.
2
22
지도 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 지도
1
2 3
① 지도 요소 : 지도 요소를 단 영역 내에
마우스 드래그 앤 드롭으로 가져옵니다.
② 지도 편집 도구 : 카카오맵 연동 설정 페이지가
출력됩니다. 카카오맵을 연동하여 위치를
표시할 수 있습니다.
③ 요소 삭제 : 요소를 삭제합니다.
* 카카오맵 설정 방법은 설정/기타 매뉴얼의
설정 > 외부서비스 설정 매뉴얼을 참고해 주시기
바랍니다.
23
게시판 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 게시판
① 게시판 요소 : 원하는 종류의 게시판 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 게시판 편집 도구 : 게시판 타입을 요소 추가 후에
도 변경 가능하며, 사용할 게시판과
페이지 당 게시글 개수를 설정합니다.
- 게시판 설정 바로가기 버튼을 이용하여
게시판 리스트 관리 페이지로
이동할 수 있습니다.
③ 요소 삭제 : 요소를 삭제합니다.
* 게시판 요소는 다른 요소와 함께 배치할 수
없습니다.
1
32
24
상품전시 요소를 추가하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 상품전시
a
b
c
① 상품전시 요소 : 원하는 종류의 상품전시 요소를
단 영역 내에 마우스 드래그 앤 드롭으로
가져옵니다.
② 상품전시 편집 도구 : 전시 상품, 상품 간격
페이지 당 상품 개수, 상품 테두리, 정렬
상품 페이지 처리 방법, 인디케이터 타입을
설정합니다.
③ 텍스트 편집 도구 : 상품 전시요소에 사용된
텍스트의 크기, 글꼴, 자간, 내용간격, 색상,
정렬을 설정합니다.
④ 요소 삭제 : 요소를 삭제합니다.
* 상품전시 요소는 다른 요소와 함께 배치할 수
없으며, 추가 후 타입 변경이 불가합니다.
1
2 3 4
매거진타입
25
상품전시 요소의 타입별 미리보기 화면입니다.디자인 변경 > 메뉴 설명 > 요소 > 상품전시
1 반응형타입 2 3단 타입
PC mobile PC mobile
① 반응형 타입 : PC는 한 행에 상품 4개,
모바일은 한 행에 2개 상품이 진열됩니다.
② 3단 타입 : PC, 모바일 동일하게 한 행에
3개 상품이 진열됩니다.
③ 2단 타입 : PC, 모바일 동일하게 한 행에
2개 상품이 진열됩니다.
④ 1단 타입 : PC, 모바일 동일하게 한 행에
1개 상품이 진열됩니다.
43 1단 타입2단 타입
26
상품전시 요소의 타입별 미리보기 화면입니다.디자인 변경 > 메뉴 설명 > 요소 > 상품전시
좌우롤링형 타입
① 좌우 롤링형 타입 : PC에서는 슬라이딩 버튼이
노출되어 > 클릭 시 다음 상품이 노출됩니다.
모바일(가로 너비 480px 이하)에서는
스크롤로 처리됩니다.
② 매거진 타입 : PC에서는 상품명, 가격, 썸네일
이미지가 한 세트로 우측에 5개씩 진열됩니다.
모바일에서는 썸네일이 하단에 진열됩니다.
③ 모자이크 타입 : PC와 모바일 동일한 형태로
노출되며 PC에서는 상품 이미지에 마우스를
올리면 상품명과 판매가가 노출됩니다.
1 2
3 모자이크타입
매거진타입
27
① 전시상품선택 : 전시상품을 카테고리 또는
상품그룹 상품으로 설정합니다.
- 설정한 카테고리로 상품을 전시합니다.
- 설정한 상품 그룹으로 상품을 전시합니다.
② 설정 바로가기 : 설정 관리 페이지가 출력됩니다.
- 전시 상품을 카테고리로 선택한 경우
카테고리 설정 페이지가 출력됩니다.
- 전시 상품을 상품 그룹으로 선택한 경우
상품 그룹 설정 페이지가 출력됩니다.
③ 페이지 당 상품 개수 : 페이지당 상품 개수를
설정합니다.
* 타입에 따라 노출할 수 있는 상품개수가 다릅니다.
④ 상품 테두리 설정 : 상품이미지, 상품명, 가격 영역에
테두리를 설정합니다.
* 타입에 따라 테두리를 설정할 수 있는 영역이 다릅니다.
⑤ 상품 간격 설정 : 상품간 여백을 설정합니다.
⑥ 상품 페이지 처리 방법 : 상품 페이지 진열 유형을 설
정합니다.
⑦ 인디케이터 타입 설정 : 좌우롤링형 타입과 모자이크
타입은 상품페이지 처리 방법이 슬라이드인
경우에 한해서 타입을 설정합니다.
⑧ 정렬 선택 : 상풍 진열 순서를 설정합니다.
상품전시 편집 도구를 사용하여 편집합니다.디자인 변경 > 메뉴 설명 > 요소 > 상품전시
1
2
3
4
5
6
7
8
28
디자인 변경 > 메뉴 설명 > 이미지 업로드
① + : 이미지 저장소에 이미지를 업로드합니다.
② 이미지 보기 : 2-1 이미지 미리보기를 통해
파일명과 이미지 크기를 확인합니다.
③ 다중 선택 : 여러 이미지를 한 번에 선택합니다.
* 이미지 요소를 편집할 때 업로드 된 이미지에
한해서 등록이 가능하며, 이미지 편집 도구에서도
업로드가 가능합니다.
④ 삭제 : 이미지 저장소에 업로드 된 이미지를
삭제합니다.
1
이미지를 업로드 합니다.
3
2
2-1
4
29
디자인 변경 > 메뉴 설명 > 스킨 쇼핑몰 스킨을 설정합니다
1
1-1
① 스킨 변경하기 : 1-1 과 같이 샵바이에서
기본으로 제공하는 쇼핑몰 스킨 선택 화면이
출력됩니다.
* 적용된 스킨은 shop by 디자인 변경 모드에서
원하는 대로 디자인하여 사용하실 수 있습니다.
30
디자인 변경 > 메뉴 설명 > 설정쇼핑몰의 글꼴, 페이지 너비, 페이지 배경을설정합니다.
① 글꼴 : 쇼핑몰에 표시되는 글꼴을 설정합니다.
② 페이지 너비 설정 : 페이지 너비를설정합니다. (PC 환경에만 적용됩니다.)
③ 페이지 배경 : 페이지 배경을 색상이나이미지로 설정합니다.현재 수정 중인 페이지에 적용되며 모든페이지에 일괄 적용 가능합니다.
④ 디자인 변경 상단바 설정 : 디자인 변경 페이지상단에 있는 디자인 테마를 4-1 이미지와같이 변경합니다.
⑤ 저장하기 : 상단 설정 내용을 변경한 후저장하기 버튼을 누르지 않으면 변경된설정이 적용되지 않습니다.
타입A
타입B
타입C
타입D
4-1
1
2
3
4
5
31
PC 와 모바일 페이지 화면을 확인하면서디자인을 편집합니다.
디자인 변경 > 페이지 편집
① PC 디자인 변경 : 1-1 과 같이 PC화면이
노출됩니다.
② 모바일 디자인 변경 : 2-1 과 같이 모바일 화면이
노출됩니다.1-1
2-1
1 2
32
PC 헤더(헤더섹션)를 편집합니다.디자인 변경 > 페이지 편집 > 헤더 (PC)
① 메뉴 : 메뉴로 지정한 페이지 목록이 표시됩니다.
- 1-1 메뉴 설정 도구 : 메뉴 타입과 메뉴 색상을
설정합니다.
② 기능 버튼 : 검색, 마이페이지, 장바구니 기능의
버튼입니다.
- 2-1 기능 버튼 설정 도구 : 기능 버튼 타입과
버튼 색상을 설정합니다.
1-1
2-1
1 2
33
① 섹션 설정 도구 : 섹션 안 단 영역을 설정합니다.
- 1-1 헤더 겹치기 설정 시 헤더섹션 아래의
섹션이 헤더섹션과 겹쳐져 보여집니다.
* PC 헤더섹션은 섹션을 여러 개 추가할 수 있지만
헤더 겹치기 설정 시에는 섹션 추가가 불가합니다.
② 섹션 배경 설정 : 섹션의 배경 색상이나
배경 이미지를 설정합니다.
③ 섹션 삭제 : 섹션을 삭제합니다.
PC 헤더(헤더섹션)를 편집합니다.디자인 변경 > 페이지 편집 > 헤더 (PC)
1
1 2 3
1-1
34
모바일 헤더(헤더섹션)를 편집합니다.디자인 변경 > 페이지 편집 > 헤더 (모바일)
① 메뉴 설정 도구 : 메뉴 아이콘의 색상 설정이
가능합니다.
② 검색 설정 도구 : 모바일에서 검색 기능의
사용여부 및 아이콘 색상 설정이 가능합니다.
③ 로고 이미지 : 이미지 편집과 링크 편집이
가능합니다.
- 이미지 편집 도구 : 로고 이미지 교체가
가능합니다.
* 가로 세로 비율을 고정하면 헤더섹션 높이에 맞춰
원본 이미지 전체가 삽입됩니다.
- 링크 편집 도구 : 3-1 과 같이 로고에 링크를
삽입할 수 있습니다. 쇼핑몰 내 특정 페이지
또는 링크 주소를 직접 입력할 수 있습니다.
* 새 창에서 열기는 새로운 페이지가 출력되고,
현재 창에서 열기는 접속중인 페이지에서 화면이
전환되어 출력됩니다.
④ 장바구니 설정 도구 : 장바구니 아이콘의 색상
설정이 가능합니다.
헤더섹션이란? 쇼핑몰 웹사이트 모든 페이지 최상단에 출력되는 섹션입니다.
3-1
1 2 3 4
35
모바일 헤더(헤더섹션)를 편집합니다.디자인 변경 > 페이지 편집 > 헤더 (모바일)
① 섹션 설정 도구 : 모바일 헤더섹션은
일반섹션으로 고정되어 있습니다.
* 헤더 겹치기를 설정하면 헤더섹션 아래의 섹션이
헤더섹션과 겹쳐져 보여집니다.
② 섹션 배경 설정 : 섹션의 배경 색상이나
배경 이미지를 설정합니다.
* 모바일헤더섹션은삭제가불가합니다.
1 2
36
메뉴(페이지)를 추가합니다.디자인 변경 > 페이지 편집 > 메뉴 추가
① 메뉴 관리 : 메뉴 관리에서 페이지를 추가하여
메뉴로 등록합니다.
② 현재 페이지 : 페이지 목록에 메뉴 관리에
등록된 페이지가 모두 노출되며, 각 페이지를
선택하여 수정할 수 있습니다.
③ 헤더섹션 : 메뉴 관리에 등록된 페이지가
헤더섹션 메뉴에 노출됩니다.
1
2
3
37
하단(푸터) 디자인을 수정 합니다.디자인 변경 > 페이지 편집 > 푸터
2
푸터섹션이란? 쇼핑몰 웹사이트 모든 페이지의 하단에 출력되는 세션입니다.
① 현재 페이지 : 푸터(필수)페이지를
편집합니다.
② 섹션 추가 : 푸터섹션에 섹션을 추가합니다.
(일반섹션을 추가하면 2-1 과 같이 이용약관,
쇼핑몰 정보, 개인정보처리방침이 자동으로 입력
됩니다.)
* 2-1 에 입력된 정보는 관리자 페이지의
기본설정에 입력된 정보입니다.
2-1
38
미리보기를 통해 PC 와 모바일에적용된 모습을 확인할 수 있습니다.
디자인 변경 > 페이지 편집 > 편집 완료
① 저장하기 : 변경한 디자인 내용을 저장합니다.
② 쇼핑몰 적용 : 변경한 디자인 내용을 쇼핑몰에
적용합니다.
* 스킨을 제외한 모든 편집 내용은 쇼핑몰 적용
버튼을 누르지 않으면 적용되지 않습니다.
③ 미리보기 : PC 와 모바일화면의 미리보기가
가능합니다.
- 3-1 PC 화면의 페이지입니다.
- 3-2 모바일 화면의 페이지입니다.
3-1 3-2
1 2 3