> 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="/files/GnxVWf3UtK1UEdFqxvJ9" alt=""><figcaption></figcaption></figure>

</details>

<details>

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

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

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

</details>

<details>

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

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

   <figure><img src="/files/IMQBU5ZzViVR1YmCc3lC" alt=""><figcaption></figcaption></figure>
3. **\[ID 복사하기]**&#xB97C; 클릭하여 ID 값을 복사합니다.

   <figure><img src="/files/az8Csd8T13uwsWfSd0BK" 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="/files/US0AjQupF9s7U5V6Z2ro" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/lqv4uBIZBrjBeEi7aHgB" 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>