> For the complete documentation index, see [llms.txt](https://help.sixshop.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.sixshop.com/learn-sixshop/store-design/develop/codenbutter.md). # 외부 팝업 기능(코드앤버터) 활용하기 코드앤버터를 통하여 확장된 팝업 기능을 활용해 보세요. ## 목차 * [코드앤버터는?](#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 %}