사용자 지정 메뉴 위치 추가

사용 가이드 모든 요금제 1 분 소요

메뉴를 넣고 싶은 곳에 테마의 메뉴 요소가 없거나, 헤더가 너무 많이 사용자 지정되어 다른 위치 옵션이 맞지 않을 때 사용하세요. 테마 코드에 빈 컨테이너를 추가한 다음 이 CSS 선택자에 메뉴 표시가 그 컨테이너를 가리키게 합니다.

주의

코드를 편집하기 전에 테마를 복제하세요(온라인 스토어 > 테마 > … > 복제). 코드가 익숙하지 않으신가요? 문의하기를 통해 연락 주시면 무료로 메뉴를 설치해 드립니다.

컨테이너를 추가하고 앱에 연결하기

1. 테마 코드 열기

   온라인 스토어 > 테마로 이동해 테마의 … 를 클릭하고 코드 편집을 선택합니다.

2. 메뉴 컨테이너 추가하기

   각 메뉴가 표시될 위치에 빈 컨테이너를 붙여 넣고 저장을 클릭합니다. ID는 무엇이든 됩니다. 다음은 예시입니다:

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • 데스크톱: 보통 탐색 메뉴가 있어야 할 헤더 섹션 파일(예: sections/header.liquid)에 넣습니다.
   • 모바일: 보통 테마의 메뉴 서랍 파일이나 layout/theme.liquid에 넣습니다.

3. 앱에 컨테이너 입력하기

   메뉴 편집기에서 설정 탭을 열고 위치에서 이 CSS 선택자에 메뉴 표시를 선택합니다. 메인 메뉴의 CSS 선택자에 #GloboDesktopMenu를, 모바일 메뉴의 CSS 선택자에 #GloboMobileMenu를 입력합니다.

   

   두 CSS 선택자 필드에 컨테이너 ID를 입력합니다

4. 저장, 게시, 확인하기

   저장을 클릭한 다음 메뉴를 게시합니다. 데스크톱과 모바일에서 스토어를 확인하세요.

알아 두면 좋은 점

• 한 레이아웃만: 컨테이너를 하나만 추가하고 다른 필드는 비워 둡니다.
• 기존 내용은 교체됩니다: 앱이 각 컨테이너를 채우면서 안에 있던 내용을 교체합니다.
• 테마의 메뉴는 그대로 남습니다: 두 메뉴가 모두 보이지 않게 하려면 코드나 테마 설정에서 테마 메뉴를 숨기거나 제거하세요.
• 테마별 적용: 코드 편집은 편집한 테마에만 적용됩니다. 테마를 전환하거나 업데이트하면 컨테이너를 다시 추가하세요.

문제 해결

모바일 메뉴가 표시되지 않아요

테마가 JavaScript로 메뉴 서랍을 나중에 만드는 경우일 수 있습니다. 모바일 컨테이너를 layout/theme.liquid처럼 항상 페이지에 있는 코드로 옮기세요.

아무것도 표시되지 않아요

이 테마에서 앱 임베드가 켜져 있는지 확인하세요. 브라우저 콘솔에서 document.querySelector('#GloboDesktopMenu')가 컨테이너를 찾는지 확인하세요.

관련 페이지

• CSS 선택자에 메뉴 표시CSS 선택자를 입력해 테마의 정확한 요소에 메뉴를 배치합니다.
• 메뉴 게시메뉴를 테마에 게시하고 스토어에서 메뉴가 표시될 위치를 선택합니다.
• 사용자 지정 CSS직접 CSS를 추가해 메뉴의 모양을 세밀하게 조정합니다.

도움이 되었나요?

문제 신고