> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/admin/contents/popup.md).

# 팝업/배너 관리

팝업/배너 관리에 대해 알아봅니다.

## 팝업/배너 란?

팝업과 배너를 사용하여 사이트를 이용하는 이용자에게 이벤트 정보, 공지 등의 내용을 전달할 수 있습니다.\
팝업/배너의 형태와 크기, 노출할 페이지, 기간, 노출 기기 등 다양하게 설정이 가능합니다.

팝업/배너 등록 방법은 아래 내용을 참고 부탁드립니다.

## 1. 팝업 등록하기

팝업을 통해 사이트를 이용하는 이용자에게 정보를 전달할 수 있습니다.\
팝업은 페이지 중앙에 노출이 되며, 여러개의 팝업 등록 시 최근 등록한 팝업이 가장 위에 자리 잡게 됩니다.

1-1. **\[관리자페이지 > 운영관리 > 콘텐츠]**의 팝업/배너 관리에 들어갑니다.

1-2. 오른쪽 위 **\[팝업/배너 등록]** 버튼을 클릭합니다.

1-3. 아래 표를 참고하여 팝업을 등록합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F1eZsI5b8jQnTZXfA0rGB%2F1_%ED%8C%9D%EC%97%85_%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0.png?alt=media&amp;token=1cbd7b09-789d-40e8-98d4-36311e26f055" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="134">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>노출 형태</strong></td><td>팝업을 선택합니다</td></tr><tr><td><strong>제목</strong></td><td><p>관리를 위한 이름을 입력합니다.</p><ul><li>최대 50자까지 입력 가능</li></ul></td></tr><tr><td><strong>노출 상태</strong></td><td>팝업의 노출 여부를 선택합니다.</td></tr><tr><td><strong>기간</strong></td><td><p>팝업이 노출 될 시작 일자와 종료 일자를 선택합니다.</p><ul><li>연/월/일/시간 단위까지 지정 가능</li></ul></td></tr><tr><td><strong>노출 환경</strong></td><td>팝업을 노출 할 환경을 선택합니다.</td></tr><tr><td><strong>노출 페이지</strong></td><td><p>팝업을 노출할 페이지를 선택합니다.<br><br><strong>홈 화면</strong><br>사이트의 홈페이지에 노출이 됩니다.</p><hr><p><strong>웹페이지</strong><br>사이트 내 생성한 페이지 중 선택적으로 노출을 합니다.</p><hr><p><strong>상품페이지</strong><br>카테고리 단위로 선택이 가능하며, 해당 카테고리 속 상품의 상세페이지에 노출이 됩니다.</p></td></tr><tr><td><strong>이미지</strong></td><td><p>팝업에 등록할 이미지를 선택합니다.<br><br><strong>데스크탑 이미지</strong><br><strong>권장 해상도</strong>: 600 x 600<br><strong>최소 해상도</strong>: 350 x 350px<br><strong>최대 해상도</strong>: 1000 x 650px<br><strong>파일형식</strong>: PNG, JPG</p><ul><li>최대 1개 까지 첨부 가능</li><li>2MB 미만의 확장자 PNG, JPG 파일만 업로드가 가능.</li></ul><hr><p><strong>모바일 이미지</strong><br><strong>권장 해상도</strong>: 350 x 350<br><strong>최대 해상도</strong>: 1920 x 1080px 이하<br><strong>파일형식</strong>: PNG, JPG</p><ul><li>해상도 350 x 350 고정</li><li>최대 1개 까지 첨부 가능</li><li>2MB 미만의 확장자 PNG, JPG 파일만 업로드가 가능</li></ul></td></tr><tr><td><strong>URL</strong></td><td><p>이미지 클릭 시 이동이 될 URL을 입력합니다.</p><ul><li>미 입력 시 페이지 이동 불가</li></ul></td></tr><tr><td><strong>팝업 하단 닫기 설정</strong></td><td>팝업 하단에 노출 할 닫기 여부를 선택합니다.</td></tr></tbody></table>

## 2. 배너 등록하기

배너 통해 사이트 상단에 정보를 노출 할 수있습니다.

{% hint style="info" %}
배너 등록 시 최신 순으로 아래에 적용 됩니다.
{% endhint %}

2-1. **\[관리자페이지 > 운영관리 > 콘텐츠]**&#xC758; 팝업/배너 관리에 들어갑니다.

2-2. 오른쪽 위 **\[팝업/배너 등록]** 버튼을 클릭합니다.

