상품 진열하기

등록한 상품들을 내 사이트에서 방문자가 보고 구매할 수 있도록 진열합니다.

1단계: 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단 메뉴 관리  ≡ 를 클릭합니다.
3. 상단 메뉴 오른쪽 끝 ⨁ 아이콘을 클릭합니다.
4. 메뉴명을 작성하고 확인을 클릭합니다. 예시) SHOP, STORE 등

2단계: 쇼핑 위젯 추가하기

1. 디자인 모드 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다.
2. 쇼핑 위젯을 클릭합니다.

3단계: 위젯 설정 열기

1. 쇼핑 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나타나면 쇼핑 설정을 클릭합니다.

4단계: 카테고리 연동하기

아래 그림을 참고하여, 상품 카테고리를 연결합니다. 해당 카테고리에 포함된 모든 상품(하위 카테고리 포함)들이 모두 표시됩니다.

5단계: 쇼핑 위젯 디자인하기

남은 쇼핑 설정 항목들을 수정해 쇼핑 위젯에 표시할 요소들을 선택하고, 스타일을 변경합니다.

1. 표시옵션 : 상품 목록에 표시할 표시요소를 켜고 끌 수 있습니다.
2. 진열 : 표시할 상품 카테고리를 선택하고, 정렬, 출력수, 페이지 방식을 설정할 수 있습니다.
   
   • 카테고리 : 표시할 상품의 카테고리를 선택해 주세요. 위 4단계 설명을 참고할 수 있습니다.
   • 정렬 : 상품 정렬순을 등록순, 인기순 등으로 변경할 수 있습니다.
   • 출력수 :  한 번에 출력할 상품 개수를 선택합니다.
   • PC 페이지 방식 : PC 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
   • 모바일 페이지 방식 : 모바일 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
3. 디자인
   
   • 이미지 비율 : 상품 이미지 비율을 선택합니다. *선택한 비율은 상품 상세페이지 이미지에도 그대로 적용됩니다.
   • 1줄 개수 : 1줄에 몇 개의 상품을 표시할지 선택합니다.
   • 상품 간격 : 상품 이미지 간 간격을 조절할 수 있습니다.
   • 텍스트 정렬 : 상품명 및 상품가격과 같은 정보를 왼쪽, 가운데, 오른쪽 정렬시킵니다.
   • 상품명, 판매가, 회원등급가, 요약설명 : 각 옵션 텍스트의 크기 및 색상, 굵게 옵션을 수정합니다.

6단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 연동한 상품 카테고리의 상품들이 표시되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

쇼핑 위젯과 상품 카테고리 연동 후 메뉴의 변화

1. 웹사이트에 표시된 SHOP 메뉴와 상품 카테고리(하위 메뉴)

위 과정을 마치면 다음 그림처럼 SHOP 메뉴 아래 상품 카테고리가 하위 메뉴처럼 표시됩니다.

2. 생성한 상품 카테고리

위 상품 카테고리의 이름, 순서 등은 관리자 페이지의 [쇼핑 > 상품관리]에서 카테고리 관리를 클릭해 변경할 수 있습니다.

상품 카테고리별 다른 디자인 적용하기

시작에 앞서

쇼핑 위젯과 쇼핑 기획전 위젯 2가지를 함께 사용해, 메뉴마다 다른 디자인으로 페이지를 꾸미고 상품을 진열할 수 있습니다. 

다음 사이트에서 샘플을 확인하실 수 있습니다.

본 튜토리얼을 진행하기에 앞서 기본 쇼핑설정을 하지 않으셨다면 다음 도움말을 먼저 읽어주세요.

PART 1. 숨김 쇼핑 메뉴 만들기

쇼핑 위젯이 삽입된 숨김 메뉴를 제작합니다. 

본 숨김 메뉴는 쇼핑몰 자동 구성을 위한 메뉴이며, 실제 페이지에는 표시되지 않습니다.

1단계, 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 빈 메뉴를 추가합니다.

   

4. 메뉴명을 입력하고 확인을 클릭합니다. (예시 메뉴명 : SHOP 숨김)

   

2단계, 메뉴 숨기기

1. 새로 추가한 메뉴에 마우스 오른쪽 버튼을 클릭해 메뉴 설정을 켭니다.

2. 설정 창 하단 옵션 항목에서 메뉴 숨김를 체크합니다.

   
3. 상단 메뉴바에서 상품 메뉴가 숨겨집니다.

