위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

위멘토 사용 가이드

가이드 34

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




시작에 앞서

쇼핑 위젯쇼핑 기획전 위젯 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(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.

참고 : SHOP 메뉴 클릭 시 바로 아래 하위 메뉴(Beans)로 이동하게 하려면 다음 도움말을 참조하세요.
  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

위젯 추가새로운 위젯을 추가하는 위젯 추가 버튼입니다.

3

섹션 추가현재 페이지에 새로운 섹션을 추가합니다.

4

마지막 게시 시점으로 되돌리기도움말 및 고객지원 페이지로 이동합니다.

5

현재 언어 및 메뉴 경로현재 편집 중인 사이트의 언어 및 메뉴의 경로를 표시합니다.

6

현재 메뉴명현재 편집 중인 페이지의 이름을 표시합니다.

7

메뉴 속성메뉴의 이름을 변경, 검색엔진 최적화용 설명 추가, 접근 권한 설정, 메뉴를 삭제합니다.

8

뷰포트 변경모바일 편집 모드와 데스크톱 편집 모드를 전환합니다.

9

공통 디자인 설정기본 서체 및 크기, 본문폭 등 사이트에 공통적으로 적용할 디자인을 설정합니다.

10

미리보기새 브라우저 탭을 열어 현재 페이지가 실제 브라우저에서 어떻게 보이는지 확인합니다.

11

게시하기게시하기를 누르면 작업한 사항들이 방문자들에게 볼 수 있도록 반영됩니다.
12나가기디자인 모드를 종료하고 대시보드로 이동합니다.
13겹치기상단 메뉴와 본문 배경을 겹치는 효과를 줄 수 있습니다.
14상단설정상단 디자인을 편집할 수 있습니다.
15가이드 다시보기처음 사용자에 한하여 나타나는 초보자 가이드를 다시 보실 수 있습니다.


그외 기본 개념들

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



사이트 미리보기



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

참고: 코드 위젯, 롤오버, 모달 등 일부 기능은 디자인 모드에서 동작하지 않으며, 미리보기 모드를 통해서만 확인할 수 있습니다.



사이트 미리보기

  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. 사이트 미리보기를 클릭해 확인하고 웹에 게시합니다.



게시판 위젯



위젯 소개

게시판 위젯을 사용해 손쉽게 게시판을 구현할 수 있습니다. 

흔히 자유게시판으로 사용되는 일반게시판부터 이미지와 제목, 설명이 함께 표시되는 게시판까지 다양하게 준비되어 있습니다.

참고 : 게시물을 추가하려면, 미리보기를 클릭해 사이트에서 직접 글쓰기 버튼을 클릭해 입력해야 합니다.



위젯 설정

위젯 설정에서 게시판을 설정하고 디자인 스타일을 지정합니다.

  1. 게시판 위젯을 추가합니다.
  2. 게시판 위젯 설정을 엽니다.


게시판 설정항목

연동 게시판 및 새로운 게시판 이름 입력, 사용권한, 양식 등을 설정할 수 있습니다.


게시판 연동
게시판 위젯을 실수로 삭제하더라도 게시판 데이터베이스(DB)는 그대로 남아 있습니다. 또한 A라는 메뉴에서 사용한 게시판을 B라는 메뉴에서도 사용할 수 있습니다. 게시판 연동은 이러한 기능들을 위한 것이며, 선택한 게시판 데이터베이스를 불러옵니다.
상품평/기타 게시판
상품평, 리뷰 게시판을 만들 때 사용할 수 있습니다.
연동게시판 선택
새로운 게시판이 아닌 기존 게시판의 게시물을 불러오려는 경우 선택합니다.
게시판 이름
게시판 이름을 설정할 수 있습니다. 처음 게시판 생성 시 자동으로 '이름 없는 게시판#' 이름이 지정되므로 알아보기 쉬운 게시판 이름으로 수정하실 것을 권장합니다. 게시판 이름을 설정해주시면 차후 다른 페이지에 같은 게시판을 연동할 때 구분이 쉬워집니다. (예: 자유게시판, 공지사항 등)
카테고리
게시물별로 카테고리를 적용할 수 있게 되며, 최대 25개의 카테고리를 만들 수 있습니다.
비밀글
 비밀글 허용 여부를 선택합니다. 비밀글 작성시 회원도 비밀번호 입력이 활성화 되면 비밀번호를 아는 다른 사용자들도 해당 게시물을 조회할 수 있습니다. 설정에 관계 없이 사이트 관리자는 비밀글 조회가 가능합니다.
댓글 사용
댓글 기능을 사용할지 여부를 선택합니다.
권한
목록, 읽기, 작성, 댓글별로 권한을 지정할 수 있습니다. 특정 그룹에게만 권한을 주려면 선택그룹 사용자를 사용하세요.
제목 양식
글쓰기 버튼을 눌렀을 때 자동으로 제목 입력란에 미리 작성될 문구를 입력합니다.
글양식
글쓰기 버튼을 눌렀을 때 자동으로 본문에 미리 입력될 내용을 입력합니다.
게시물 본문 상단/하단 코드
게시물 본문 상단 또는 하단에 삽입할 코드를 입력할 수 있습니다. 때때로 구글 애드센스와 같은 광고 스크립트를 추가해 게시물마다 광고를 표시할 수 있습니다.


게시판 디자인

게시판 스타일을 지정하고 구성요소, 리스트, 표시항목, 텍스트 크기 옵션을 변경할 수 있습니다.

  1. 구성 요소 : 게시판 구성 요소를 끄거나 켤 수 있습니다.
  2. 리스트 항목 : 게시판 리스트에 표시되는 항목들을 끄거나 켤 수 있습니다.
  3. 리스트 : 게시판 리스트 줄 수, 간격을 조절할 수 있습니다.
  4. 텍스트 : 게시판 제목 및 글쓴이, 조회수, 작성일 등의 텍스트 크기를 지정할 수 있습니다.
  5. 본문 스타일 :본문이 표시되는 형태를 선택합니다.
    • 단독형 : 제목 이미지를 사용할 수 있으며 게시판 주변에 배치한 위젯이 본문에서 표시되지 않습니다.
    • 일반형 : 주변 위젯이 그대로 표시됩니다.


게시판 스타일

다른 스타일 버튼을 클릭해 게시판 스타일을 선택할 수 있습니다.




INFORMATION


상호명 : (주)위멘토


사업자등록번호 : 506-87-00931

통신판매업번호 : 제2022-서울강서-1096호 

고객센터 : 1800-2142 ∣ 이메일 : sales@wemento.kr

대표자 : 김성진 ∣ 개인정보책임자 :김성진

주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

호스팅주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi