shopby Design Storyboard · 반응형 웹이 가능하여 PC와 모바일 디자인 변경이 쉬워집니다. 반응형 웹(responsive web) : 사용자 디스플레이(PC, 모바일)

MANUAL

2

목차

1. 기본 개념 1) 스킨 & 템플릿

2) 에디터 영역(섹션, 단, 요소)

3) 반응형

2. 메뉴 설명 1) 메뉴 & 페이지

2) 섹션

3) 요소 (텍스트, 이미지, 버튼,

동영상, SNS, 지도,

게시판, 상품전시)

4) 이미지 업로드

5) 스킨&템플릿

6) 설정

디자인 변경

----- 3 page

----- 3 page

----- 6 page

----- 13 page

3. 쇼핑몰 메뉴 추가

4. 푸터(하단) 설정

5. 배너 관리 1) 배너 추가(로고, 일반배너, 움직이는 배너)

----- 33 page

----- 34 page

----- 35 page

----- 35 page

----- 14 page

----- 15 page

----- 16 page

----- 17 page

----- 27 page

----- 28 page

----- 31 page

3

① 스킨 : 디자인 수정이 가능합니다.

② 템플릿 : 디자인 수정이 불가능합니다.

※ 스킨과 템플릿은 디자인 변경에서 설정하실 수

있습니다. (28page 참고)

스킨은 디자인을 선택하여 수정 작업할 수 있습니다. 템플릿은 기본적으로 구성된 페이지 형식 입니다.

디자인 변경 > 1. 기본 개념 > 스킨 & 템플릿

1 2 스킨 템플릿

디자인 수정 가능 디자인 수정 불가능

페이지 추가 후 섹션 및 요소 등의 추가로 페이지 생성 가능

1. 이용약관 2. 개인정보처리방침 3. 상품상세 4. 상품후기 5. 상품문의 6. 검색 7. 장바구니 8. 주문페이지 9. 주문완료페이지 10. 로그인 11. 회원가입 12. 게시글 상세 13. 게시글 작성/수정 14. 마이페이지

[자동설정] 1. 메인

[수동설정] 1. 상품리스트(카테고리) 페이지 2. 공지사항 게시판 3. Q&A 게시판

고정 내용으로 기본 페이지 생성이 되어 있음

4

shop by 솔루션을 신청하신 후 ①디자인 변경을 클

릭하면 스킨 선택 페이지가 노출됩니다.(최초 1회)

스킨 재 변경을 원하시면 28page를 참고해주세요.

① 디자인 변경 :

클릭 시 ②스킨 설정 페이지가 새 창으로 출력

됩니다.

② 스킨 설정 :

디자인 작업을 위한 스킨 리스트입니다.

선택된 스킨으로 디자인을 구성할 수 있으며

스킨을 선택할 경우, 최소한의 변경으로 바로

쇼핑몰 사용이 가능합니다.

③ 스킨선택 :

선택 할 스킨에 마우스 오버 시 “스킨선택”

버튼이 노출됩니다.

④ 샘플 사이트 : 해당 스킨으로 제작한 샘플사이트

가 노출됩니다. 상품진열 및 배너 등을 확인 하시

면 됩니다.

⑤ 스킨 노출 :

“스킨 선택” 버튼 클릭 시 선택된 스킨이

쇼핑몰 방문자에게 보여지는 스킨입니다.

- none (이미지가 없는 빈 레이아웃)

- style On

- 24our

- Y.street

- cooking shop

- Atelier

스킨은 디자인을 선택하여 수정 작업할 수 있습니다.


1

3

5

4

2

5

템플릿 변경을 원하시면 28page를 참고해주세요.

① 디자인변경 :

클릭 시 디자인 변경 페이지로 이동됩니다.

② 스킨&템플릿 :

스킨과 템플릿을 변경할 수 있는 메뉴입니다.

클릭 시 스킨 설정과 템플릿 설정 부분이 노출됩니다.

③ 템플릿 변경하기 :

클릭 시 ④템플릿 설정 페이지가 새 창으로 출력

됩니다.

④ 템플릿 설정 :

템플릿 리스트입니다.

선택된 템플릿으로 공통 된 페이지(로그인,

상품상세, 마이페이지, 주문/결제)를 변경하여

바로 쇼핑몰 사용이 가능합니다.

⑤ 템플릿 보기 :

선택 할 스킨에 마우스 오버 시 “템플릿 보기”

버튼이 노출됩니다. 템플릿 디자인을 확인하실

수 있습니다.

⑥ 템플릿 선택 :

센세이션과 플레인 템플릿 중 한가지를 선택하실

수 있으며, 선택한 템플릿이 디자인변경 설정에

저장됩니다. 확인 버튼을 클릭하여 디자인변경으

로 이동한 후 쇼핑몰 적용을 해야 쇼핑몰에

반영됩니다.