3단계, 쇼핑 위젯 추가 및 설정 열기

1. 왼쪽 상단 더하기를 클릭해 쇼핑 위젯을 추가합니다.
2. 추가한 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭해 위젯 설정을 엽니다.

4단계, 위젯 설정하기

쇼핑 위젯에 상품 카테고리를 연동하고 주요 설정 요소들을 수정합니다.

1. 진열 항목에서 상품 카테고리를 선택합니다.
2. 디자인 항목에서 이미지 비율 지정합니다.
   *주의 : 이곳에서 지정한 비율이 상품 상세페이지 이미지에도 적용됩니다.

3. Hover 효과를 지정합니다. *예 : 상품명, 가격 표시

   

5단계, 글로벌 메뉴 확인하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.

2. 글로벌 메뉴에 상품 상세페이지, 장바구니, 마이페이지 메뉴가 생성 되었는지 확인합니다. *쇼핑 위젯 추가 시 자동 생성

   

PART 2. 상품 카테고리 메뉴 디자인

상품 카테고리 수만큼 메뉴를 만들고, 추가한 메뉴에 쇼핑 기획전 위젯 외 기타 위젯들을 사용해 페이지를 디자인하고 상품을 진열하는 방법을 알아봅니다.

1단계, 메뉴 추가하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 켭니다.

2. 상품 카테고리 메뉴로 사용할 메뉴를 추가(4개) 합니다. *상품 카테고리 수에 따라 메뉴 개수는 달라질 수 있습니다.

   

2단계, 메뉴 그룹화 및 메뉴명 수정하기

1. 메뉴를 다음 그림처럼 그룹 메뉴로 구성합니다.

   
2. (필요한 경우) 메뉴명과 메뉴별 주소(URL)를 수정합니다.

3단계, 상위 메뉴 디자인 및 상품 진열하기

SHOP(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.

1. SHOP(상위 메뉴)로 이동합니다.
2. 원하는 구성으로 SHOP 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

4단계, 하위 메뉴 디자인 및 상품 진열하기

1. Beans(하위 메뉴)로 이동합니다.
2. 원하는 구성으로 Beans 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

6. 나머지 Cup, Equipment 메뉴도 위 절차에 따라 제작합니다.

5단계, 사이트 미리보기 및 게시하기

미리보기를 클릭해 작업한 내용을 확인하고 게시하기를 클릭해 방문자가 보고 구매할 수 있도록 적용합니다.

상품 상세페이지에 연관상품은 어떻게 표시하나요?

위멘토에선 판매자께서 지정한 상품이 상품 상세페이지에 노출되도록 하는 기능을 제공하고 있습니다. 예를 들어 티셔츠 상품 페이지에 그와 어울리는 바지나 신발 등을 연관 상품으로 지정하여 매출을 증대시킬 수 있는 수단으로 활용할 수 있습니다.

연관상품 기능은 사이트에 상품이 최소 2개 이상 등록되어 있어야 사용 가능합니다. 상품 등록방법

1단계: 상품관리에 연관상품 등록하기

1. 내 사이트 관리자 페이지에 접속합니다. 
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]로 이동합니다.
3. 연관상품을 지정할 상품을 클릭해 상품 정보 편집 페이지로 진입합니다.
4. 스크롤을 내려 연관상품 항목으로 이동한 후 아래 이미지와 같이 사용을 선택한 다음 상품추가 버튼을 클릭합니다.
   
   
5. 연관상품으로 등록할 상품을 검색하고 검색결과에서 선택합니다.
   

   참고: 다른 연관상품을 계속 이어서 검색하여 추가할 수 있습니다.

   
   
   
   
6. 연관상품 등록을 마쳤다면 닫기를 클릭합니다.
7. 아래와 같이 추가된 연관상품이 추가됩니다. 연관상품으로 등록한 상품들은 기본적으로 상호등록 방식으로 등록되며, 연관상품 표시를 끄려는 경우 사용안함을 선택해 주시면 됩니다.
   
   
8. 저장 버튼을 클릭해 연관상품 등록을 완료합니다.

2단계: 상품 상세페이지에 연관상품 추가하기

