온라인 스토어에서 드롭다운 메뉴 설정

드롭다운 메뉴를 사용하여 제품, 컬렉션 또는 페이지를 그룹화하면 고객이 온라인 스토어를 더 쉽게 탐색할 수 있습니다. 예를 들어 제품이 많은 경우 컬렉션에 제품을 추가한 다음 기본 메뉴의 드롭다운 메뉴를 사용하여 컬렉션을 구성할 수 있습니다. 이렇게 하면 고객이 원하는 유형의 제품을 찾는 데 도움이 됩니다.

드롭다운 메뉴나 기본 메뉴에서 메뉴 항목을 추가, 제거 또는 편집할 수도 있습니다.

Shopify 관리자의 콘텐츠 > 메뉴에서 온라인 스토어 메뉴를 보고 변경할 수 있습니다.

이 페이지의 내용

메뉴 항목을 생성하거나 이동하여 최상위 항목 아래에 중첩되도록 하면 드롭다운 메뉴를 구축할 수 있습니다. 최상위 항목은 온라인 스토어의 기본 메뉴에 표시되고 중첩된 메뉴 항목은 드롭다운 메뉴에 표시됩니다. 최상위 항목은 최대 2단계의 중첩 드롭다운 메뉴를 가질 수 있습니다.

모든 테마는 중첩된 항목을 기본 메뉴의 드롭다운 메뉴로 표시하며, 일부 테마는 다른 위치에서 중첩된 항목을 드롭다운 메뉴로 표시합니다.

테마에 따라 온라인 스토어의 다른 위치에 기본 메뉴와 드롭다운 메뉴가 표시됩니다. 일부 테마에서는 고객이 드롭다운 메뉴가 있음을 인지할 수 있도록 기본 메뉴의 드롭다운 메뉴 이름 옆에 아이콘을 표시합니다.

기본 메뉴의 모든 메뉴 항목에서 드롭다운 메뉴를 추가할 수 있습니다.

단계:

데스크톱

Shopify 관리자에서 콘텐츠 > 메뉴로 이동합니다.
기본 메뉴의 이름을 클릭합니다.
기본 메뉴 항목 중 하나를 선택하여 드롭다운 메뉴의 머리글로 사용하거나 새 메뉴 항목을 추가합니다. 머리글을 아무 곳에도 연결하지 않으려면 머리글 메뉴 항목의 링크 검색 또는 붙여넣기 필드에 #를 입력합니다.
드롭다운 메뉴에 포함할 메뉴 항목을 추가하려면 다음 작업을 완료하십시오.
1. 메뉴 항목 추가를 클릭합니다.
2. 이름 필드에 메뉴 항목의 이름을 입력합니다.
3. 링크 검색 또는 붙여넣기 필드에서 메뉴 항목의 목적지를 입력하거나 선택합니다.
추가를 클릭한 다음 을(를) 클릭하고 끌어서 메뉴 항목을 머리글 메뉴 항목 아래에 중첩합니다.
메뉴 저장을 클릭합니다.

모바일

Shopify app에서 아이콘을 탭합니다.
콘텐츠 메뉴에서 아이콘을 탭한 다음 메뉴를 탭하십시오.
기본 메뉴의 이름을 탭하십시오.
기본 메뉴 항목 중 하나를 드롭다운 메뉴의 머리글로 선택하거나 새 메뉴 항목을 추가하여 머리글로 사용하십시오. 머리글을 아무 곳에도 연결하지 않으려면 머리글 메뉴 항목의 링크 검색 또는 붙여넣기 필드에 #을 입력하십시오.
드롭다운 메뉴에 포함할 메뉴 항목을 추가하려면 다음 작업을 완료하십시오.
1. 메뉴 항목 추가를 탭하십시오.
2. 이름 필드에 메뉴 항목의 이름을 입력합니다.
3. 링크 검색 또는 붙여넣기 필드에서 메뉴 항목의 목적지를 입력하거나 선택합니다.
추가를 탭한 다음 아이콘을 탭한 상태로 메뉴 항목을 끌어 머리글 메뉴 항목 아래에 중첩하십시오.
저장 또는 ✓를 탭하십시오.

드롭다운 메뉴는 바닥글 메뉴에서도 구현할 수 있습니다.

단계:

Shopify 관리자에서 콘텐츠 > 메뉴로 이동합니다.
선택 사항: 아이콘을 클릭하고 항목을 제자리로 끌어다 놓는 방식으로 기본 메뉴에 사용된 것과 동일한 중첩 원칙에 따라 머리글 항목 아래에 메뉴 항목을 배치하여 드롭다운 구조를 생성합니다.
페이지에 연결하면 안 되는 머리글 항목(“지원” 또는 “탐색” 머리글 등)의 경우 링크 필드에 #을 입력하십시오.

테마 호환성 고려 사항

테마에 드롭다운 메뉴를 추가할 때 다음 고려 사항을 검토하십시오.

대부분의 테마는 최대 2단계의 중첩된 드롭다운 메뉴를 지원합니다. 테마 설명서를 확인하거나 중첩된 항목을 테스트하여 호환성을 확인하십시오.
일부 테마에서는 모바일 사용성을 개선하기 위해 CSS 조정이 필요할 수 있습니다. 테마 코드에 익숙하지 않은 경우 테마를 맞춤 설정하지 마십시오. 테마 맞춤 설정에 대해 자세히 알아보십시오.

