상품 카테고리별 다른 디자인 적용하기
시작에 앞서
쇼핑 위젯과 쇼핑 기획전 위젯 2가지를 함께 사용해, 메뉴마다 다른 디자인으로 페이지를 꾸미고 상품을 진열할 수 있습니다. 본 튜토리얼을 진행하기에 앞서 기본 쇼핑설정을 하지 않으셨다면 다음 도움말을 먼저 읽어주세요.
PART 1. 숨김 쇼핑 메뉴 만들기
쇼핑 위젯이 삽입된 숨김 메뉴를 제작합니다. 본 숨김 메뉴는 쇼핑몰 자동 구성을 위한 메뉴이며, 실제 페이지에는 표시되지 않습니다.
1단계: 빈 메뉴 추가하기
- 디자인 모드에 접속합니다. 접속방법
- 왼쪽 상단 메뉴 관리 ≡ 를 클릭합니다.
상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 메뉴를 추가합니다. 메뉴 추가방법
메뉴명을 입력하고 확인을 클릭합니다. (예시 메뉴명 : SHOP 숨김)
2단계: 메뉴 숨기기
- 새 메뉴의 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정 창을 켭니다.
메뉴 설정 창 옵션 항목에서 메뉴 숨김를 선택합니다.
- 상단 메뉴바에서 상품 메뉴가 숨겨집니다.
3단계: 쇼핑 위젯 추가 및 설정 열기
- 왼쪽 상단 위젯 추가 ＋ 를 클릭합니다.
- 쇼핑 위젯을 추가합니다. 위젯 추가방법
- 추가한 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭해 위젯 설정을 엽니다.
4단계: 위젯 설정하기
쇼핑 위젯에 상품 카테고리를 연동하고 주요 설정 요소들을 수정합니다.
- 진열 항목에서 상품 카테고리를 선택합니다.
- 디자인 항목에서 이미지 비율 지정합니다.
주의: 이곳에서 지정한 비율이 상품 상세페이지 이미지에도 적용됩니다. Hover 효과를 지정합니다.
예시: 상품명, 가격 표시
5단계: 글로벌 메뉴 확인하기
- 디자인 모드 왼쪽 상단 메뉴 관리 ≡ 를 클릭합니다.
글로벌 메뉴에 상품 상세페이지, 장바구니, 마이페이지 메뉴가 생성 되었는지 확인합니다. *쇼핑 위젯 추가 시 자동 생성
PART 2. 상품 카테고리 메뉴 디자인
상품 카테고리 수만큼 메뉴를 만들고, 추가한 메뉴에 쇼핑 기획전 위젯 외 기타 위젯들을 사용해 페이지를 디자인하고 상품을 진열하는 방법을 알아봅니다.
1단계: 메뉴 추가하기
- 디자인 모드 왼쪽 상단 메뉴 관리 ≡ 를 켭니다.
상품 카테고리 메뉴로 사용할 4개의 새로운 메뉴를 추가합니다. 메뉴 추가방법
참고: 상품 카테고리 수에 따라 메뉴 개수는 달라질 수 있습니다.
2단계: 메뉴 그룹화 및 메뉴명 수정하기
3단계: 상위 메뉴 디자인 및 상품 진열하기
SHOP(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.
참고: SHOP 메뉴 클릭 시 바로 아래 하위 메뉴(Beans)로 이동하게 하려면 다음 도움말을 참조하세요.
- SHOP(상위 메뉴)로 이동합니다.
- 원하는 구성으로 SHOP 페이지를 디자인합니다.
- 기획전 위젯을 추가합니다.
- 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.
표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.
4단계: 하위 메뉴 디자인 및 상품 진열하기
- Beans(하위 메뉴)로 이동합니다.
- 원하는 구성으로 Beans 페이지를 디자인합니다.
- 기획전 위젯을 추가합니다.
- 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.
표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.
- 나머지 Cup, Equipment 메뉴도 위 절차에 따라 제작합니다.
5단계: 사이트 미리보기 및 게시하기
미리보기를 클릭해 작업한 내용을 확인하고 게시하기를 클릭해 방문자가 보고 구매할 수 있도록 적용합니다.