1. 관리 메뉴 왼쪽의 디자인 모드를 클릭합니다.
2. 디자인 모드에 진입하면, 왼쪽 상단 메뉴 관리를 클릭합니다.
3. 글로벌 메뉴에 있는 상품 상세페이지를 클릭합니다. 
   만약 상품 상세페이지가 보이지 않는다면 다른 페이지에 쇼핑 위젯을 추가해 보세요.  자세히 알아보기

   
   

   
4. 왼쪽 상단 위젯 추가  버튼을 누릅니다.
5. 쇼핑 기획전 위젯을 선택하고, 마우스 클릭 후 드래그 하여 원하는 위치로 이동시킵니다.
6. 추가된 쇼핑 기획전 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
7. 쇼핑 기획전 설정을 클릭합니다.
8. 표시 방식을 현재 상품에 따라 표시로 선택합니다.
9. 표시 대상항목에서 해당 상품의 연관상품 표시를 선택합니다.
10. (선택 사항) 쇼핑 기획전 모양이나 표시항목 등을 수정해 디자인 합니다.
11. 쇼핑 기획전 설정 창을 바깥 영역을 클릭해 설정을 완료합니다.

3단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭해 확인합니다.
2. 아무 상품의 상품 상세페이지로 이동해 연관상품이 표시되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

장바구니 아이콘 가리기

쇼핑 기능을 사용하지 않는 경우 장바구니 아이콘은 불필요할 수 있습니다. 이 도움말에서는 장바구니(아이콘)를 삭제하는 방법에 대해 설명합니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 상단 영역 오른쪽에 위치한 상단설정을 클릭합니다. 상단설정 열기
3. 로그인/장바구니 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
   
4. 로그인 설정을 클릭합니다.
5. 장바구니아이콘(또는 텍스트)에 마우스 포인터를 올립니다.
   
6. 삭제아이콘을 클릭합니다.
7. 장바구니가 사라집니다.
8. 닫기 아이콘을 클릭해 로그인 설정 창을 닫습니다.
9. 미리보기를 클릭해 삭제여부를 확인하고, 게시하기를 클릭해 적용합니다.

내 사이트를 쇼핑몰로 만들고 싶어요.

위멘토에서는 언제든지 내 사이트를 쇼핑몰로 만들 수 있습니다.

새 사이트를 개설하는 경우

1. 사이트 개설에서 쇼핑 뱃지가 있는 테마를 선택하면 테마 미리보기 화면이 나타납니다.
2. 테마 미리보기 화면 상단의 사이트 개설 버튼을 누릅니다.
3. 사이트 이름과 도메인을 입력하고 개설하기 버튼을 누릅니다.

기존 사이트에 쇼핑 추가하기

기존 사이트를 유지하면서 언제든지 쇼핑기능을 추가하거나 제거할 수 있습니다. 기존 일반 사이트를 쇼핑 사이트로 만들기 위해서는 다음 절차를 따르세요.

1. 쇼핑을 추가할 내 사이트의 디자인 모드에 접속합니다.
2. 쇼핑을 추가할 페이지로 이동하거나 새로운 페이지를 만듭니다.
3. 해당 페이지에서 위젯 추가(+ 버튼)를 누릅니다.
4. 위젯을 선택하는 화면이 나타나면 쇼핑을 선택합니다.
5. 쇼핑 위젯이 추가됩니다.
6. 이 쇼핑 위젯을 특정 카테고리로 지정하고 싶은 경우 마우스 오른쪽 버튼을 눌러 "쇼핑 설정"을 누릅니다.
7. 진열의 카테고리 항목에서 원하는 카테고리를 선택하거나 관리 버튼으로 카테고리를 추가/구성합니다.

디자인 모드란?

디자인 모드에서 웹사이트를 목적에 맞게 꾸미고 내용을 추가할 수 있습니다. 

이 장에서는 디자인 모드 접속방법과 사용자 인터페이스를 알아보실 수 있습니다. 

디자인 모드는 관리자 메뉴를 통해 접속하거나 내사이트에서 빠르게 접속할 수 있습니다.

디자인 모드 작업환경

디자인 모드에는 총 14가지의 메뉴로 구성되어 있으며, 각 메뉴는 아래 그림과 함께 설명을 참조해주세요.

그외 기본 개념들