템플릿은 기본적으로 구성된 페이지 형식 입니다.


1

2

3

4

5 6

6

배너 이미지

텍스트버튼

해더

배너 이미지 배너 이미지

배너이미지

텍스트

배너 이미지

배너 이미지

텍스트

상품 전시

배너 이미지

배너 이미지

텍스트

배너 이미지

푸터

① 해더 :

쇼핑몰 메뉴, 메뉴 리스트, 로고 이미지 등의

내용이 들어가는 쇼핑몰 상단영역입니다.

② 푸터 :

쇼핑몰 정보, 쇼핑몰 정책 등의 내용이

들어가는 쇼핑몰 하단영역입니다.

③ 메인 :

해더와 푸터를 제외한 섹션의 추가,

편집이 가능한 본문(body)영역입니다.

style On 스킨 : 디자인 영역에서 스킨 선택 시 노출되는 샘플 템플릿 중 하나입니다.

디자인 변경 > 1. 기본 개념 > 에디터 영역

2

1 1

2

3

7

④ 섹션 :

단과 요소를 포함한 영역으로

단 설정 (1단~3단)이 가능합니다.

요소의 추가 또는 편집, 섹션의 배경 색상과

이미지 설정이 가능합니다.

⑤ 단 :

요소를 포함한 영역으로 요소의 추가 또는

편집이 가능한 영역입니다.

섹션 가이드 라인을 기준으로 단을 설정할 수

있습니다.

⑥ 요소 :

섹션과 단에 추가 또는 편집이 가능한

콘텐츠입니다. 각 요소에 따라 다른 종류의

편집 기능을 제공합니다.

요소는 이미지, 텍스트, 동영상, 상품전시,

지도 등을 포함합니다.

섹션, 단, 요소의 개념을 파악하면 디자인 변경 영역의 이해가 쉬워집니다.

디자인 변경 > 1. 기본 개념 > 에디터 영역

섹션

요소

해더

푸터

섹션 가이드 라인

요소

단 가이드 라인

단 단


섹션 가이드 라인

5

4 6

8

섹션 상세 정보

① 섹션 선택 시 섹션 영역 라인이 노출됩니다.

② 섹션 영역 높이(height)조정 기능 표시 에

마우스를 올리면 높이 조정 화살표 가 표시

됩니다. 화살표를 조정하여 섹션의 높이를

변경할 수 있습니다.

섹션의 높이(height)값을 조정해도

섹션 안의 요소의 높이(height)값은

유지됩니다.

③ 우측 편집도구에 현재 섹션 높이(height)

값이 표시됩니다.

④ 섹션 선택 시 우측 하단에 위/아래 버튼 이

노출되어 섹션 위치를 변경할 수 있습니다.

⑤ 섹션 선택 시 “섹션 편집 도구” 와

“섹션 삭제” 기능을 사용할 수 있는 버튼이

출력됩니다.

- 섹션 편집 도구 5-1 : 13.page 참조

- 섹션 삭제 : 선택한 섹션을 삭제할 수

있습니다.


디자인 변경 > 1. 기본 개념 > 에디터 영역 > 섹션

1

편집도구

5-1

3

2

4

5

9


디자인 변경 > 1. 기본 개념 > 에디터 영역 > 단

1단

2단

3단

단 상세 정보

① 단 영역은 별도의 선택이 불가능합니다.

② 단 내에서 요소의 추가, 편집이 가능합니다.

③ 섹션 추가 시 단의 유형(1단~3단)을 설정 할 수

있습니다. 단 가이드 라인도 함께 노출됩니다.

④ 단은 너비(width)값을 기준으로 %로 설정

가능합니다. 기본값은 100% 기준입니다.


단 가이드 라인 단 가이드 라인

1 2

3 4

10


디자인 변경 > 1. 기본 개념 > 에디터 영역 > 요소

요소 상세 정보

① 요소 영역에 너비(width), 높이(height)값

조정 기능이 있습니다.

② 우측 편집도구에 현재 요소의 너비(width),

높이(height)값 및 위치(X,Y)값이

표시됩니다.

③ 섹션, 단에서 자유롭게 위치를 조정할 수

있습니다.

④ 요소를 클릭하면 해당요소의 속성값을 수정

할 수 있는 편집도구가 활성화됩니다.

- 요소 별 편집도구 상세 설명 : 14.page 참조

2

3

4

이미지 요소

텍스트, 버튼 요소

동영상 요소

SNS 요소

지도 요소

게시판 요소

상품전시 요소

1

11




⑤ 정렬 설정 :

요소의 위치를 설정할 수 있으며, 요소 선택 시

메뉴가 활성화됩니다.

* 기본 값은 가운데 중간 입니다.

왼쪽상단, 가운데상단, 오른쪽상단, 왼쪽중간,

가운데중간, 오른쪽중간, 왼쪽하단, 가운데하단,

오른쪽하단으로 선택할 수 있는 위치는 총 9개

입니다.

⑥ 순서 설정 :

단 내에서 요소간의 노출 순서를 설정할 수

있습니다. 요소 선택 시 메뉴가 활성화됩니다.

* 기본값은 요소가 맨 앞으로 위치 되도록

설정되어 있습니다.

6-1 맨 앞으로 가져오기, 앞으로 가져오기, 맨 뒤로

보내기, 뒤로 보내기의 4가지 기능이 있습니다.

⑦ 맞춤 설정 :

요소간의 위치를 맞출 수 있습니다. 요소를

2개 이상 선택할 경우에만 활성화됩니다.

7-1 왼쪽맞춤, 가운데맞춤, 오른쪽맞춤, 위쪽맞춤,

상단, 중간, 하단맞춤의 6가지 기능이 있습니다.

5

6 7

6 7 6-1 7-1

12




⑧ 요소 출력 규칙 :

요소의 height(높이)값이 단(섹션)의

height(높이)값을 초과할 경우는 요소가

초과된 바깥 영역은 출력되지 않습니다.

* 요소는 단의 width(너비)값을 기준으로

%로 설정됩니다.

따라서 요소가 단의 height(높이)값을

초과하는 경우가 발생됩니다.

* 출력을 원할 경우는 섹션 높이를 수정하여

출력할 수 있습니다.

요소의 height(높이)값이

단(섹션) height(높이)값을

초과할 경우,

섹션 밖의 영역은

출력되지 않습니다.

결과화면

8

13

반응형 정보

* Width(너비) 설정 :

단의 width 값을 100% 기준으로 하여

모바일에 출력됩니다.

- 1~3단 모두 width 값 기준으로 처리합니다.

* Height(높이) 설정 :

단의 height값은 PC 페이지의 단과 같은

비율로 처리하여 출력합니다.

* 섹션 배경 :

섹션 배경이 있는 경우에는 배경 사이즈와

상관없이, 단의 Width 값 영역만 모바일에

출력됩니다.

* 노출순서 :

순서는 위에서 아래 좌측에서 우측으로 출력

되도록 처리됩니다.

반응형 웹이 가능하여 PC와 모바일 디자인 변경이 쉬워집니다.

반응형 웹(responsive web) : 사용자 디스플레이(PC, 모바일) 크기에 따라서 화면이 자동으로 최적화되는 웹 페이지입니다.

디자인 변경 > 1. 기본 개념 > 반응형

①

② ③

④ ⑤ ⑥

PC 화면 모바일 화면

①

②

③

④

⑤

⑥

14

① 메뉴 & 페이지 :

메뉴 및 페이지 추가를 할 수 있습니다.

② 섹션 :

단과 요소를 포함한 영역인 섹션을 추가할 수

있습니다.

③ 요소 :

섹션에 들어갈 요소들을 추가 및 관리할 수 있

습니다. 등록된 상품 전시나 동영상 전시, 배너

추가, 버튼 추가 등을 할 수 있습니다.

④ 이미지 업로드 :

배너 및 배경 등에 들어갈 이미지를 등록할 수

있습니다.

⑤ 스킨&템플릿 :

쇼핑몰 디자인 스킨을 설정하고, 로그인 상품

상세 등의 공통된 페이지 템플릿을 설정할 수

있습니다.

⑥ 설정 :

글자 폰트 및 페이지 너비, 배경을 설정할 수

있으며 스킨 변경이 가능합니다.

쇼핑몰 디자인을 수정 할 수 있습니다. 디자인 변경 > 2. 메뉴 설명

1

2

3

4

5

6

15

메뉴 & 페이지를 편집 합니다. 디자인 변경 > 2. 메뉴 설명 > 메뉴 & 페이지

① 설정 버튼 :

페이지명, 페이지 주소(영문)를 수정 할 수 있

습니다.

1-1 메뉴로 등록 또는 페이지로 변경할 수 있

습니다.

② 전환 버튼 :

메뉴를 페이지로 전환해주는 버튼입니다.

2-1 페이지인 경우 메뉴로 전환해주는 버튼

입니다.

③ 삭제 버튼 :

해당 메뉴 또는 페이지를 삭제 할 수 있습니다.

3-1 선택한 페이지를 삭제한 후에는 복구 할

수 없습니다.

1 2 3

1-1 3-1

메뉴 관리

페이지 관리

2-1

16

① 섹션 추가 :

디자인 변경 페이지 내

“메뉴 보이기” 버튼을 클릭하여 출력된 메뉴

리스트에서 “섹션” 항목을 선택합니다.

A. 섹션의 단을 선택할 수 있습니다.

단은 1단, 2단, 3단으로 선택 가능합니다.

B. 섹션의 배경을 선택할 수 있습니다.

배경은 색상과 이미지로 설정할 수 있습니다.

