> 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 %} ![](/files/ZPzvM3NwLz41juQKp9tj) ## 2. 코드앤버터 이용하기 {% hint style="info" %} 코드앤버터 서비스 이용에 대한 자세한 사항은 코드앤버터로 문의해 주시기 바랍니다. * [**코드앤버터 홈페이지**](https://www.codenbutter.com) * [**코드앤버터 안내서**](https://docs.codenbutter.com/) {% endhint %} ### 2-1. 코드앤버터로 팝업 만들기 #### Step 1. [코드앤버터](https://www.codenbutter.com/) 가입 후 웹사이트를 추가해 주세요. #### Step 2. \[팝업 만들기]를 클릭하고 마음에 드는 템플릿 선택해 주세요. ![](/files/z4gTmcHaMRoaniqcf144) #### Step 3. 모바일/데스크톱 버전의 디자인을 자유롭게 수정해 주세요. ![](/files/68GSRlLOkyjkv5nViIqU) #### Step 4. \[공개 설정]을 클릭하여 미리 보기 후 공개해 주세요. 공개 후 스크립트 추가 안내 팝업이 노출되면 \[연동하기]를 클릭하여 아래의 [2-2. 코드앤버터 연동하기](#id-2-2) 과정을 이어서 진행해 주세요. ![](/files/kcLEvFxV08eVLKkTLTFR) ### 2-2. 코드앤버터 연동하기 #### Step 1. 스크립트 설치의 수동 설치 `HTML`의 코드를 복사해 주세요. {% hint style="info" %} 팝업을 통하여 스크립트 설치로 바로 이동하지 못하였다면 \[코드앤버터 > 웹 사이트 설정 > 스크립트 설치]의 경로로 스크립트 확인이 가능합니다. {% endhint %} ![](/files/9sbnXuY4od2wy9QE3ilW) #### Step 2. [\[식스샵 > 애드온\]](https://www.sixshop.com/dashboard/add-ons-all)에서 코드 삽입 애드온을 추가해 주세요. ![](/files/mF88e5WZr3gCQLmO2Cob) #### Step 3. [\[식스샵 > 애드온 > 코드삽입\]](https://www.sixshop.com/dashboard/add-ons-codeInjection) 공통 \영역에 복사한 스크립트를 붙여 넣고 저장하면 됩니다. 변경 사항을 저장하면 팝업 연동이 완료되며 상점 내 모든 페이지에 팝업이 노출됩니다. 상점 내 일부 페이지에서만 팝업을 노출하고 싶다면 아래의 [2-3. 일부 페이지에만 팝업 노출하기](#id-2-3) 과정을 이어서 진행해 주세요. ![](/files/ak0HbHKQIzxW9XQkWU0a) ### 2-3. 일부 페이지에만 팝업 노출하기 #### Step 1. \[코드앤버터 > 추가한 팝업 선택 > 노출 페이지]를 클릭해 주세요. ![](/files/6t6M4Ibbu9eT3JtiGMsR) #### Step 2. \[일부 페이지] 클릭하고 팝업을 노출할 페이지의 하위 주소 입력 후 저장하면 됩니다. 대표 도메인 주소를 제외한 '/하위주소' 형태로만 입력해 주세요.
페이지별 하위 주소 확인하는 방법 대표 도메인으로 접속하여 팝업을 노출하고 싶은 페이지로 이동 후 인터넷 주소창에서 하위 주소를 확인할 수 있습니다. ![](/files/kzfr72hoisyZAPaelNHr)
하위 주소 없는 대표 도메인(홈) 접속 시에만 팝업 노출하는 방법 페이지 설정 우측 \[+ 추가] 클릭 후 \[홈]을 추가하신 후 일치로 설정하고 저장하면 됩니다. ![](/files/ZmSQpKTgCgKHCRFvFt8x)
![](/files/9Mu4beb2ZJDuDpXOKKF9) {% hint style="info" %} 코드앤버터 서비스 이용에 대한 자세한 사항은 코드앤버터로 문의해 주시기 바랍니다. * [**코드앤버터 홈페이지**](https://www.codenbutter.com) * [**코드앤버터 안내서**](https://docs.codenbutter.com/) {% endhint %}