온라인 스토어에서 드롭다운 메뉴 설정
드롭다운 메뉴를 사용하여 제품, 컬렉션 또는 페이지를 그룹화하면 고객이 온라인 스토어를 더 쉽게 탐색할 수 있습니다. 예를 들어 제품이 많은 경우, 컬렉션에 제품을 추가한 다음 주 메뉴의 드롭다운 메뉴를 활용하여 컬렉션을 구성할 수 있습니다. 그러면 고객이 원하는 제품 유형을 쉽게 찾을 수 있습니다.
드롭다운 메뉴 또는 기본 메뉴에서 메뉴 항목을 추가, 제거 또는 편집할 수도 있습니다.
Shopify 관리자에서 콘텐츠 > 메뉴로 이동하여 온라인 스토어 메뉴를 확인하고 변경할 수 있습니다.
메뉴 항목을 중첩하여 드롭다운 메뉴 작성
최상위 항목 아래에 중첩되도록 메뉴 항목을 생성하거나 이동하여 드롭다운 메뉴를 작성할 수 있습니다. 최상위 항목은 온라인 스토어의 주요 메뉴에 표시되고 중첩 메뉴 항목은 드롭다운 메뉴에 표시됩니다. 최상위 항목에는 중첩 드롭다운 메뉴를 2개 수준까지 포함할 수 있습니다.
모든 테마에서는 중첩 항목이 주 메뉴의 드롭다운 메뉴로 표시됩니다. 중첩 항목이 다른 위치의 드롭다운 메뉴로 표시되는 테마도 있습니다.
온라인 스토어의 주요 메뉴 및 드롭다운 메뉴 모양과 위치는 테마에 따라 달라집니다. 고객이 드롭다운 메뉴가 있음을 알 수 있도록 주요 메뉴의 드롭다운 메뉴 이름 옆에 아이콘이 표시되는 테마도 있습니다.
주 메뉴에서 드롭다운 메뉴 추가
주 메뉴의 모든 메뉴 항목에서 드롭다운 메뉴를 추가할 수 있습니다.
단계:
데스크톱
Shopify 관리자에서 콘텐츠 > 메뉴로 이동합니다.
주 메뉴의 이름을 클릭합니다.
드롭다운 메뉴의 머리글로 설정할 주 메뉴 항목 중 하나를 선택하거나 새 메뉴 항목을 추가합니다. 머리글을 어떤 항목에도 연결하지 않으려면 머리글 메뉴 항목의 링크 검색 또는 붙여넣기 필드에 #을 입력하면 됩니다.
드롭다운 메뉴에 포함할 메뉴 항목을 추가하려면 다음 작업을 완료합니다.
- 메뉴 항목 추가를 클릭합니다.
- 이름 필드에 메뉴 항목 이름을 입력합니다.
- 링크 검색 또는 붙여넣기 필드에서 메뉴 항목의 목적지를 입력하거나 선택합니다.
추가를 클릭한 다음,
를 클릭하여 메뉴 항목을 끌어서 머리글 메뉴 항목 아래에 겹쳐 넣습니다.메뉴 저장을 클릭합니다.
iPhone
Shopify 앱에서
버튼을 탭하세요.콘텐츠 > 메뉴를 탭합니다.
주요 메뉴의 이름을 탭합니다.
드롭다운 메뉴의 머리글로 설정할 주 메뉴 항목 중 하나를 선택하거나, 머리글로 사용할 새 메뉴 항목을 추가합니다. 머리글을 어떤 항목에도 연결하지 않으려면 머리글 메뉴 항목의 링크 검색 또는 붙여넣기 필드에
#을 입력하면 됩니다.드롭다운 메뉴에 포함할 메뉴 항목을 추가하려면 다음 작업을 완료합니다.
- 메뉴 항목 추가를 탭합니다.
- 이름 필드에 메뉴 항목 이름을 입력합니다.
- 링크 검색 또는 붙여넣기 필드에서 메뉴 항목의 목적지를 입력하거나 선택합니다.
추가를 탭한 다음,
를 탭하여 메뉴 항목을 끌어서 머리글 메뉴 항목 아래에 겹쳐 넣습니다.저장을 탭합니다.
Android
Shopify 앱에서
버튼을 탭합니다.콘텐츠 > 메뉴를 탭합니다.
주요 메뉴의 이름을 탭합니다.
드롭다운 메뉴의 머리글로 설정할 주 메뉴 항목 중 하나를 선택하거나, 머리글로 사용할 새 메뉴 항목을 추가합니다. 머리글을 어떤 항목에도 연결하지 않으려면 머리글 메뉴 항목의 링크 검색 또는 붙여넣기 필드에
#을 입력하면 됩니다.드롭다운 메뉴에 포함할 메뉴 항목을 추가하려면 다음 작업을 완료합니다.
- 메뉴 항목 추가를 탭합니다.
- 이름 필드에 메뉴 항목 이름을 입력합니다.
- 링크 검색 또는 붙여넣기 필드에서 메뉴 항목의 목적지를 입력하거나 선택합니다.
추가를 탭한 다음,
를 탭하여 메뉴 항목을 끌어서 머리글 메뉴 항목 아래에 겹쳐 넣습니다.**✓**를 탭합니다.
바닥글 메뉴 통합
드롭다운 메뉴는 바닥글 메뉴에서도 구현 가능합니다.
단계:
- Shopify 관리자에서 콘텐츠 > 메뉴로 이동합니다.
- 선택 사항: 주 메뉴에 사용되는 것과 동일한 중첩 원칙을 따릅니다. 예를 들어, 머리글 항목 아래의 메뉴 항목을 끌어서 드롭다운 구조를 생성하려면 를 클릭하고 해당 항목을 원하는 위치로 끌어다 놓습니다.
- 페이지로 연결되지 않아야 하는 머리글 항목(예: '지원' 또는 '탐색' 머리글)의 경우 링크 필드에 #을 입력합니다.
테마 호환성 고려 사항
테마에 드롭다운 메뉴를 추가할 때는 다음 사항을 고려하세요.
- 대부분의 테마는 최대 2단계의 중첩 드롭다운 메뉴를 지원합니다. 호환성을 확인하려면 테마 설명서를 살펴보거나 중첩된 항목을 테스트하세요.
- 일부 테마는 모바일 사용성을 개선하기 위해 CSS 조정이 필요할 수 있습니다. 테마 코드에 익숙하지 않다면 테마를 맞춤 설정하지 마세요. 테마 맞춤 설정 에 대해 자세히 알아보세요.
드롭다운 메뉴 모범 사례
모든 장치에서 원활하게 작동하는 유용한 메뉴 구조를 생성하려면 다음 모범 사례를 검토하세요.
# 링크가 있는 최상위 메뉴 항목에는 '카테고리별 구매'와 같은 설명적인 레이블을 사용합니다.
모바일 장치에서 메뉴가 최적화되어 있는지 확인합니다. 모바일 장치에서 메뉴를 테스트하여 드롭다운 메뉴가 예상대로 확장되는지 확인할 수 있습니다.
구성을 복잡하지 않게 하려면 최상위 메뉴 항목을 7개 이하로 설정합니다.
명확하고 설명적인 링크 제목을 사용합니다. '컬렉션', '여름 드레스' 등이 바람직한 예시입니다.
일반적인 문제 해결
탐색 메뉴를 설정할 때 발생할 수 있는 일반적인 문제에 관한 다음 솔루션을 검토하세요.
모바일 메뉴 리디렉션: 최상위 메뉴 링크를 탭하면 새 페이지로 리디렉션되는 경우, Shopify 관리자에서 메뉴를 확인하여 메뉴 링크 필드가 #인지 확인합니다.
가시성 문제: 중첩된 항목이 나타나지 않는 경우, 해당 항목을 머리글 항목 아래로 완전히 끌어다 놓고 메뉴 인터페이스에서 들여쓰기를 했는지 확인합니다. 설정한 중첩 수준 수가 적용한 테마에서 지원되는지도 확인합니다.
테마 코드 맞춤 설정
더욱 심층적인 맞춤 설정이 필요한 테마의 경우 테마 코드 맞춤 설정을 고려해 보세요.