B-1 배경을 색상으로 선택한 후 #ffbb3b

색상으로 설정한 결과화면입니다.

B-2 배경을 이미지로 선택한 후 업로드 한

이미지 중 한 개를 설정한 결과 화면

입니다.

쇼핑몰에 섹션을 추가 합니다.

섹션이란,

“단” 설정과 “요소” 항목을 추가/편집 할 수 있는 영역 입니다.

쇼핑몰에 항목을 추가하기 위해서는 가장 먼저 섹션을 추가해야 합니다.

디자인 변경 > 2. 메뉴 설명 > 섹션

1

B-1

A

B B-1 B-2

B-2 배경 선택 > 색상 배경 선택 > 이미지

17

① 요소 추가 : 디자인 변경 페이지 내 메뉴 버튼을

클릭하여 출력된 메뉴 리스트에서 “요소”항목을

선택합니다.

② 요소 항목 : 텍스트, 이미지, 버튼, 동영상, SNS,

지도, 게시판, 상품 전시 중 선택 할 수 있습니다.

A. 텍스트 : 제목과 내용 텍스트를 선택 할 수

있습니다.

A-1 제목과 내용 : 내용(또는 텍스트)을 선택 후

마우스의 왼쪽 버튼을 누른 채로 원하는 위

치에 마우스를 이동시킨(drag) 다음 마우

스 버튼을 놓는 형식(drop)으로 섹션에 텍

스트 요소를 위치 시킵니다.

A-2 텍스트 요소를 클릭하면 요소의 속성값을

수정할 수 있는 편집 도구가 활성화됩니다.

a. 텍스트 편집 도구 : 텍스트의 크기, 자간,

줄 간격, 색상, 정렬, 맞춤 등을 설정 할

수 있습니다.

b. 배경 색상 편집 도구 : 배경 색상을 설정

할 수 있습니다.

c. 링크 편집 도구 : 텍스트에 연결할 링크를

설정 할 수 있습니다.

d. 삭제 : 해당요소를 삭제 할 수 있습니다.

쇼핑몰에 텍스트 요소를 추가 합니다.

요소란,

“섹션”과 “단” 영역에 추가하여 편집 가능한 콘텐츠입니다.

각 요소 별 다른 종류의 편집 기능이 제공됩니다.

디자인 변경 > 2. 메뉴 설명 > 요소 > 텍스트

A-2

1

A

d

a b c

2

A-1

18

B. 이미지 : 이미지와 슬라이드를 선택할 수

있습니다.

B-1 이미지와 슬라이드 : 슬라이드(또는 이미

지)를 선택 후 마우스의 왼쪽 버튼을 누른

채로 원하는 위치에 마우스를 이동시킨

(drag) 다음 마우스 버튼을 놓는 형식

(drop)으로 섹션에 슬라이드 요소를 위치

시킵니다.

B-2 슬라이드 요소를 클릭하면 요소의 속성값을

수정 할 수 있는 편집도구가 활성화됩니다.

a. 이미지 편집 도구 : 이미지를 업로드 할 수 있

고, 슬라이드 이미지를 선택 할 수 있습니다.

b. 링크 편집 도구 : 이미지에 연결할 링크를 설

정 할 수 있습니다.

c. 삭제 : 해당요소를 삭제할 수 있습니다.

쇼핑몰에 이미지 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 이미지

B

a b

c

B-1

B-2

19

C. 버튼 : 이미지와 슬라이드를 선택할 수

있습니다.

C-1 버튼 : 버튼(테두리선택)을 선택 후 마우스

의 왼쪽 버튼을 누른 채로 원하는 위치에 마

우스를 이동시킨(drag)다음 마우스 버튼

을 놓는 형식(drop)으로 섹션에 버튼 요소

를 위치시킵니다.

C-2 버튼 요소를 클릭하면 요소의 속성값을

수정할 수 있는 편집도구가 활성화됩니다.

a. 텍스트 편집 도구 : 버튼 안의 텍스트 크기,

자간, 줄 간격, 색상, 정렬, 맞춤 등을 설정할

수 있습니다.

b. 배경 색상 편집 도구 : 버튼 안의 배경 색상을

설정 할 수 있습니다.

b-1 배경을 색상으로 선택한 후 # #ff6518

색상으로 설정한 결과화면 입니다.

c. 링크 편집 도구 : 버튼에 연결할 링크를 설정

할 수 있습니다.

d. 삭제 : 해당요소를 삭제할 수 있습니다.

쇼핑몰에 버튼 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 버튼

C

C-1

C-2

d

a b c

b-1

20

D. 동영상 : 동영상을 삽입할 수 있습니다.

D-1 동영상(유튜브): 동영상 선택 후 마우스의

왼쪽 버튼을 누른 채로 원하는 위치에

마우스를 이동시킨(drag) 다음 마우스 버

