커스텀 코드 에디터

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

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

주의사항

• 커스텀 코드 에디터는 무료 플랜에서 사용 할 수 없습니다.

• 사용자의 커스텀 코드를 사용하는것은 가능하나, 큐샵의 기존 코드를 수정하는 것은 불가능합니다.

• HTML, JavaScript, CSS 만 지원 됩니다.

• 섹션/블록 ID값은 변하지 않지만, class값은 변경이 될 수 있으니 class값을 지정하여 코드 제작을 하는 것은 지양하시기 바랍니다.

• 적용한 코드 중 <script> 코드 내 오류가 있을 경우 저장이 되지 않습니다.

• 입력한 코드의 작동 여부, 코드로 인해 발생한 현상에 대한 조치 및 안내는 불가능 합니다.

• 에디터에서는 입력한 코드는 동작 하지 않으며, 미리보기를 통해 동작 여부를 확인해 주셔야 합니다.

• 코드 저장 시 에디터 게시하기를 하지않아도 사이트에 반영 됩니다.

• 사용한 코드의 적용 여부에 대한 검토 및 안내는 불가능 합니다.

• 공통 코드에 적용 한 코드는 [관리자페이지 > 공통코드관리]에 동일하게 저장이 됩니다.

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

1-1. 큐샵 로그인 후 디자인 에디터에 접속을 합니다. (에디터 접속하기)

1-2. 에디터 내 ID값을 확인하려는 섹션 또는 블록을 선택합니다.

1-3. 오른쪽 [속성패널 > 정보] 탭을 통해 ID값을 확인한 뒤 복사하기 아이콘을 클릭합니다.

퀵 메뉴의 [ID 복사] 또는 더보기의 [ID 복사하기]를 통해 복사를 하실 수 있으며 섹션, 블록 복사하기 단축키 (Ctrl+C)를 통해 ID 복사가 가능합니다

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

붙여넣기 단축키(Ctrl+V)를 통해 ID 붙여넣기가 가능합니다.

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

적용한 코드 중 <script> 코드 내 오류가 있을 경우 저장 되지 않습니다.

2-1. 큐샵 로그인 후 디자인 에디터에 접속을 합니다. (에디터 접속하기)

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

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

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