# 🖼️ 메인 배너 섹션

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

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

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

<details>

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

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

</details>

## 배너 이미지 추가하기

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FWUgSLthMCaUXXY0wNFwp%2F%EB%A9%94%EC%9D%B8%EB%B0%B0%EB%84%88%EC%84%B9%EC%85%98_%EB%B0%B0%EB%84%88%EC%B6%94%EA%B0%80_800.gif?alt=media&#x26;token=3262c60d-13e9-4288-b57f-268b2cf87c39" alt=""><figcaption></figcaption></figure>

<details>

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

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

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

</details>

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fto6IFZjcX8yFRb7VLxm7%2F%EB%A7%A4%EC%95%88%EB%B0%B0%EB%84%88%EC%84%B9%EC%85%98_%EB%B0%B0%EB%84%88%EC%84%A4%EC%A0%95_800.gif?alt=media&#x26;token=55f0b1f3-36c9-4e6b-812a-d651dbebd61b" alt=""><figcaption></figcaption></figure>

<details>

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

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

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

</details>

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FZgqFuXZSx4XiD0V78sb6%2F%EB%A9%94%EC%9D%B8%EB%B0%B0%EB%84%88%EC%84%B9%EC%85%98_%EC%8A%A4%ED%83%80%EC%9D%BC%ED%8E%B8%EC%A7%91800.gif?alt=media&#x26;token=5c43bec1-7463-418a-bf91-197a3b9f0aa1" 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FDw8OD8p31irQLiNJvulv%2F%EB%86%92%EC%9D%B4%EA%B3%A0%EC%A0%95%20(1).gif?alt=media&#x26;token=a05c85fc-a6a6-4e92-8eb5-f40685663c2c" alt=""><figcaption></figcaption></figure>

#### 비율 고정

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FJWDS2yHJx481NjQYQQNZ%2F%EB%B9%84%EC%9C%A8%EA%B3%A0%EC%A0%95%20(1).gif?alt=media&#x26;token=c3c3e1de-e670-4580-9440-e78c037ddd0d" alt=""><figcaption></figcaption></figure>