튼을 놓는 형식(drop)으로 섹션에 동영상

요소를 위치시킵니다.

D-2 동영상 요소를 클릭하면 요소의 속성값을


a. 동영상 편집 도구 : 공유 링크 주소를 입력하

면 유튜브 동영상이 노출 됩니다.

(예시 화면 a-1 참고)

b. 삭제 : 해당요소를 삭제 할 수 있습니다.

쇼핑몰에 동영상 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 동영상

D

D-1

a

b

a-1

D-2

21

E. SNS : SNS(인스타그램)을 삽입할 수

있습니다.

E-1 SNS (인스타그램): SNS 선택 후 마우스

의 왼쪽 버튼을 누른 채로 원하는 위치에

마우스를 이동시킨(drag) 다음 마우스 버

튼을 놓는 형식(drop)으로 섹션에

SNS(인스타그램) 요소를 위치시킵니다.

E-2 SNS(인스타그램) 요소를 클릭하면 요소

의 속성값을 수정할 수 있는 편집도구가

활성화됩니다.

a. SNS(인스타그램) 편집도구 : 버튼을 클릭하

면 인스타그램을 연동 설정 할 수 있는 페이지

로 이동합니다.

* 관리자(admin) > 서비스관리 > 기본설정 >

인스타그램

b. 삭제 : 해당요소를 삭제할 수 있습니다.

쇼핑몰에 SNS(인스타그램) 요소를 추가 합니다.

디자인 변경 > 2. 메뉴 설명 > 요소 > SNS

E

E-1

a

b

E-2

22

ⓐ “인스타그램 연동” 버튼 클릭 후

인스타그램 로그인

ⓑ 어드민(admin) :

서비스관리 > 기본설정 > 인스타그램 >

인스타그램 자동노출

ⓒ 디자인 변경: 원하는 페이지 이동 후 섹션을

추가합니다.

해당 섹션영역에 요소 중 “SNS”를 클릭한 후

“요소 추가” 버튼을 클릭하여 인스타그램

내용을 노출합니다.

ⓓ “내쇼핑몰”에서 인스타그램 노출 여부를

확인합니다.

인스타그램의 게시물을 쇼핑몰에 노출시킬 수 있습니다. 인스타그램 로그인 후 연동 버튼을 클릭하면 쇼핑몰과 연동이 됩니다.

디자인 변경 > 2. 메뉴 설명 > 요소 > SNS > 인스타그램 설정

ⓐ ⓑ

ⓒ ⓓ

23

F. 지도 : 지도(카카오 맵)을 삽입 할 수

있습니다.

F-1 지도(카카오 맵): 지도 선택 후 마우스의

왼쪽 버튼을 누른 채로 원하는 위치에 마우

스를 이동시킨(drag) 다음 마우스 버튼을

놓는 형식(drop)으로 섹션에 지도 요소를

위치시킵니다.

F-2 지도(카카오 맵) 요소를 클릭하면 요소의

속성값을 수정할 수 있는 편집도구가 활성화

됩니다.

a. 지도(카카오맵) 편집 도구 : 버튼을 클릭하면

지도(카카오맵)를 연동 설정 할 수 있는 페이

지로 이동합니다.

* 관리자(admin) > 서비스관리 >

기본설정 > 카카오 맵


쇼핑몰에 지도 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 지도

F

F-1

a

b

F-2

24

ⓐ 카카오 맵 개발자 센터 : https://developers.kakao.com

로그인 후 “앱 만들기”버튼 클릭

ⓑ 앱 만들기 : 이름 항목에 앱 이름 작성 후 “앱 만들기”

버튼 클릭

ⓒ 앱 아이콘 확인 : “앱 아이콘 수정 후 진행” 버튼 클릭 >

전 단계로 이동 > “계속 진행” 버튼 클릭 > 다음 단계 이동

ⓓ JavaScript 키 : 애플리케이션 생성 후 JavaScript 키 복사

ⓔ 플랫폼 추가 : 왼쪽 설정 > 일반 메뉴 클릭

“플랫폼 추가” 버튼 클릭

ⓕ 도메인 설정 : “웹” 선택 후 사이트 도메인에 하단 내용 추가

1) 본인 도메인 주소 :

ex) https://www.abc.co.kr

2) shop by 관리자 도메인 주소 :

https://admin.shopby.co.kr

ⓖ 어드민 : 환경설정 > 기본설정 > 기타정보 > 카카오 맵

ⓓ 단계에서 복사한 JavaScript 키를 어드민의

JavaScript키 영역에 붙여 넣기 합니다.

* 위도와 경도 값 입력

위도/경도 검색 사이트 : http://lalo.esran.com

ⓗ 디자인 변경 :

원하는 페이지 이동 후 섹션을 추가합니다.

해당 섹션영역에 요소 중 “지도” 를 클릭한 후