테마에서 중첩된 드롭다운 메뉴를 지원하는지 확인하기

현재 테마에서 구현하려는 중첩 드롭다운 메뉴의 최대 단계 수를 지원하는지 확인하려면 다음 리소스를 사용할 수 있습니다.

테마 설명서 확인: 테마 설명서를 검토하여 메뉴 기능 및 지원되는 중첩 단계에 대한 특정 정보를 확인하십시오.
중첩된 항목 테스트: 원하는 중첩 단계 수로 테스트 메뉴 구조를 생성하고 데스크톱 및 모바일 장치 모두에서 올바르게 표시되는지 확인하십시오.

대부분의 테마는 최대 2단계의 중첩된 드롭다운 메뉴를 지원합니다. 드롭다운 메뉴에 문제가 발생하는 경우 일부 테마는 여러 중첩 단계를 지원하기 위해 추가적인 맞춤 설정이 필요할 수 있으므로 테마가 구현하려는 중첩 단계 수를 지원하는지 확인하십시오.

드롭다운 메뉴 모범 사례

모든 장치에서 잘 작동하는 유용한 메뉴 구조를 생성하려면 다음 모범 사례를 검토하십시오.

# 링크가 있는 최상위 메뉴 항목에는 “카테고리별 쇼핑”과 같이 설명적인 레이블을 사용하십시오.
메뉴가 모바일 장치에 최적화되었는지 확인하십시오. 모바일 장치에서 메뉴를 테스트하여 드롭다운 메뉴가 예상대로 확장되는지 확인할 수 있습니다.
메뉴가 너무 많아 보이지 않도록 최상위 메뉴 항목은 7개 이하로 추가하십시오.
명확하고 설명적인 링크 제목을 사용하십시오. 예: “컬렉션” 및 “여름 드레스”.
각 메뉴에는 최대 10,000개 항목을, 스토어에는 총 1,000개 메뉴를 포함할 수 있습니다. 드롭다운 메뉴에 하위 항목이 있는 모든 메뉴 항목은 이 제한에 대해 별도의 메뉴로 계산됩니다.

드롭다운 메뉴 접근성

대부분의 테마는 드롭다운 메뉴 머리글을 클릭 가능한 링크가 아닌 버튼으로 구현합니다. 이는 보조과학기술을 사용하는 고객이 탐색 구조를 이해하는 데 도움이 되는 의도적인 접근성 디자인입니다.

최상위 메뉴 항목이 드롭다운 하위 메뉴를 제어하는 경우 새 페이지로 연결되는 링크가 아니라 메뉴를 확장하는 버튼으로 작동합니다. 이 접근 방식을 사용하면 스크린 리더 또는 기타 보조 장치를 사용하는 고객이 스토어의 메뉴 시스템을 올바르게 탐색할 수 있습니다.

고객이 기본 카테고리 페이지(“모든 제품” 또는 “모든 컬렉션” 등)에 액세스하도록 하려면 머리글을 클릭할 수 있도록 만드는 대신 드롭다운 메뉴 자체 내의 첫 번째 항목으로 추가하십시오.

일반적인 문제 해결

탐색 메뉴를 설정할 때 발생할 수 있는 일반적인 문제에 대한 다음 해결 방법을 검토하십시오.

모바일 메뉴 리디렉션: 최상위 메뉴 링크를 탭할 때 새 페이지로 리디렉션되는 경우 Shopify 관리자에서 메뉴를 확인하여 메뉴 링크 필드가 #인지 확인하십시오.
표시 문제: 중첩된 항목이 표시되지 않는 경우 메뉴 인터페이스에서 해당 항목이 머리글 항목 아래로 완전히 끌려와 들여쓰기되었는지 확인하십시오. 테마가 설정한 중첩 단계 수를 지원하는지 확인하십시오.
테마 호환성: 드롭다운 메뉴에 문제가 발생하는 경우 테마가 구현하려는 중첩 단계 수를 지원하는지 확인하십시오. 일부 테마는 여러 중첩 단계를 지원하기 위해 추가적인 맞춤 설정이 필요할 수 있습니다.
중첩 메뉴 생성 차단됨: “메뉴에 중첩 메뉴를 포함할 수 없습니다. 이 기능을 사용하려면 중첩 탐색 기능에 옵트인하십시오” 오류가 발생하는 경우 스토어에서 중첩 탐색 기능을 활성화해야 할 수 있습니다. 이 문제는 일반적으로 2018년 이전에 생성된 스토어에 영향을 미칩니다. 이 오류가 발생하면 Shopify 지원팀에 문의하십시오.
잘못된 메뉴 표시: 동일한 페이지(예: 홈페이지)를 가리키는 탐색 링크가 여러 개 있는 경우 테마에 잘못된 하위 메뉴가 표시될 수 있습니다. 혼동을 피하려면 각 탐색 섹션이 고유한 페이지에 연결되도록 하십시오.
메뉴 항목 사라짐: 메뉴 링크가 삭제되지 않았는데도 사라지는 경우 메뉴 항목이 연결된 제품, 컬렉션 또는 페이지를 삭제했는지 확인하십시오. 연결된 리소스를 삭제하면 메뉴 항목도 제거됩니다.

드롭다운 메뉴의 테마 코드 맞춤 설정

더 심층적인 맞춤 설정이 필요한 테마의 경우 테마 코드를 맞춤 설정하는 것을 고려할 수 있습니다.