2-3. 아래 표를 참고하여 배너를 등록합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FVSL4IlLXi0LCoebb4pvI%2F2_%EB%B0%B0%EB%84%88_%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0.png?alt=media&amp;token=7ccaac1a-5803-4ef0-acdc-b2b82aa95132" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="134">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>노출 형태</strong></td><td>배너를 선택합니다</td></tr><tr><td><strong>제목</strong></td><td><p>관리를 위한 이름을 입력합니다.</p><ul><li>최대 50자까지 입력 가능</li></ul></td></tr><tr><td><strong>노출 상태</strong></td><td>배너의 노출 여부를 선택합니다.</td></tr><tr><td><strong>기간</strong></td><td><p>팝업이 노출 될 시작 일자와 종료 일자를 선택합니다.</p><ul><li>연/월/일/시간 단위까지 지정 가능</li></ul></td></tr><tr><td><strong>노출 환경</strong></td><td>팝업을 노출 할 환경을 선택합니다.</td></tr><tr><td><strong>노출 페이지</strong></td><td><p>팝업을 노출할 페이지를 선택합니다.<br><br><strong>홈 화면</strong><br>사이트의 홈페이지에 노출이 됩니다.</p><hr><p><strong>웹페이지</strong><br>사이트 내 생성한 페이지 중 선택적으로 노출을 합니다.</p><hr><p><strong>상품페이지</strong><br>카테고리 단위로 선택이 가능하며, 해당 카테고리 속 상품의 상세페이지에 노출이 됩니다.</p></td></tr><tr><td><strong>이미지</strong></td><td><p>팝업에 등록할 이미지를 선택합니다.<br><br><strong>데스크탑 이미지</strong><br><strong>권장 해상도</strong>: 1920 x 90<br><strong>최소 높이</strong>: 50px<br><strong>최대 높이</strong>: 120px<br><strong>파일형식</strong>: PNG, JPG</p><ul><li>최대 1개 까지 첨부 가능</li><li>2MB 미만의 확장자 PNG, JPG 파일만 업로드가 가능.</li></ul><hr><p><strong>모바일 이미지</strong><br><strong>권장 해상도</strong>: 360 x 50<br><strong>최소 높이</strong>: 50px<br><strong>최대 높이</strong>: 120px<br><strong>파일형식</strong>: PNG, JPG</p><ul><li>좌우 30px의 여백을 권장</li><li>최대 1개 까지 첨부 가능</li><li>2MB 미만의 확장자 PNG, JPG 파일만 업로드가 가능</li></ul></td></tr><tr><td><strong>URL</strong></td><td><p>이미지 클릭 시 이동이 될 URL을 입력합니다.</p><ul><li>미 입력 시 페이지 이동 불가</li></ul></td></tr><tr><td><strong>색상</strong></td><td>닫기 버튼의 배경 및 버튼 색상을 설정합니다.</td></tr></tbody></table>

## 3. 팝업/배너 관리하기

생성한 팝업과 배너는 팝업/배너 리스트를 통해 확인이 가능합니다.

현재 노출 상태 및 제목 기간 등 현재 팝업과 배너의 상태를 확인 할 수 있으며, 기간 종료 등의 이유로 사용이 되지않는 팝업을 삭제할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FRi3OT5lckk6V0LNFejUn%2F3_%ED%8C%9D%EC%97%85_%EB%B0%B0%EB%84%88_%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0.png?alt=media&amp;token=91a5c4f6-21ab-45da-9fc1-8e4829ce39b5" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="207">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>선택 삭제</strong></td><td>등록한 팝업/배네를 삭제합니다.</td></tr><tr><td><strong>노출 상태</strong></td><td>팝업/배너의 노출 상태를 표시 합니다.</td></tr><tr><td><strong>노출 형태</strong></td><td>생성한 팝업/배너의 형태를 표시합니다.</td></tr><tr><td><strong>제목</strong></td><td>관리를 위한 제목이 표시가 됩니다.</td></tr><tr><td><strong>기간</strong></td><td>팝업/배너의 노출 기간을 표시합니다.</td></tr><tr><td><strong>노출 환경</strong></td><td>팝업/배너가 노출 되는 환경을 표시합니다.</td></tr><tr><td><strong>노출 페이지</strong></td><td>팝업/배너가 노출이 되는 페이지를 표시합니다.</td></tr><tr><td><strong>설정하기</strong></td><td><p>팝업과 배너의 설정을 변경합니다.<br><br><strong>편집하기</strong><br>팝업/배너의 이름,기간, 이미지 등을 수정할 수 있습니다.</p><hr><p><strong>삭제하기</strong><br>팝업/배너를 삭제합니다.</p><ul><li>삭제 된 팝업/배너는 복구 불가능</li></ul></td></tr></tbody></table>