“요소 추가” 버튼을 클릭하여 설정된 지도를 불러옵니다.

카카오 개발자 센터에서 발급받은 Javascript 키를 입력하고, 노출하고 싶은 주소의 위도 및 경도 값을 입력합니다.

디자인 변경 > 2. 메뉴 설명 > 요소 > 지도 > 카카오 맵 설정

ⓐ ⓑ

ⓒ ⓓ

ⓔ ⓕ

ⓖ ⓗ

https://admin.shopby.co.kr/

https://admin.shopby.co.kr/

http://lalo.esran.com/

http://lalo.esran.com/

25

G. 게시판 : 게시판을 타입에 맞게 선택할 수

있습니다.

G-1 게시판 : 기본형(또는 카드형, 복합형)

선택 후 마우스의 왼쪽 버튼을 누른 채로

원하는 위치에 마우스를 이동시킨(drag)

다음 마우스 버튼을 놓는 형식(drop)으로

섹션에 게시판 요소를 위치시킵니다.

G-2 게시판 요소를 클릭하면 요소의 속성값을


a. 게시판 편집 도구 :

a-1 버튼을 클릭하면 게시판 타입을

선택 할 수 있습니다.

(기본형, 카드형, 복합형)

a-2 관리자(admin)에서 등록한 게시판 중

한 개를 선택할 수 있습니다.

a-3 페이지당 게시글 개수를 선택할 수 있습니

다.(3,5,10,15,20,30,40,50,60개)


쇼핑몰에 게시판 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 게시판

G

G-1

a

b

a-1

a-2

a-3

G-2

26

H. 상품전시 : 상품전시(진열)을 설정할 수

있습니다.

H-1 상품전시 : 2단(또는 1단, 3단, 모자이크

형) 선택 후 마우스의 왼쪽 버튼을 누른 채

로 원하는 위치에 마우스를 이동시킨

(drag) 다음 마우스 버튼을 놓는 형식

(drop)으로 섹션에 상품전시 요소를 위치

시킵니다.

H-2 게시판 요소를 클릭하면 요소의 속성값을


a. 상품전시 편집 도구 :

a-1 전시상품을 카테고리와 그룹별로 선택할

수 있습니다.

a-2 페이지당 상품 개수를 선택할 수

있습니다. (좌측 그림 참조)

a-3 상품 페이지 처리 방법을 페이징과

슬라이드 중 선택할 수 있습니다.

- 슬라이드 : 최대 36개 상품진열 가능

- 모자이크형 : 슬라이드 방식만 가능

a-4 상품정렬을 어드민 설정순, 최신순, 판매순

중 선택할 수 있습니다.


쇼핑몰에 상품전시 요소를 추가 합니다. 디자인 변경 > 2. 메뉴 설명 > 요소 > 상품전시

H

H-2

a b

a-1

a-2

a-3

a-4

상품전시 타입3 (1단)



상품전시 타입4 (모자이크형)

H-1

27

디자인 변경 > 2. 메뉴 설명 > 이미지 업로드

① 이미지 업로드 : 디자인 변경 페이지 내 메뉴

버튼을 클릭하여 출력된 메뉴 리스트에서

“이미지 업로드” 항목을 선택합니다.

A. 추가 버튼을 선택하고 배너 영역에

출력할 이미지를 업로드 합니다.

② 이미지 적용 :

1) 이미지 요소를 선택합니다.

2) 이미지 편집 도구의 이미지(슬라이드)를

선택합니다.

3) 선택한 이미지(업로드된 이미지)가 노출

됩니다.

1

2

이미지를 업로드 합니다.

A

28

디자인 변경 > 2. 메뉴 설명 > 스킨&템플릿

① 스킨&템플릿 :

1-1 스킨 설정 > shop by에서 기본으로 제공

하는 쇼핑몰 스킨을 선택합니다.

“스킨 변경하기” 버튼을 클릭하시면 ⓐ스킨 설정

페이지로 이동합니다.

None, style on, 24our, Y.street, cooking

shop, Atelier 의 6가지 디자인 스킨 중에서

선택하여 디자인을 변경하실 수 있습니다.

선택된 스킨은 shop by의 디자인변경 모드에서

원하는 대로 디자인하여 사용하실 수 있습니다.

1-2 템플릿 설정 > 로그인, 상품상세, 마이

페이지, 주문/결제 페이지 등 공통된 페이지는

템플릿으로 제공됩니다.

원하시는 디자인 템플릿을 선택하시면 공통된

페이지들의 디자인을 변경하실 수 있습니다.

“템플릿 변경하기” 버튼을 클릭하시면 ⓑ템플릿

설정 페이지로 이동합니다.

센세이션, 플레인의 2가지 디자인 템플릿 중

선택하실 수 있습니다.

선택된 디자인 템플릿은 공통된 페이지(로그인,

상품상세, 마이페이지, 주문/결제)에 자동으로

