> For the complete documentation index, see [llms.txt](https://help.sixshop.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.sixshop.com/learn-sixshop/store-design/easy-design/main-banner-section.md).

# 🖼️ 메인 배너 섹션

페이지 상단에 배치되어 상점의 인기 상품, 진행 중인 이벤트를 강조하여 원하는 페이지로 접속을 유도할 수 있기  때문에 사이트 첫인상에 많은 영향을 끼칠 수 있어요.

## 메인 배너 섹션 추가하기

메인 배너 섹션 추가하기는 방법은 [<mark style="background-color:blue;">**여기**</mark>](/learn-sixshop/store-design/easy-design/design-edit.md#undefined) **👈**에서 확인해 주세요!\
메인 배너 섹션은 <mark style="background-color:blue;">**페이지당 하나만 추가**</mark>할 수 있어요.

<details>

<summary>✏️ 추가 방법 글자로 살펴보기</summary>

1. 식스샵 로그인 후 왼쪽 위의 ‘디자인 편집’ 클릭
2. 왼쪽 아래 ‘섹션 추가하기 +’ 클릭
3. 메인 배너 섹션 클릭

</details>

## 배너 이미지 추가하기

<figure><img src="/files/bb8R2JuYcF8iPmpcSyhf" alt=""><figcaption></figcaption></figure>

<details>

<summary>✏️ 추가 방법 글로 살펴보기</summary>

1. 식스샵 로그인 후 왼쪽 위의 ‘디자인 편집’ 클릭
2. 왼쪽 하단의 (≡)메뉴를 클릭
3. 메인 배너 섹션이 등록된 페이지 클릭
4. 메인 배너 섹션을 클릭하여 생긴 빨간 테두리 우측 상단의 연필 모양(개별 편집) 아이콘 클릭
5. 개별 편집 패널의 '이미지'탭 하단의 +버튼을 클릭하여 이미지 선택

🪄 이미지를 클릭한 상태로 드래그하면 이미지 위치를 변경할 수 있어요.

</details>

## 배너에 제목/설명/버튼 추가하기

<figure><img src="/files/pzY7xVaZ8ykfYbkMX0bd" alt=""><figcaption></figcaption></figure>

<details>

<summary>✏️ 추가 방법 글로 살펴보기</summary>

1. 메인 배너 섹션의 연필 모양(개별 편집) 아이콘 클릭 (또는 메인 배너 섹션 더블 클릭)
2. 등록된 이미지에 마우스를 대면 보이는 '설정'버튼 클릭
3. 제목, 설명, 버튼 설정

📢 제목, 설명, 버튼은 스타일편집에서 메인 배너 섹션 종류가 <mark style="background-color:blue;">**\[높이 고정]인 경우**</mark>에만 설정할 수 있어요.

</details>

## 공통 스타일 편집에서 설정하기

<figure><img src="/files/iylWJUZrxl8ntROuxgRp" alt=""><figcaption></figcaption></figure>

<details>

<summary>✏️ 공통 스타일 편집 설정 방법 글로 살펴보기</summary>

1. 식스샵 로그인 후 왼쪽 위의 ‘디자인 편집’ 클릭
2. 왼쪽 하단의 (≡)메뉴를 클릭하기
3. 메인 배너 섹션 클릭하기
4. 스타일 편집 해보기

🪄 메인 배너 섹션의 이미지 위 글자 입력은 <mark style="background-color:blue;">**\[높이 고정]에서만 가능**</mark>해요. \ <mark style="background-color:blue;">**\[v]머리글과 합치기**</mark>를 하면 상점 이름과 메뉴의 색상은 <mark style="background-color:blue;">**\[스타일]의 색상**</mark>을 따라갑니다!

</details>

#### 높이 고정

<figure><img src="/files/A97hF1gHTP0weZqFb3uf" alt=""><figcaption></figcaption></figure>

#### 비율 고정

<figure><img src="/files/XH1WnFxC0d4LvVxLnkz9" alt=""><figcaption></figcaption></figure>