> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/maunal/editor/undefined-2.md).

# 헤더(쇼핑몰 상단) 편집

쇼핑몰 맨 위에 보이는 상단 영역(로고, 검색창, 장바구니·마이페이지 같은 아이콘 메뉴, 카테고리 메뉴)을 꾸미는 메뉴예요. 꾸미고 싶은 부분을 화면에서 직접 선택하면 오른쪽에 설정 메뉴가 나타나고, 여기서 색상과 스타일을 바꿀 수 있어요. 상단은 모든 페이지에서 고객에게 보이는 부분이라, 쇼핑몰의 첫인상을 정해 줘요.

## 📍 관리자 메뉴 위치

* **경로:** 에디터 > 메인 > 상단 설정

## ⚙️ 메뉴 안내 및 설정 방법

### 디자인 영역

상단 전체를 감싸는 큰 영역이에요. 상단의 전체 모양을 한 번에 정하고 싶을 때 이 영역을 선택해요.

* **디자인 영역 (선택 항목)**
  * **기능 설명:** '디자인 영역'을 선택하면 오른쪽 메뉴에서 해당 영역의 레이아웃 설정, 배경, 테두리를 바꿀 수 있어요. 레이아웃 설정에서는 데스크탑과 모바일의 배치 방향을 각각 정할 수 있고, 배경은 '비어있음', '배경색', '이미지' 중에서 고르며 여백도 조절할 수 있어요. 테두리는 종류, 방향, 굵기, 색상을 바꿀 수 있어요.
  * **이렇게 사용하면 좋아요 🌟:** 상단 전체의 배경과 테두리를 먼저 정한 뒤 세부 칸을 다듬으면 작업이 쉬워요. 데스크탑과 모바일 배치를 각각 확인해 주세요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F7b60HI4iq223YqOTqzXh%2FGroup%201000003035%20(4).png?alt=media&amp;token=fd4da606-4ef7-478f-bf1c-cfb151181d1e" alt=""><figcaption></figcaption></figure>

### 칸

상단 영역 안에서 로고, 검색, 아이콘 메뉴, 카테고리를 각각 담고 있는 구획이에요. 원하는 칸을 선택하면 그 부분만 따로 바꿀 수 있어요.

**칸 영역 (선택 항목)**

* **기능 설명:** '칸 영역'을 선택하면 오른쪽 메뉴에서 해당 영역, 배경, 테두리, 정렬 등을 변경할 수 있어요. 칸 안의 항목 배치, 항목 간격, 가로 정렬, 세로 정렬도 바꿀 수 있어요.
* **이렇게 사용하면 좋아요 🌟:** 로고를 왼쪽에 두고 싶은지, 가운데에 두고 싶은지처럼 위치를 바꾸고 싶을 때 정렬 설정을 사용해 보세요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F2VKAtcXxQ3Tdf7QeqCc8%2FGroup%201000003035%20(5).png?alt=media&amp;token=a1ccde85-1ba7-4268-9e5f-65420cd27bdd" alt=""><figcaption></figcaption></figure>

* **로고 설정 (선택 항목)**

  * **기능 설명:** 로고를 선택하면 오른쪽 메뉴에서 '이미지'와 '텍스트' 중에서 로고 형태를 바꿀 수 있어요. '텍스트'를 선택하면 로고에 들어갈 문구와 텍스트 스타일(글꼴, 글자 크기, 색상, 정렬, 굵기 등)을 바꿀 수 있어요.
  * **이렇게 사용하면 좋아요 🌟:** 로고 이미지가 아직 없다면 '텍스트'로 쇼핑몰 이름을 입력하고 색상과 크기를 맞춰 보세요. 로고 이미지가 준비되면 '이미지'로 바꿔도 돼요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fbc2OXWsah1zy8xZpYCIK%2FGroup%201000003035%20(18).png?alt=media&amp;token=a4b69c2b-e28e-4066-a122-6d4003f2289d" alt=""><figcaption></figcaption></figure>
