# 외부 팝업 기능(코드앤버터) 활용하기 ## 목차 * [코드앤버터는?](#id-1) * [코드앤버터 이용하기](#id-2) * [코드앤버터로 팝업 만들기](#id-2-1) * [코드앤버터 연동하기](#id-2-2) * [일부 페이지에만 팝업 노출하기](#id-2-3) ## 1. 코드앤버터는? 코드앤버터(CODE N BUTTER) 서비스를 이용하여 상점 내 다양한 템플릿의 팝업을 쉽게 설정할 수 있습니다. {% hint style="info" %} #### 코드앤버터의 장점 * 팝업을 노출할 페이지를 선택할 수 있습니다. * 팝업 창을 2개 이상 노출할 수 있습니다. * 모바일과 데스크탑에 노출할 팝업을 따로 설정할 수 있습니다. * 팝업 디자인 템플릿이 제공되어 쉽게 디자인할 수 있습니다. {% endhint %} ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FMkckozJgRapXQe7m5aFM%2F%EC%BD%94%EB%93%9C%EC%95%A4%EB%B2%84%ED%84%B0.gif?alt=media\&token=1af7d503-dfcb-478c-ac43-82c0ea993980) ## 2. 코드앤버터 이용하기 {% hint style="info" %} 코드앤버터 서비스 이용에 대한 자세한 사항은 코드앤버터로 문의해 주시기 바랍니다. * [**코드앤버터 홈페이지**](https://www.codenbutter.com) * [**코드앤버터 안내서**](https://docs.codenbutter.com/) {% endhint %} ### 2-1. 코드앤버터로 팝업 만들기 #### Step 1. [코드앤버터](https://www.codenbutter.com/) 가입 후 웹사이트를 추가해 주세요. #### Step 2. \[팝업 만들기]를 클릭하고 마음에 드는 템플릿 선택해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F3DW1GNJFJyySBqnsY869%2Fimage.png?alt=media\&token=48831115-b418-409f-b39c-3a04ee85b8e8) #### Step 3. 모바일/데스크톱 버전의 디자인을 자유롭게 수정해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FgxHOVnIKmHoC6bAbsIfV%2Fimage.png?alt=media\&token=8e47a89f-a53c-4891-8c40-fb563edd913b) #### Step 4. \[공개 설정]을 클릭하여 미리 보기 후 공개해 주세요. 공개 후 스크립트 추가 안내 팝업이 노출되면 \[연동하기]를 클릭하여 아래의 [2-2. 코드앤버터 연동하기](#id-2-2) 과정을 이어서 진행해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FYA632ZBFWuABB9a3pVlY%2Fimage.png?alt=media\&token=dcea3f49-511d-44d6-b0df-f36dc16daac2) ### 2-2. 코드앤버터 연동하기 #### Step 1. 스크립트 설치의 수동 설치 `HTML`의 코드를 복사해 주세요. {% hint style="info" %} 팝업을 통하여 스크립트 설치로 바로 이동하지 못하였다면 \[코드앤버터 > 웹 사이트 설정 > 스크립트 설치]의 경로로 스크립트 확인이 가능합니다. {% endhint %} ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FW7lP5Rf86rzB0gw4eD8V%2Fimage.png?alt=media\&token=263e1b83-f42b-464a-ae9e-577b3425ced5) #### Step 2. [\[식스샵 > 애드온\]](https://www.sixshop.com/dashboard/add-ons-all)에서 코드 삽입 애드온을 추가해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Frs1UO4vm9rAdoukbMggt%2Fimage.png?alt=media\&token=b0ddaf01-de91-4e53-a402-b8249d6748fc) #### Step 3. [\[식스샵 > 애드온 > 코드삽입\]](https://www.sixshop.com/dashboard/add-ons-codeInjection) 공통 \영역에 복사한 스크립트를 붙여 넣고 저장하면 됩니다. 변경 사항을 저장하면 팝업 연동이 완료되며 상점 내 모든 페이지에 팝업이 노출됩니다. 상점 내 일부 페이지에서만 팝업을 노출하고 싶다면 아래의 [2-3. 일부 페이지에만 팝업 노출하기](#id-2-3) 과정을 이어서 진행해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FoPe2hLf5Fd79JevOP2PJ%2Fimage.png?alt=media\&token=d273cdbc-df6c-4d12-b571-5dbb11685664) ### 2-3. 일부 페이지에만 팝업 노출하기 #### Step 1. \[코드앤버터 > 추가한 팝업 선택 > 노출 페이지]를 클릭해 주세요. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F0pV5w40Kx0fFIpnHK97w%2Fimage.png?alt=media\&token=356c91cc-f03a-48a6-bd53-d25a349feb68) #### Step 2. \[일부 페이지] 클릭하고 팝업을 노출할 페이지의 하위 주소 입력 후 저장하면 됩니다. 대표 도메인 주소를 제외한 '/하위주소' 형태로만 입력해 주세요.
페이지별 하위 주소 확인하는 방법 대표 도메인으로 접속하여 팝업을 노출하고 싶은 페이지로 이동 후 인터넷 주소창에서 하위 주소를 확인할 수 있습니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FVObOLvIYgABkFhPn0jqZ%2Fimage.png?alt=media\&token=315f80bd-7fa9-4a68-b993-3022589a00b4)
하위 주소 없는 대표 도메인(홈) 접속 시에만 팝업 노출하는 방법 페이지 설정 우측 \[+ 추가] 클릭 후 \[홈]을 추가하신 후 일치로 설정하고 저장하면 됩니다. ![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FjD5rEGPx047EQHzHLrS1%2F%ED%99%88%EC%9C%BC%EB%A1%9C.png?alt=media\&token=d217cd7a-3678-4785-b30e-f7f206c2e69d)
![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FxOVba5sXnVcOKA0zYLGq%2Fimage.png?alt=media\&token=ea8962af-912c-4272-9f6c-606944c79a59) {% hint style="info" %} 코드앤버터 서비스 이용에 대한 자세한 사항은 코드앤버터로 문의해 주시기 바랍니다. * [**코드앤버터 홈페이지**](https://www.codenbutter.com) * [**코드앤버터 안내서**](https://docs.codenbutter.com/) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.sixshop.com/learn-sixshop/store-design/develop/codenbutter.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.