메뉴 설정

메뉴 전체에 적용되는 레이아웃, 요소, 애니메이션, 간격 등의 설정을 변경합니다.

참고 자료 모든 요금제 4 분 소요

설정 탭은 메뉴가 표시되는 위치와 메뉴의 모든 항목이 어떻게 보이고 작동하는지를 제어합니다. 항목 하나만 스타일을 지정하려면 그 항목의 설정을 사용하세요. 메뉴 항목 편집을 참고하세요.

설정 열기

설정 탭 열기

메뉴 관리자에서 메뉴를 연 다음 편집기 왼쪽 사이드바의 톱니바퀴 아이콘을 클릭합니다. 편집하는 대로 미리 보기가 업데이트됩니다.

톱니바퀴 아이콘을 누르면 메뉴 설정이 열립니다.
저장 및 게시하기

저장을 클릭한 다음 게시를 클릭합니다.

아래 기본값은 새 메뉴가 보통 시작하는 값이며, 일부는 테마에 따라 다릅니다.

설정

위치

자동으로 교체: 앱이 테마의 메인 메뉴를 찾아 교체합니다.
기존 메뉴 교체: 메인 메뉴 선택과 모바일 메뉴 선택에서 교체할 테마 메뉴를 고릅니다.
이 CSS 선택자에 메뉴 표시: 메인 메뉴의 CSS 선택자와 모바일 메뉴의 CSS 선택자에 영역의 선택자를 입력합니다. 위 옵션이 테마에서 작동하지 않을 때만 사용하세요.

각 옵션은 테마에 메뉴 게시에서 단계별로 설명합니다.

레이아웃과 요소

방향기본값: 가로: 가로는 최상위 항목을 한 줄로 표시합니다. 세로는 사이드바 메뉴처럼 한 열로 쌓습니다.
정렬기본값: 왼쪽: 메뉴 바에서 최상위 항목을 왼쪽, 오른쪽 또는 가운데로 정렬합니다.
메뉴 최대 너비기본값: 비어 있음: px 단위의 최대 메뉴 너비입니다. 예: 1200. 비워 두면 사용 가능한 전체 너비를 사용합니다.
검색창 표시기본값: 켜짐: 메뉴에 제품 검색 필드를 추가합니다.
데스크톱에서 구분선 표시기본값: 켜짐: 데스크톱에서 최상위 항목 사이에 구분선을 표시합니다. 색상: 색상 > Separator color(구분선 색상).
모바일에서 구분선 표시기본값: 켜짐: 모바일 메뉴의 항목 사이에 구분선을 표시합니다.
표시기(아래 화살표) 표시기본값: 켜짐: 하위 메뉴가 있는 항목 옆에 작은 화살표를 표시합니다.

하위 메뉴

테두리 표시기본값: 켜짐: 하위 메뉴 주위에 테두리를 표시합니다. 색상: 색상 > 하위 메뉴 > Border color(테두리 색상).
데스크톱에서 스크롤바 사용기본값: 켜짐: 화면보다 긴 하위 메뉴가 잘리지 않고, 쇼핑객이 그 안에서 스크롤할 수 있습니다.
모바일에서 스크롤바 사용기본값: 켜짐: 모바일 메뉴에서도 같습니다.
하위 메뉴 최대 너비기본값: 비어 있음: px 단위의 최대 하위 메뉴 너비입니다. 비워 두면 기본 너비를 사용합니다.
모바일에서 여는 방식기본값: 드롭다운: 드롭다운은 상위 항목 아래로 하위 메뉴를 펼칩니다. 슬라이드는 이전 단계로 돌아가는 방법과 함께 새 패널로 엽니다.

메뉴 애니메이션

트리거 – 데스크톱기본값: 호버: 데스크톱에서 하위 메뉴가 열리는 방식입니다: 호버, 클릭 또는 클릭으로 열기.
트리거 – 모바일기본값: 클릭으로 열기: 모바일 메뉴에서 하위 메뉴가 열리는 방식으로, 같은 세 가지 옵션이 있습니다.
효과기본값: 페이드: 열릴 때의 애니메이션입니다: 페이드 또는 위로 이동.
전환 속도기본값: 300: ms 단위의 애니메이션 길이로, 최대 1500입니다.
전환 지연기본값: 150: 하위 메뉴가 열리거나 닫히기 전 대기 시간(ms)으로, 최대 1500입니다. 호버에서는 마우스가 지나갈 때 하위 메뉴가 깜빡이며 열리는 것을 막아 줍니다.