반영됩니다.

디자인 스킨과 템플릿을 설정합니다.

1

1-1 1-2

a b

29


b-1 “템플릿 보기” 를 클릭하시면 센세이션

템플릿 디자인을 확인하실 수 있습니다.

센세이션 템플릿 > 로그인, 상품상세, 마이

페이지, 주문/결제 페이지 등 공통된 페이지가

센세이션 템플릿으로 설정됩니다.


b-1

로그인 마이페이지

주문/결제 상품상세

30


b-2 “템플릿 보기” 를 클릭하시면 플레인

템플릿 디자인을 확인하실 수 있습니다.

플레인 템플릿 > 로그인, 상품상세, 마이

페이지, 주문/결제 페이지 등 공통된 페이지가

플레인 템플릿으로 설정됩니다.


b-2

로그인 마이페이지

주문/결제 상품상세

31

디자인 변경 > 2. 메뉴 설명 > 설정

① 설정 : 디자인 변경 페이지 내 메뉴 버튼을

클릭하여 출력된 메뉴 리스트에서 “설정” 항목

을 선택합니다.

A. 글꼴 : 글꼴을 선택하고 클릭 시 쇼핑몰에 표시

되는 글꼴이 변경됩니다.

B. 페이지 너비 설정 : 페이지 너비를 선택할 수 있

습니다.

B-1 (좁게, 보통, 넓게) 현재 페이지에 적용되며,

모든 페이지에 적용할 수도 있습니다.

- 페이지의 넓이는 조정(좁게, 보통, 넓게)

가능합니다.

- PC 쇼핑몰 화면에 해당되며, 모바일은

적용되지 않습니다.

- 넓이 설정 시 해당 페이지의 모든 섹션에

공통으로 적용됩니다.

C. 페이지 배경 : 페이지의 배경을 선택할 수 있으

며, 배경은 색상과 이미지로 설정할 수 있습니

다. 현재 페이지에 적용되며 모든 페이지에도

적용할 수 있습니다.

쇼핑몰에 표시되는 글꼴과 페이지 너비, 페이지 배경 등을 설정 합니다.

1

A

B

C

B-1

좁게

보통

넓게

32

디자인 변경 > 2. 메뉴 설명 > 설정

① 설정 : 디자인 변경 페이지 내 메뉴 버튼을

클릭하여 출력된 메뉴 리스트에서 “설정” 항목


D. 디자인 변경 테마 : 디자인변경 영역내의 상단

메뉴 테마를 선택할 수 있습니다.

D-1 테마 타입은 총 4가지입니다.

a. 디자인 변경 테마 타입 A

b. 디자인 변경 테마 타입 B

c. 디자인 변경 테마 타입 C

d. 디자인 변경 테마 타입 D

E. 스킨변경 : 다양한 디자인 스킨을 선택할 수

있습니다.

E-1 스킨 변경하기 버튼을 클릭 시 스킨 선택

페이지로 이동합니다.

참고 : 스킨변경 관련 상세내용은 디자인 변경

매뉴얼 3page를 확인해주세요.

디자인변경 영역의 테마 타입 및 쇼핑몰 스킨변경을 설정 합니다.

1

D

E

E-1

D-1

a

b

c

d

하단으로 스크롤 이동

33

① 디자인 변경 : 클릭 시 “디자인 변경” 페이지가

새 창으로 출력됩니다.

② 현재 페이지 : “해더(필수)” 페이지를 선택합니다.

현재 페이지가 “해더(필수)”로 변경된 것을 확인하

고 “메뉴 보이기”를 체크(클릭)합니다.

③ 섹션 추가 : 디자인 변경 페이지 내 “섹션” 버튼을

클릭하여 단과 배경을 선택한 후 “섹션 추가” 버튼

을 클릭합니다.

④ 해더 페이지 확인 및 메뉴등록: 해더 영역에 4-1

메뉴 등록 내용 확인 후 4-2 “메뉴&페이지” 버튼

을 클릭하여 메뉴를 등록합니다.

A. 페이지 추가 버튼을 클릭합니다.

B. 페이지명과 페이지 주소를 작성합니다.

C. “메뉴로 등록” 부분을 체크하면 작성한 페이지가

메뉴로 노출됩니다.

⑤ 검색, MY PAGE, 장바구니 : “해더” 페이지에 자동

으로 생성됩니다.

⑥ 저장하기 : 현재 수정된 디자인을 임시 저장합니다.

저장된 디자인은 쇼핑몰에 적용되지 않습니다.

⑦ 쇼핑몰 적용 : 임시 저장된 디자인을 쇼핑몰에 적용합

니다. 쇼핑몰에 적용된 디자인은 적용 취소가 되지

않으므로 “미리 보기”로 확인 후 적용합니다.

쇼핑몰에 쇼핑몰 메뉴를 추가 합니다. 디자인 변경 > 3. 쇼핑몰 메뉴 추가

