# 상품 카테고리를 메뉴로 구성하기
* [상품 카테고리를 메뉴로 구성하기](#id-1)
* [하위 메뉴를 활용해 보기](#id-2)
* [필터 기능을 활용해 보기](#id-3)
* [🤔 상품 카테고리를 메뉴로 구성하기 FAQ](#faq)
## 1. 상품 카테고리를 메뉴로 구성하기
#### **Step1. 상품 등록 및 카테고리 설정해 주세요.**
퀵-가이드를 참고하여 \[상품 등록하기 > 카테고리 등록하기 > 카테고리 설정하기]까지 완료하신 후 \
다음 단계를 진행해 주세요.
🚀[식스샵 퀵-가이드북 보러 가기](https://tip.sixshop.com/start/product)
#### **Step2. 빈 페이지를 만들어 주세요.**
\[디자인 편집 > 좌측 하단 메뉴(≡) > 머리글 메뉴 우측 (+) > 메뉴 설정: 페이지 > BLANK 영역] 선택해 주세요.
#### **Step3. 페이지의 이름을 카테고리 이름과 동일하게 입력해 주세요.**
페이지의 이름은 상점의 메뉴로 노출하고 싶은 상품 카테고리 이름과 동일하게 입력해 주세요.\
상품 카테고리 이름은 [\[식스샵 > 상품 > 카테고리 관리\]](https://www.sixshop.com/dashboard/shop-categorySetting)에서 확인할 수 있어요. \
\
만약 상점의 메뉴로 노출하고 싶은 카테고리가 '비누', '샴푸바', '치약'이라면 \
3개의 페이지를 만드시고 페이지의 이름은 각각 '비누', '샴푸바', '치약'으로 저장해 주세요.
#### **Step4. 빈 페이지에 상품을 노출해 주세요.**
\[디자인 편집 > 좌측 하단 메뉴(≡)]에서 상품을 노출할 페이지를 더블 클릭하여 이동해 주세요.
좌측 하단의 \[섹션 추가하기 > 상품 목록 섹션] 버튼을 클릭하여 상품 목록 섹션을 만들어 주세요.
만들어진 상품 목록 섹션의 표시 영역을 더블 클릭해 주세요.
노출할 카테고리 왼쪽 체크 박스를 선택하면 해당 카테고리와 연결된 상품이 노출됩니다. \
만약 비누 페이지를 편집 중이라면 비누 카테고리만 선택해 주세요.
#### **Step5. 우측 하단의 \[발행하기]를 클릭해 주세요.**
모든 과정을 완료하면 아래와 같이 사이트에 반영됩니다.
## **2. 하위 메뉴를 활용해 보기**
카테고리를 메뉴로 구성하셨다면, 이를 하위 메뉴로도 구성해 보실 수도 있습니다.
#### **Step1. 하위 메뉴를 하나로 묶어줄 폴더 만들기**
{% hint style="info" %}
폴더는 단순히 페이지를 묶어주는 역할만 하므로 상점에서 클릭 시 반응이 없습니다. \
선호에 따라 하위 메뉴를 묶어줄 상위 메뉴를 '폴더'가 아닌 '페이지'로 만드셔도 무방합니다.
{% endhint %}
디자인 편집 에디터에서 아래 이미지의 순서에 따라 하위 메뉴를 묶어줄 '폴더'를 생성합니다. \
\
만약 '비누', '샴푸바', '치약' 페이지를 하위 메뉴로 구성하신다면, \
하위 메뉴를 묶어줄 폴더의 이름은 '세안 용품' 등으로 입력해 주세요.
#### **Step2. 드래그하여 하위 메뉴로 만들기**
상위 메뉴로 이용하실 폴더를 만드셨다면 드래그 방식으로 하위 메뉴를 배치해 주세요.
#### **Step3. 우측 하단의 \[발행하기]를 클릭해 주세요.**
모든 과정을 완료하면 아래와 같이 메뉴에 마우스를 올릴 때 하위 메뉴가 노출됩니다.
\
## **3. 필터 기능을 활용해 보기**
하나의 상품 목록 섹션에 여러 개의 상품 카테고리를 설정하는 경우, \
필터 기능을 일종의 메뉴처럼 활용해 보실 수 있습니다.
{% hint style="info" %}
단, 한 페이지에 상품 목록 섹션의 개수가 2개 이상이면 필터 기능을 이용하실 수 없기에 상품 목록 섹션이 여러 개라면 한 개만 남기고 모두 삭제해 주세요.
{% endhint %}
#### **Step1. 상품 목록 섹션 개별 편집을 클릭해 주세요.**
필터를 적용할 상품 목록 섹션 영역을 클릭하고 노출되는 우측 상단의 연필 모양 아이콘 클릭해 주세요.
#### **Step2. '필터 보이기'를 설정해 주세요.**
\[디자인] 버튼 클릭하시고 필터 보이기를 설정해 주세요.
All(전체) 필터를 노출하고 싶다면 전체 필터 보이기를 설정해 주시고,\
All(전체) 필터를 노출하지 않으시려면 전체 필터 보이기를 해제해 주세요.
#### **Step3. 필터 위치를 조정할 수 있어요.**
\[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 목록 섹션]에서 필터가 노출되는 위치를 선택하실 수 있습니다. \
'위'를 선택하면 상품 목록 섹션 상단에 가로로 노출되며, '왼쪽' 또는 '오른쪽'을 선택하면 상품 목록 섹션 기준 왼쪽 또는 오른쪽에 세로로 노출됩니다.
#### **\[ 모바일에서 필터 종류 설정하기 ]**
모바일 화면에서 필터가 노출되는 방식을 설정할 수 있습니다.
#### Step 1. 우측 하단의 모니터 모양 아이콘을 클릭하고 \[모바일] 버튼을 클릭해 주세요.
모바일 편집 모드로 전환된 화면을 확인하실 수 있습니다.
.png?alt=media\&token=e20d4a11-0699-466c-9d1d-458b7bbed9b9)
#### Step 2. \[좌측 하단 메뉴(≡) > 스타일 편집 > 상품 목록 섹션]으로 이동해 주세요.
.png?alt=media\&token=6c8424f2-5e92-439d-bc2f-856995d4ac10)
#### Step 3. 필터 종류를 선택해 주세요.
* 필터 종류가 '드롭다운'인 경우 전체(All)를 클릭하면 모든 필터를 확인할 수 있습니다.
.png?alt=media\&token=040e3a47-9873-4022-b82a-bd08de78b30b)
* 필터 종류가 '나열'인 경우 모든 필터가 화면에 노출됩니다.
.png?alt=media\&token=ead3db34-2205-493e-9bef-8112f34e6a7e)
* 필터 종류가 '가로 스크롤'인 경우 나열 상태에서 가로로 필터가 노출되며, 스크롤이 가능합니다.
.png?alt=media\&token=a35e3518-7f55-42c3-aa98-406422be84fd)
* 필터 종류가 '줄바꿈'인 경우 모든 필터가 줄바꿈 형식으로 화면에 노출됩니다.
.png?alt=media\&token=6fdba0b9-e692-47f5-9614-a14027cca856)
## 🤔 상품 카테고리를 메뉴로 구성하기 FAQ
### Q. 카테고리 이름을 변경했는데 필터 이름이 변경되지 않아요.
필터 이름은 필터 보이기를 최초 설정 시 [\[식스샵 > 상품 > 카테고리 관리\]](https://www.sixshop.com/dashboard/shop-categorySetting)에 등록된 카테고리 이름을 따라갑니다. 이미 필터 보이기를 설정한 후라면 카테고리 이름을 변경해도 필터 이름이 변경되지 않기 때문에 아래 순서에 따라 수동으로 필터 이름을 변경해 주세요.
**Step1.** 상품 목록 섹션 영역을 클릭하고 노출되는 우측 상단의 연필 모양 아이콘 클릭해 주세요.
.png?alt=media\&token=c90e0121-f855-48b6-812b-fe5e5ca5a2d2)
**Step2.** 카테고리 이름 우측 톱니바퀴 아이콘을 클릭해 주세요.
.png?alt=media\&token=17aba6ca-8762-4187-9703-6d024d73e581)
**Step3.** 필터 이름을 수정해 주세요.
.png?alt=media\&token=3e3c6221-e207-4877-b01f-28909d61d7c0)