08. 헤더 설정하기
이 페이지에서는 쇼핑몰의 얼굴인 '헤더'를 이해하고 설정하는 방법을 알아볼게요. 헤더는 로고, 메뉴, 검색창 등 고객의 쇼핑 동선에 꼭 필요한 요소가 모인 곳이에요. 이곳을 잘 설정해두면 쇼핑몰 전체의 사용성이 한층 좋아진답니다.
🔝 헤더란?
헤더는 모든 페이지 상단에 공통으로 노출되는 영역이에요. 고객이 쇼핑몰 어디에 있든 원하는 페이지로 이동하거나 상품을 찾을 수 있게 돕는 길잡이 역할을 하죠.
헤더는 공통 섹션으로 구성되어 있어 추가, 삭제, 숨기기가 불가능해요. 한 번 설정하면 모든 페이지에 동일하게 적용되며, 페이지마다 다르게 구성할 수는 없다는 점을 꼭 기억해주세요!
💡 헤더는 페이지에 종속되지 않는 공통 영역이에요. 어느 페이지에서 편집하더라도 그 결과가 쇼핑몰 전체에 즉시 반영된답니다. 페이지 영역에 대한 더 자세한 내용은 03. 페이지 구성 이해하기에서 확인해 보세요.
✏️ 헤더 편집하기
헤더의 상세 속성은 오른쪽 사이드바에서 수정할 수 있어요. 다음 두 가지 방법 중 편한 방법으로 편집 화면에 접근해 보세요.
왼쪽 사이드바 트리에서 [헤더]를 클릭해요.
디자인 에디터 캔버스 상단의 헤더 영역을 직접 클릭해요.
헤더 레이아웃 설정
헤더의 전체적인 배치와 동작을 설정할 수 있는 항목이에요.
상위 메뉴
메뉴를 햄버거 아이콘 형태로 보여줄지, 카테고리를 나열할지 선택해요.
하위 메뉴
선택한 메뉴의 하위 항목만 펼칠지, 모든 하위 메뉴를 함께 보여줄지 선택해요.
헤더 스타일
로고와 메뉴의 배치를 5가지 형태 중에서 선택해요.
상단 고정
화면을 아래로 스크롤해도 헤더가 항상 상단에 고정되도록 설정해요.
겹치기
헤더를 본문 최상단과 겹쳐 투명하게 노출해요.
첫 화면을 더욱 시원하게 연출할 수 있어요.
헤더 배경과 글자색
오른쪽 사이드바의 스타일 설정을 통해 헤더 배경(이미지/색상)과 글자색을 쇼핑몰 분위기에 맞춰 변경할 수 있어요.
🧩 헤더 안의 요소들
헤더에는 시스템에서 기본 제공하는 위젯들이 포함되어 있어요. 이 위젯들은 삭제하거나 임의로 추가할 수는 없으며, 각 위젯을 선택해 상세 설정을 조정하는 방식으로 관리해요.
로고
텍스트(상점 이름) 또는 이미지 중 선택하여 로고를 표시해요.
메뉴
관리자에 등록된 카테고리를 불러와요.
[+] 버튼으로 원하는 메뉴를 직접 추가할 수도 있어요.
기본 제공 메뉴
장바구니, 로그인 등 필수 메뉴의 아이콘 노출 여부와 텍스트를 설정해요.
검색
검색창 위젯이에요. 세부 검색 조건은 관리자 페이지에서 설정할 수 있어요.
해외몰 이동
해외몰 이동 아이콘의 노출 방식을 선택해요.
💡 로고의 상점 이름은 관리자 상점명과 연결돼 있어요.
헤더와 푸터 중 한 곳에서 상점 이름을 수정하면 양쪽 모두에 동일하게 반영돼요.
디자인 에디터에서 수정한 상점 이름은 디자인 에디터에만 적용되며, 관리자 페이지 정보는 바뀌지 않아요.
다만, 관리자 페이지에서 상점명을 변경하면 디자인 에디터의 상점 이름도 관리자 설정값으로 업데이트된답니다.
💡 참고 헤더 메뉴는 [관리자 > 상품 > 상품 분류 관리 > 카테고리 관리]에 등록된 내용을 불러와요. 카테고리 순서는 관리자 설정을 따르며 디자인 에디터에서는 변경할 수 없어요. 단, [+] 버튼으로 직접 추가한 메뉴는 카테고리 항목 뒤에 배치할 수 있어요.
💡 자주 묻는 질문
헤더를 페이지마다 다르게 보여줄 수 있나요?
헤더는 모든 페이지에 공통으로 적용되는 영역이라 페이지별로 다르게 설정할 수 없어요. 페이지마다 다른 내용을 보여주고 싶다면 본문 영역을 활용해 주세요.
Last updated
Was this helpful?