> 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-manager/add-ons/popup.md).

# 팝업

## 목차

* [팝업이란?](#id-1)
* [팝업 활용하기](#id-2)
  * [팝업 만들기](#id-2-1)
  * [팝업 순서 변경하기](#id-2-2)
  * [팝업 설정하기](#id-2-3)

## 1. 팝업이란?

\[관리하기 > 애드온 > 팝업]에서 추가하여 사용할 수 있으며 내 사이트에 처음 들어왔을 때 화면 가장 상단에 보여줄 이미지를 등록할 수 있습니다. 이벤트, 공지사항 등 자유롭게 활용해보세요.

![](/files/-MBC1xutannx1C27ZY9D)

## 2. 팝업 활용하기 

{% hint style="info" %}
[외부 팝업 기능(코드앤버터)](/learn-sixshop/store-design/develop/codenbutter.md)를 활용하면 더욱 확장된 기능의 팝업을 설정해 보실 수 있습니다. 
{% endhint %}

### 2-1. 팝업 만들기

애드온 메뉴에서 '팝업' 애드온을 설치 후 '슬라이드 추가하기' 버튼을 통해 팝업을 만들 수 있습니다.\
또한 여러 개의 슬라이드를 추가하면 자동으로 팝업이 슬라이드 형태로 노출됩니다. 

아래는 새롭게 추가할 슬라이드의 정보를 입력하는 화면입니다.

![](/files/-MBC23hZ5EnmhUeMh2Q6)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>이름</strong></p><p>다른 슬라이드와 헷갈리지 않고 잘 알아볼 수 있도록 이름을 정해주세요. (예시: 오픈 기념 할인 이벤트 팝업)</p>                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>이미지</strong></p><p>상점 메인에 팝업으로 노출되는 이미지입니다. 원하시는 팝업 사이즈보다 큰 사이즈로 올려주세요.</p>                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>링크 주소</strong></p><p>이미지를 클릭 했을 때 열리는 링크입니다.<br></p><ul><li><strong>URL</strong><br>외부 도메인 주소로 이동합니다.<br></li><li><strong>페이지</strong><br>머리글, 바닥글 메뉴에있는 페이지로 이동합니다.<br></li><li><strong>상품</strong><br>상점 내에 있는 상품을 선택해 이동합니다.<br></li><li><strong>게시판</strong><br>게판의 게시글로 이동합니다.<br></li><li><strong>블로그</strong><br>블로그의 게시글로 이동합니다.<br></li><li><strong>이메일</strong><br>입력한 이메일 주소로 메일을 전송할 수 있습니다.<br></li><li><strong>전화번호</strong><br>입력한 번호로 전화를 걸 수 있습니다.</li></ul> |
| <p><strong>새 탭에서 열기</strong></p><p>링크를 클릭할 때 새로운 탭에서 열 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>운영 기간</strong></p><p>팝업이 노출되어 있는 기간을 설정할 수 있습니다. (예시: 2020.01.01 00:00 \~ 2020.12.31 23:59)</p>                                                                                                                                                                                                                                                                                                                                                                               |
| <p><strong>상태</strong></p><p>팝업을 공개하거나 비공개할 수 있습니다. 운영기간 설정시 비활성화 됩니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                               |

슬라이드가 정상적으로 추가되면 아래와 같이 목록에서 확인할 수 있습니다.

![](/files/-MBC2C6QvcM4ePRdpc0q)

추가한 이미지 오른쪽의 '설정하기' 버튼을 누르면 슬라이드의 설정값을 변경/삭제 할 수 있습니다.

### 2-2. 팝업 순서 변경하기

슬라이드 왼쪽 아이콘을 클릭 하고 위 아래로 끌어서 순서를 변경할 수 있습니다.

위에 있는 슬라이드부터 노출됩니다.

![](/files/-MBC2Lcg5e5gnf-2SFTl)

![](/files/-MBC2Nvc5I4HTGmgxetp)

### 2-3. 팝업 설정하기

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

| 설정 항목                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------- |
| <p><strong>PC 너비</strong></p><p>데스크탑에서 팝업이 노출되는 너비입니다. 공란 혹은 0일 경우 노출되지 않습니다.</p>                                   |
| <p><strong>PC 위치</strong></p><p>데스크탑에서 팝업이 상점에 노출되는 기준점을 왼쪽/가운데/오른쪽 중 선택한 후 기준점과 팝업 사이 여백을 설정하여 위치를 조정할 수 있습니다.</p> |
| <p><strong>모바일 너비</strong><br>모바일에서 팝업이 노출되는 너비입니다. 공란 혹은 0일 경우 노출되지 않습니다.</p>                                      |
| <p><strong>모바일 위치</strong><br>모바일에서 팝업이 상점에 노출되는 기준점을 왼쪽/가운데/오른쪽 중 선택한 후 기준점과 팝업 사이 여백을 설정하여 위치를 조정할 수 있습니다.</p>    |
| <p><strong>오늘 하루 안 보기</strong></p><p>사용 시 '오늘 하루 안 보기' 버튼이 노출됩니다. </p>                                              |