> 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-1.md).

# 메인 편집

쇼핑몰 메인 화면의 배너, 상품 진열 영역을 편집하는 메뉴예요.

## 관리자 메뉴 위치

`내 쇼핑몰 꾸미기` > `에디터` > `메인`

## 메뉴 안내 및 설정 방법

### 메인 화면

메인 화면은 슬라이딩 배너, 고정 배너, 전체 진열 상품 영역으로 구성되어 있어요.

### 슬라이딩 배너

* 슬라이딩 배너를 선택하면 화면 우측으로 배너를 편집할 수 있는 패널이 열려요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FaGVOWSyDQuYOeMVm1nIm%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%20%EB%B0%B0%EB%84%88.png?alt=media&amp;token=b3b65249-88a5-42fd-ab8d-9111951a630b" alt=""><figcaption></figcaption></figure>

**① 작동 방식 설정**

* 자동 재생 여부, 재생 속도 조절 등 배너의 작동 방식을 설정할 수 있어요.

**② 이미지 설정**

* 배너 이미지를 설정할 수 있어요.
  * 이미지는 마이FTP에 업로드하여 불러오거나무료 이미지를 사용할 수 있어요.
* PC와 모바일은 화면 크기가 다르기 때문에 각각 설정해 주세요.
* PC 이미지를 설정하지 않을 경우 배너가 노출되지 않아요.&#x20;

{% hint style="info" %}
PC 이미지 권장 가로 사이즈 1920px

모바일 이미지 권장 가로 사이즈 750px
{% endhint %}

### 고정 배너&#x20;

* 배너를 선택하면 화면 우측으로 배너를 편집할 수 있는 패널이 열려요.
* <mark style="color:$danger;">스킨에 따라 고정 배너의 개수가 다르니 참고해 주세요. (0개\~2개)</mark>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FhmBdYippu8oOyh0GSyat%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88.png?alt=media&amp;token=54d47b60-7567-4a9a-bc7e-edc421ec744c" alt=""><figcaption></figcaption></figure>

#### **영역/구역 설정**

{% tabs %}
{% tab title="영역" %}

* 배너가 위치한 전체 영역을 말해요.
* 영역의 여백, 테두리를 편집할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FvtSWPsQYeQUam2Zdb43N%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88%20(%EC%98%81%EC%97%AD).png?alt=media&amp;token=838a90da-6485-433f-8b9c-b55a1a350d62" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="구역" %}

* 각  배너를 말하며 첫 번째 배너는 1구역, 두 번째 배너는 2구역으로 불러요.
* 배너를 눌렀을 때 이동할 주소와 배경색을 설정할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F9KHJGL0V708FeX46UOwO%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88%20(%EA%B5%AC%EC%97%AD).png?alt=media&amp;token=ead09c2e-caa4-45e8-8ff2-66bb78f46681" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**이렇게 사용하면 좋아요 🌟**

전체 모양을 먼저 \[영역] 탭에서 정리하고, 그 다음 \[1구역], \[2구역]에서 구역별로 다듬으면 수정이 훨씬 쉬워요.
{% endhint %}

#### 칸/텍스트/이미지 설정

{% tabs %}
{% tab title="칸" %}

* 구역 안에서 텍스트 또는 이미지를 포함하고 있는 부분을 칸이라고 불러요.
* 칸의 배경, 테두리, 정렬 방식을 설정할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fe0EsckR4FjjvmGa0l0sZ%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88%20(%EC%B9%B8).png?alt=media&amp;token=d8514762-652b-4003-9954-3eea39863fb7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**이렇게 사용하면 좋아요 🌟**

칸의 배경과 테두리 색을 바꾸면 배너가 주변과 구분되어 더 눈에 띄어요.
{% endhint %}
{% endtab %}

{% tab title="텍스트" %}

* 칸 안에 있는 텍스트를 설정할 수 있어요.
* 색상, 글꼴 등 스타일 변경이 가능하고 눌렀을 때 이동할 주소를 설정할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FsxdhwGCKvYnkf9sORmXC%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88%20(%ED%85%8D%EC%8A%A4%ED%8A%B8).png?alt=media&amp;token=300724b2-95a4-4248-ab26-376adb545f6a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="이미지" %}

* 칸 안에 있는 이미지를 설정할 수 있어요.
* 마이FTP에 업로드한 이미지로 변경이 가능하고 눌렀을 때 이동할 주소를 설정할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FGTfromc2e3oYPjShrmD8%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EA%B3%A0%EC%A0%95%20%EB%B0%B0%EB%84%88%20(%EC%9D%B4%EB%AF%B8%EC%A7%80).png?alt=media&amp;token=b0a71165-dd6b-465f-afd2-99355dd6d3c3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### 전체 진열 상품 영역

* 쇼핑몰에 등록된 모든 상품이 진열되는 영역이에요.&#x20;
* 영역을 선택하면 화면 우측으로 영역을 편집할 수 있는 패널이 열려요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FCQFKaBfAqFAPApuuVyvT%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EC%83%81%ED%92%88%20%EC%A7%84%EC%97%B4.png?alt=media&amp;token=f0306d33-261e-4e49-b631-78fe7bf236d3" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="영역" %}

* 상품 영역의 배경과 테두리를 설정할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FNB5Sm1GMB4tVyPFeQTeW%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EC%83%81%ED%92%88%20%EC%A7%84%EC%97%B4%20(%EC%98%81%EC%97%AD).png?alt=media&amp;token=731a1504-b352-4f50-b266-4580f3717a48" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**이렇게 사용하면 좋아요 🌟**

상품 사진이 돋보이도록 배경은 단순한 색으로 두고, 필요할 때만 테두리를 넣어 보세요.
{% endhint %}
{% endtab %}

{% tab title="전체 진열 상품" %}

* 상품 정보 중 고객에게 보여줄 정보를 선택할 수 있어요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F2UsGEfcG3cEXMNYWezCh%2F%EB%82%B4%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EA%BE%B8%EB%AF%B8%EA%B8%B0_%EC%83%81%ED%92%88%20%EC%A7%84%EC%97%B4%20(%EC%83%81%ED%92%88).png?alt=media&amp;token=2d7b1a34-62e2-450c-a6f0-cd7fa927d7aa" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**이렇게 사용하면 좋아요 🌟**

판매가와 할인율을 켜 두면 고객이 가격과 혜택을 한눈에 알 수 있어요. 반대로 판매가를 끄면 고객이 가격을 볼 수 없으니 꼭 필요한 경우에만 꺼 주세요.
{% endhint %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**알아두면 좋아요**

오른쪽 편집 패널의 내용은 선택한 영역에 따라 바뀌어요. 슬라이딩 배너, 배너, 칸, 텍스트를 각각 눌러 보면서 원하는 부분을 찾아 설정해 보세요.
{% endhint %}