• 위젯 : 디자인 모드에서 가장 작은 단위입니다. 이미지, 동영상, 게시판, 텍스트 등의 요소를 위젯이라고 부릅니다.
• 섹션 : 위젯을 포함한 영역입니다. 여러개의 섹션을 이용해 배경색이나 간격을 다르게 구성하실 수 있습니다.
• 상단(헤더) : 로고, 메뉴바, 로그인 영역을 포함해 사이트에 공통적으로 위쪽에 표시되는 영역입니다.
• 하단(푸터) : 저작권 정보, 사이트 운영 정보 표시, 약관 및 개인정보처리방침 등을 사이트의 하단에 공통적으로 표시하는 영역입니다.
• 메뉴(페이지) : 위 사항들을 모두 포함한 개념이며, 사이트는 일반적으로 여러개의 메뉴로 구성되어 있습니다.

사이트 미리보기

미리보기 창을 켜서 지금까지 작업한 사항들을 언제든 미리 볼 수 있습니다. 미리보기를 통해 보이는 사이트는 관리자 또는 지정된 운영진 그룹만 볼 수 있습니다.

사이트 미리보기

1. 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
2. 새 탭으로 미리보기 모드가 열리면 페이지를 탐색하고 확인합니다.

실제 방문자들이 변경된 작업사항을 볼 수 있도록 하려면 사이트를 게시해야 합니다.

사이트 게시하기

디자인 모드에서 작업한 사항들을 실제 방문자들이 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.

게시방법

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.
   
2. 게시 확인 창이 나오면 게시하기 버튼을 클릭합니다. (취소 버튼을 클릭해 언제든 게시를 중단할 수 있습니다.)
3. 이제 방문자가 업데이트된 내 사이트를 볼 수 있게 됩니다.

관련 도움말

• 사이트 미리보기
• 마지막 게시 시점으로 되돌리기

원페이지로 사이트를 구성하거나 해제하는 방법

원페이지는 하나의 웹 페이지에 주요한 내용들을 포함하여 구성하는 웹 디자인 방법입니다. 

위멘토에서도 디자인한 여러 메뉴들을 하나의 원페이지로 구성할 수 있습니다.

시작에 앞서

원페이지 사이트로 구성하기에 앞서 메뉴를 생성하고 디자인해야 합니다. 디자인을 모두 마치고 원페이지 구성을 설정하면, 디자인한 1차 상위 메뉴들이 하나의 페이지로 구성됩니다.

2차 이하의 하위 메뉴는 원페이지 구성에 포함되지 않으며, 각각 독립적인 페이지로만 접근할 수 있습니다.

원페이지 구성방법

1. 디자인 모드에 접속합니다. 
2. 디자인 모드 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
3. 마우스 휠 스크롤을 내려 옵션 항목으로 이동합니다.
4. 원페이지 구성을 선택합니다.

   
   

5. 공통 디자인 설정 바깥 영역을 클릭합니다.
6. 저장 버튼을 클릭합니다.
7. 사이트가 원페이지로 재구성됩니다.

원페이지 구성에서 제외하기

1. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
2. 원페이지 구성에서 제외할 메뉴명 오른쪽 끝의 ⓘ을 클릭합니다.
3. 메뉴 설정 창이 켜지면, 옵션 항목에서 원페이지 구성 항목에 제외를 선택합니다.
   

   참고: 제외 옵션은 웹사이트를 원페이지로 구성했을 때만 표시됩니다.

   
4. 디자인 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
5. 원페이지 구성에서 제외한 메뉴는, 해당 메뉴를 클릭해 확인합니다.
6. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

텍스트 위젯 글자에 링크 추가하기

텍스트 일부 또는 전체를 마우스로 선택하고 링크를 추가할 수 있습니다.

링크 방법

1. 디자인 모드에 접속합니다.
2. 텍스트 위젯을 추가합니다.
3. 텍스트 위젯을 마우스로 더블-클릭한 후 텍스트를 입력합니다.
4. 링크를 걸 텍스트를 마우스로 드래그하여 선택합니다.
5. 텍스트 편집도구에서 링크 아이콘  을 클릭합니다.
6. (선택 사항) 돋보기 를 클릭해 기존 메뉴를 연결하거나, 직접 주소(URL)를 입력합니다. 예시) https://formyshop.kr
7. (선택 사항) 새 브라우저 창으로 열리게끔 하려면 새 탭으로 열기를 체크합니다.

8. 오른쪽 하단 업데이트를 클릭해 저장합니다.

    
9. 사이트 미리보기를 클릭해 확인하고 웹에 게시합니다.