> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/custom/editor.md).

# 커스텀 코드 에디터

커스텀 코드 에디터는 사용자의 커스텀 코드를 사이트 전체 또는 페이지 전체 및 특정 섹션, 블록을 지정하여 자유롭게 사용하여 다양한 디자인 구성을 위해 사용 되는 기능입니다.

에디터 사용 방법 및 코드 사용 시 주의 사항 등 자세한 내용을 아래 가이드를 참고 부탁드립니다.

## 주의사항

{% hint style="danger" %}

* 커스텀 코드 에디터는 무료 플랜에서 사용 할 수 없습니다.
* 사용자의 커스텀 코드를 사용하는것은 가능하나, 큐샵의 기존 코드를 수정하는 것은 불가능합니다.
* HTML, JavaScript, CSS 만 지원 됩니다.
* 섹션/블록 ID값은 변하지 않지만, class값은 변경이 될 수 있으니 class값을 지정하여 코드 제작을 하는 것은 지양하시기 바랍니다.
* 적용한 코드 중 \<script> 코드 내 오류가 있을 경우 저장이 되지 않습니다.
* 입력한 코드의 작동 여부, 코드로 인해 발생한 현상에 대한 조치 및 안내는 불가능 합니다.
* 에디터에서는 입력한 코드는 동작 하지 않으며, 미리보기를 통해 동작 여부를 확인해 주셔야 합니다.
* 코드 저장 시 에디터 게시하기를 하지않아도 사이트에 반영 됩니다.
* 사용한 코드의 적용 여부에 대한 검토 및 안내는 불가능 합니다.
* 공통 코드에 적용 한 코드는 **\[관리자페이지 > 공통코드관리]**&#xC5D0; 동일하게 저장이 됩니다.
  {% endhint %}

### 1. 섹션/블록 ID 값 확인하기

1-1. 큐샵 로그인 후 디자인 에디터에 접속을 합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

1-2. 아래 내용을 참고하여 ID값을 확인하고 복사를 합니다.

{% hint style="info" %}
섹션, 블록 복사하기 단축키 **(Ctrl+C)**&#xB97C; 통해 ID 복사가 가능합니다.
{% endhint %}

<details>

<summary>퀵 메뉴에서 확인하기</summary>

1. 에디터 내 ID 값을 확인 하려는 섹션 또는 블록을 선택합니다.
2. 퀵메뉴의 **\[ID 복사]** 아이콘을 클릭하여 복사를 합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FIFzQa87xMVUwexRtORCp%2F1-1_ID%20%ED%99%95%EC%9D%B8_%ED%80%B5%EB%A9%94%EB%89%B4.png?alt=media&amp;token=26583988-6c32-4917-a92d-8293d74660b5" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>속성 패널에서 확인하기</summary>

1. 에디터 내 ID 값을 확인 하려는 섹션 또는 블록을 선택합니다.
2. 오른쪽 **\[속성패널 > 정보]** 탭을 통해 ID값을 확인한 뒤 복사하기 아이콘을 클릭하여 복사를 합니다.<br>

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FVfXaddROs6aY0RNQG6iG%2F1-2_ID%20%ED%99%95%EC%9D%B8_%EC%86%8D%EC%84%B1%ED%8C%A8%EB%84%90.png?alt=media&amp;token=44ab8add-34d5-403e-b796-18b6bf4d8b09" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>레이어에서 확인하기</summary>

1. 에디터의 오른쪽 위 레이어를 클릭합니다.
2. 에디터 내 ID 값을 확인 하려는 섹션 또는 블록의 **\[상세설정]** 아이콘을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQl0BbHjw5UzNySMT5GT5%2F1-3_ID%20%ED%99%95%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%96%B4_%EC%83%81%EC%84%B8%EC%84%A4%EC%A0%95.png?alt=media&amp;token=5191a192-5e0a-4bf9-9606-3e06606ea1d0" alt=""><figcaption></figcaption></figure>
3. **\[ID 복사하기]**&#xB97C; 클릭하여 ID 값을 복사합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FFy6MTG10NOdlZdCaufLD%2F1-3_ID%20%ED%99%95%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%96%B4_%EB%B3%B5%EC%82%AC.png?alt=media&amp;token=aab5603e-876e-41aa-9148-20b4fef789d8" alt=""><figcaption></figcaption></figure>

</details>

1-3. **\[2. 커스텀 코드 에디터 사용하기]** 가이드를 참고하여 코드 작성 영역에 ID값을 붙여넣어 사용합니다.

{% hint style="info" %}
붙여넣기 단축&#xD0A4;**(Ctrl+V)**&#xB97C; 통해 ID 붙여넣기가 가능합니다.
{% endhint %}

### 2. 커스텀 코드 에디터 사용하기

{% hint style="danger" %}
적용한 코드 중 \<script> 코드 내 오류가 있을 경우 저장 되지 않습니다.
{% endhint %}

2-1. 큐샵 로그인 후 디자인 에디터에 접속을 합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

2-2. 에디터의 오른쪽 아래 **\[커스텀 코드 에디터**]를 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FoCYFEmNGoJ3Gu6zEGGAW%2F2_%EC%BB%A4%EC%8A%A4%ED%85%80%20%EC%97%90%EB%94%94%ED%84%B0%20%EB%B2%84%ED%8A%BC.png?alt=media&amp;token=2b8f7caf-0f9a-4c4e-9ab8-ea75df15c14a" alt=""><figcaption></figcaption></figure>

2-3. 아래 내용을 참고하여 커스텀 코드를 적용합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FnACqGRumRhXkptLNBVBz%2F3_%EC%BB%A4%EC%8A%A4%ED%85%80%20%EC%97%90%EB%94%94%ED%84%B02.png?alt=media&amp;token=655e6b75-c974-40f3-9d16-485cb205afb6" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="170">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>ID 네비게이터</strong></td><td><p>적용 된 코드의 섹션, 블록 ID값과 위치를 안내합니다.</p><ul><li>ID값 클릭 시 해당 위치로 이동</li></ul></td></tr><tr><td><strong>코드 작성 탭</strong></td><td><p><strong>공통 코드</strong><br>모든 페이지에 공통적으로 동작되는 글로벌 코드를 작성하는 영역입니다.<br>적용 한 코드는 <strong>[관리자페이지 > 공통코드관리]</strong>에 동일하게 저장이 됩니다.</p><hr><p><strong>페이지 코드</strong><br>에디터를 통해 현재 접속한 페이지에만 동작되는 코드를 작성하는 영역입니다.<br>탭의 이름은 접속한 페이지 명을 따라 갑니다.</p></td></tr><tr><td><strong>스크립트 템플릿</strong></td><td>코드 작성에 도움이 되는 스크립트 템플릿 입니다.<br>클릭 시 코드 작성 탭에 해당 내용이 적용 됩니다.</td></tr><tr><td><strong>저장하기</strong></td><td>작성한 코드를 저장합니다.<br>코드 저장 시 에디터 게시하기를 하지않아도 사이트에 반영 됩니다.</td></tr></tbody></table>