2

3

4

4-1

4-2

A

B

C

5

6

검색 | MY PAGE | 장바구니

1

7

34

쇼핑몰 하단(푸터) 디자인을 수정 합니다. 디자인 변경 > 4. 푸터 (하단) 설정

① 디자인 변경 : 클릭 시 “디자인 변경” 페이지가

새 창으로 출력됩니다.

② 현재 페이지 : “푸터(필수)” 페이지를 선택합니다.

현재 페이지가 “푸터(필수)”로 변경된 것을 확인하

고 “메뉴 보이기”를 체크(클릭) 합니다.

③ 섹션 추가 : 디자인 변경 페이지 내 “섹션” 버튼을

클릭하여 단과 배경을 선택한 후 “섹션 추가” 버튼

을 클릭합니다.

④ 쇼핑몰 하단 정보 : “푸터” 영역에 어드민에서 설정

된 “쇼핑몰 정보”가 자동으로 노출됩니다.

선택 후 끌어서(드래그 & 드롭) 원하는 위치로

이동 시킵니다.

4-1 이용약관 | 개인정보처리방침의

링크 메뉴도 자동으로 노출됩니다.

4-2 쇼핑몰 하단 정보 설정 >

어드민(admin) > 서비스 관리 >

기본설정 > 쇼핑몰 기본정보

⑤ 저장하기 : 현재 수정된 디자인을 임시 저장합니다.


⑥ 쇼핑몰 적용 : 임시 저장된 디자인을 쇼핑몰에 적용

합니다. 쇼핑몰에 적용된 디자인은 적용 취소가

되지 않으므로 “미리 보기”로 확인 후 적용합니다.

4 4-1

1

5 6 2

3

4-2

35

쇼핑몰에 배너(로고)를 추가 합니다. 디자인 변경 > 5. 배너 관리 > 배너 추가 > 로고

① 디자인 변경 : 클릭 시 “디자인 변경” 페이지가 새 창으로

출력됩니다.

② 현재 페이지 : 로고가 위치할 “해더(필수)” 항목을

선택합니다.

③ 섹션 추가 : 디자인 변경 페이지 내 메뉴 버튼을 클릭하여

출력된 메뉴 리스트에서 “섹션” 항목을 선택합니다.

섹션의 “단과 배경”을 선택하고 섹션 추가 버튼을 클릭합

니다.

④ 요소 추가 : 디자인 변경 페이지 내 메뉴 버튼을 클릭하여

출력된 메뉴 리스트에서 “요소” 항목을 선택합니다.

“이미지”를 선택하고 끌어서 (드래그 &드롭) 섹션 안의

원하는 위치로 이동 시킵니다.

⑤ 로고 이미지 추가 : 이미지 요소를 클릭합니다. 단, 모바일 로고는 별도로 설정 : 관리자 (admin) > 서비스관리 > 기본설정 > 기타정보 > 모바일 페이지 로고

A. 하단의 이미지 편집 도구 아이콘 클릭

B. 추가 버튼을 선택하고 배너 영역에 출력할 이미지

를 업로드 합니다.

C. 업로드한 이미지를 선택하면 요소를 추가한 영역 C-1 에

이미지가 노출됩니다.



⑦ 쇼핑몰 적용: 임시 저장된 디자인을 쇼핑몰에 적용합니다.

쇼핑몰에 적용된 디자인은 적용 취소가 되지 않으므로

“미리 보기”로 확인 후 적용합니다.

4

5

A

B

C

C-1

1

6 7 2

3

36

쇼핑몰에 배너(일반배너)를 추가 합니다. 디자인 변경 > 5. 배너 관리 > 배너 추가 > 일반배너

A

B

C

C-1

1

2 6 7

3

4

5


출력됩니다.

② 현재 페이지 : 일반배너가 위치할 “메인(필수)” 항목을

선택합니다.




니다.



“이미지”를 선택하고 끌어서 (드래그 &드롭) 섹션 안의


⑤ 일반배너 이미지 추가 : 이미지 요소를 클릭합니다.











37

쇼핑몰에 배너(움직이는 배너)를 추가 합니다. 디자인 변경 > 5. 배너 관리 > 배너 추가 > 움직이는 배너

5

A

B

C-1

C

1

2 6 7

3

4


출력됩니다.

② 현재 페이지 : 움직이는 배너가 위치할 “메인(필수)” 항목





니다.



“슬라이드”를 선택하고 끌어서 (드래그 &드롭) 섹션 안의


⑤ 슬라이드 배너 이미지 추가 : 이미지 요소를 클릭합니다.











Documents

shopby Design Storyboard · 반응형 웹이 가능하여 PC와 모바일 디자인 변경이 쉬워집니다. 반응형 웹(responsive web) : 사용자 디스플레이(PC, 모바일)