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

# 에디터 사용 방법

에디터 상단 메뉴에서 어느 화면을 편집할지 정하고, 작업 마무리 후 저장을 통해 쇼핑몰에 적용할 수 있어요.

## 관리자 메뉴 위치

`내 쇼핑몰 꾸미기` > `에디터` > `상단 메뉴`

## 메뉴 안내 및 설정 방법

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F96mNyzKzNBqNbY8EoN5A%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95.png?alt=media&amp;token=a3276e94-d7d4-4219-abdc-4e903f4240a4" alt=""><figcaption></figcaption></figure>

**① 페이지 선택**

* 편집 및 확인할 쇼핑몰 페이지를 고르는 곳이에요.&#x20;
* 상단 왼쪽의 페이지 선택 목록을 열어 원하는 페이지를 선택하면 해당 페이지로 이동해요.

{% tabs %}
{% tab title="메인" %}
고객이 쇼핑몰 접속 시에 가장 먼저 보는 메인 페이지를 편집할 수 있어요.

<a href="/maunal/editor/undefined-1.md" class="button primary">메인 편집 매뉴얼 바로가기</a>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F0g8L9v2ru543giGCLoce%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95(%EB%A9%94%EC%9D%B8).png?alt=media&amp;token=630c51a8-c95a-4748-9f7a-0332675653c8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="헤더 (상단)" %}
쇼핑몰 상단의 로고, 검색창, 카테고리 메뉴를 편집할 수 있어요.

<a href="/maunal/editor/undefined-2.md" class="button primary">헤더 편집 매뉴얼 바로가기</a>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FvNBkB2CwDyAsmqgZxAma%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95(%ED%97%A4%EB%8D%94).png?alt=media&amp;token=649047e9-17cd-4c8b-a624-ca8fc6ca03e0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="푸터 (하단)" %}
쇼핑몰 하단의 정보 영역을 편집할 수 있어요.

<a href="/maunal/editor/undefined-3.md" class="button primary">푸터 편집 매뉴얼 바로가기</a>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FNirB515MQBByKj21HSeP%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95(%ED%91%B8%ED%84%B0).png?alt=media&amp;token=e992ed42-0785-4252-94de-8a3d69593f04" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="상품 분류" %}
상품 분류 페이지가 어떻게 노출되는지 확인할 수 있어요. 다른 요소 편집 후 잘 어울리는지 확인해 보세요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FpsXxbcKO8bW3cnEwQtAW%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95(%EC%83%81%ED%92%88%20%EB%B6%84%EB%A5%98).png?alt=media&amp;token=80fdde48-d38a-4e10-a5f6-e41a2f0c2b41" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="상품 상세" %}
상품 상세 페이지가 어떻게 노출되는지 확인할 수 있어요. 다른 요소 편집 후 잘 어울리는지 확인해 보세요.

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F90Yd7bSyIXRzJOsOKuu7%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%97%90%EB%94%94%ED%84%B0%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95(%EC%83%81%ED%92%88%20%EC%83%81%EC%84%B8).png?alt=media&amp;token=56ed027f-2f5d-4146-bbf3-eccb0855bdda" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**② PC/모바일 선택**

* 쇼핑몰이 PC와 모바일에서 각각 어떻게 보이는지 확인할 수 있어요.
* PC의 넓은 화면 뿐 아니라 모바일 화면에서도 글자와 이미지가 잘 보이는지 확인해 주세요.

**③ 디자인 백업 기록 (복원)**

* 최근 저장된 디자인 내역을 확인하고 복원할 수 있어요.
* 목록에서 원하는 버전을 선택하고 \[복원] 버튼을 선택하면, 에디터의 모든 내용이 그 당시 상태로 되돌아가요.

**④ 실행 취소/다시 실행**

* 작업 중 실수했다면 이전 상태로 되돌리거나, 취소한 작업을 다시 실행해요.
  * 단축키 : 실행 취소: `Ctrl+Z`, 다시 실행: `Ctrl+Y`

**⑤ 미리보기**

* 지금까지 꾸민 화면을 미리 확인할 수 있어요.

**⑥ 임시저장**

* 현재까지 작업한 내용을 임시로 저장할 수 있어요.

**⑦ 쇼핑몰 적용**

* 편집한 디자인을 쇼핑몰에 적용해요.

{% hint style="warning" %}
**주의사항**

\[쇼핑몰 적용] 버튼을 누르면 쇼핑몰에 즉시 적용되기 때문에 적용 전에 \[미리보기]로 PC와 모바일 화면을 모두 확인해 주세요.
{% endhint %}