* **검색 (선택 항목)**
  * **기능 설명:** 검색을 선택하면 오른쪽 메뉴에서 배경과 테두리를 원하는 색상과 스타일로 바꿀 수 있어요. 배경 색상, 정렬, 여백, 테두리 종류를 설정할 수 있어요.
  * **이렇게 사용하면 좋아요 🌟:** 검색창이 배경과 너무 비슷한 색이면 잘 보이지 않아요. 상단 배경과 구분되는 색을 골라 주세요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FMPFYBiaVnUHdHBityZS2%2FGroup%201000003035%20(6).png?alt=media&amp;token=f297d787-c3b5-4cfc-b952-9d7f777d7221" alt=""><figcaption></figcaption></figure>

* **공통 메뉴 (선택 항목)**

  * **기능 설명:** 공통 메뉴(장바구니, 로그인/회원가입/마이페이지, 위시리스트, 메뉴바 아이콘)를 선택하면 오른쪽 메뉴에서 노출 여부, 메뉴바 노출 방향(왼쪽/오른쪽), 색상, 크기 등을 변경할 수 있어요. 각 항목은 켜고 끄는 방식으로 노출 여부를 정하고, 스타일에서는 아이콘 색상, 아이콘 크기, 아이콘 간격을 바꿀 수 있어요.
  * **이렇게 사용하면 좋아요 🌟:** 꼭 필요하지 않은 아이콘은 꺼서 상단을 깔끔하게 만들 수 있어요. 다만 장바구니나 로그인/회원가입/마이페이지를 끄면 고객이 해당 기능을 찾기 어려우니 신중하게 정해 주세요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FxEXG8wV5Vvt6rT0n8RVd%2FGroup%201000003035%20(19).png?alt=media&amp;token=3bdfd1b9-1300-49db-a556-8e660ed5a2a1" alt=""><figcaption></figcaption></figure>
* **카테고리 (선택 항목)**

  * **기능 설명:** 카테고리를 선택하면 오른쪽 메뉴의 \[기본], \[마우스 오버], \[항목 추가] 탭에서 설정할 수 있어요.
    * **기본:** 평소 모습의 스타일(글꼴, 글자 크기, 색상, 정렬, 글자 간격, 줄 간격)
    * **마우스 오버:** 마우스를 올렸을 때의 스타일
    * **항목 추가:** 메뉴를 추가하고, 추가된 항목이 보일 위치(맨앞, 맨뒤)를 설정
  * **이렇게 사용하면 좋아요 🌟:** '항목 추가'를 이용하면 이벤트 페이지처럼 원하는 페이지로 이동하는 메뉴를 카테고리 줄에 추가할 수 있어요. 자주 보여 주고 싶은 페이지는 '맨앞'에 두면 고객이 더 쉽게 찾아요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FcJQmg5pz9ZykwAKwIpic%2FGroup%201000003035%20(8).png?alt=media&amp;token=edf8d8c1-8664-448a-8d33-ce5deb7734a7" alt=""><figcaption></figcaption></figure>

### ✅ 최종 적용

* **\[편집 종료]**
  * 편집이 끝나면 화면 오른쪽 위의 \[편집 종료] 버튼을 눌러요. 누르면 메인 화면으로 이동해요.

## 💡 꼭 확인해 주세요! (참고 및 주의사항)

{% hint style="info" %}
**알아두면 좋아요:** 오른쪽 설정 메뉴는 선택한 부분(영역, 칸, 로고, 검색, 공통 메뉴, 카테고리)에 따라 달라져요. 바꾸고 싶은 부분을 화면에서 직접 눌러 보세요. 바꾼 내용을 쇼핑몰에 보이게 하는 방법은 '에디터 상단 메뉴' 안내를 참고해 주세요.
{% endhint %}

{% hint style="warning" %}
**주의사항:** 공통 메뉴에서 장바구니, 로그인/회원가입/마이페이지, 위시리스트를 꺼 두면 고객 화면에서 해당 아이콘이 보이지 않아요. 저장하기 전에 꼭 \[미리보기]로 고객 화면을 확인해 주세요.
{% endhint %}