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