트리거:

호버: 마우스가 항목 위로 이동하면 하위 메뉴가 열립니다.
클릭: 첫 번째 클릭이나 탭으로 하위 메뉴가 열리고, 항목을 다시 클릭하면 링크로 이동합니다.
클릭으로 열기: 클릭할 때마다 하위 메뉴가 열리거나 닫히며, 상위 항목은 링크로 이동하지 않습니다.

계정 링크

쇼핑객의 로그인 상태에 따라 바뀌는 고객 계정 바로 가기입니다. 기본적으로 모두 꺼져 있습니다. 하나를 켜면 아이콘과 제목 필드가 표시됩니다(예: “Login”을 “Sign in”으로 바꾸는 로그인 아이콘과 로그인 제목).

로그인 링크 표시기본값: 꺼짐: 쇼핑객이 로그인하지 않았을 때 표시됩니다.
가입 링크 표시기본값: 꺼짐: 계정을 만드는 링크입니다. 쇼핑객이 로그인하지 않았을 때 표시됩니다.
계정 링크 표시기본값: 꺼짐: 고객 계정 페이지로 가는 링크입니다. 쇼핑객이 로그인했을 때 표시됩니다.
로그아웃 링크 표시기본값: 꺼짐: 쇼핑객이 로그인했을 때 표시됩니다.

간격

슬라이더를 끌거나 px 단위 값을 입력합니다.

메인 메뉴 안쪽 여백기본값: 20: 각 최상위 항목 양옆의 가로 여백입니다.
메인 메뉴 줄 높이기본값: 50: 최상위 메뉴 바의 높이입니다.
드롭다운 줄 높이기본값: 50: 드롭다운 하위 메뉴 각 행의 높이입니다.
탭 줄 높이기본값: 50: 탭 메뉴 각 탭의 높이입니다.
링크 목록 줄 높이기본값: 30: 링크 목록 블록 각 링크의 높이입니다.

캐러셀

제품 캐러셀과 이미지 슬라이더처럼 슬라이드되는 블록에 적용됩니다.

자동 재생기본값: 켜짐: 슬라이드가 자동으로 넘어갑니다.
무한 반복기본값: 켜짐: 마지막 슬라이드 다음에 캐러셀이 첫 슬라이드부터 다시 시작합니다.

고급

너비가 다음 값보다 작을 때 모바일 메뉴 사용기본값: 768: 모바일 메뉴가 사용되는 화면 너비(px) 기준입니다. 이보다 넓은 화면에는 데스크톱 메뉴가 표시됩니다.
링크 목록 블록의 하위 메뉴 숨기기기본값: 꺼짐: 모바일 전용. 각 링크 목록 제목 아래의 링크를 접습니다. 쇼핑객은 제목의 화살표를 탭해 펼칩니다.
장바구니 담기 버튼 표시기본값: 꺼짐: 메뉴의 제품 블록에 있는 제품에 장바구니 담기 버튼을 추가합니다. 색상: 색상 > 장바구니 담기 버튼.
이미지 지연 로딩 사용기본값: 켜짐: 필요할 때만 메뉴 이미지를 불러와 페이지 속도에 도움이 됩니다. 켜 두는 것을 권장합니다.

문제 해결

모바일에서 상위 항목을 탭해도 페이지가 열리지 않아요

트리거 – 모바일이 클릭으로 열기로 설정되어 있으면 상위 항목을 탭해도 하위 메뉴만 열립니다. 클릭으로 바꾸거나, 상위 페이지를 하위 메뉴 안의 첫 번째 링크로 추가하세요. 모바일에서 메뉴 항목이 이동하지 않아요를 참고하세요.

태블릿이나 작은 노트북에서 모바일 메뉴가 표시되지 않아요

너비가 다음 값보다 작을 때 모바일 메뉴 사용보다 넓은 화면에서는 데스크톱 메뉴가 사용됩니다. 이 값을 높이세요.

도움이 되었나요?

문제 신고