# 팝업창 등록

**✅ 팝업유형에 따라 설정하는 항목이 상이합니다.**

## 기본정보

<figure><img src="/files/X3ni9gVqIdIcf8L1gqCp" alt=""><figcaption><p>&#x3C;기본정보></p></figcaption></figure>

**① 쇼핑몰**\
팝업창을 등록하는 쇼핑몰을 선택합니다.

**② 팝업번호**\
팝업창 등록 시 자동으로 생성되는 고유한 번호입니다.

**③ 팝업 ID** <img src="/files/c5P3iKJGqCUJJ1rP0j0d" alt="" data-size="line">\
API 호출 및 조회가 가능하도록 팝업 ID를 지정할 수 있습니다. (중복확인 필수)

**④ 팝업명**\
등록하는 팝업창의 이름을 입력합니다.\
팝업창 이름은 내부 관리용으로 사용됩니다.

**⑤ 플랫폼 구분**\
팝업창이 노출되는 플랫폼을 설정할 수 있습니다.

**⑥ 노출여부**\
등록하는 팝업창 노출 여부를 설정합니다.&#x20;

**⑦ 노출 설정**\
등록하는 팝업창이 노출되는 기간을 설정할 수 있습니다.

* 항상 열림 : 노출기간에 제한없이 팝업창이 항상 노출됩니다.&#x20;
* 특정 기간 동안 열림 : 설정한 기간 동안에만 팝업창이 노출됩니다.&#x20;
* 특정 시간 동안 열림 : 설정한 기간 동안의 특정 시간대에만 팝업창이 노출됩니다.

**⑧ 오늘 하루 보이지 않음**\
**'**&#xC0AC;용'으로 설정하면, 팝업창 하단 영역에 ‘오늘 하루 보이지 않음’ 버튼이 팝업창 옵션으로 노출됩니다.

{% hint style="warning" %}
오늘 하루 보이지 않음 : 동일한 날 쇼핑몰에 재 방문한 경우, 해당 팝업창이 (오늘)하루동안 재노출되지 않도록 제공되는 기능입니다.
{% endhint %}

**⑨ 팝업유형**\
등록하는 팝업창의 유형을 '일반 팝업'과 '멀티 팝업' 중에서 선택해 주세요.&#x20;

**⑩ 팝업 내용**\
'일반 팝업'의 팝업 내용을 에디터 기능으로 직접 입력하거나, 팝업내용을 이미지로 제작하여 등록할 수 있습니다.

{% hint style="danger" %}
'멀티 팝업'은 팝업 내용 설정 항목이 노출되지 않습니다.\
'멀티 팝업' 의 팝업 내용은 '[팝업 효과 설정](#undefined-4)' 항목에서 등록합니다.
{% endhint %}

## 노출페이지 설정

### 공통설정

<figure><img src="/files/PqNxedf0msNTiw1CFJzY" alt=""><figcaption><p>&#x3C;노출페이지 설정 - 공통설정></p></figcaption></figure>

{% hint style="warning" %}
**공통설정 : 등록하는 팝업창이 모든 플랫폼의 동일한 페이지에 공통으로 노출됩니다.**
{% endhint %}

**① 팝업 노출 페이지**\
**등**록하는 팝업창이 노출될 공통 페이지를 메인, 전시카테고리, 기획전, 상품 상세 중에서 선택할 수 있습니다.

**② 메인**\
쇼핑몰 메인 페이지에 노출합니다.

**③ 전시카테고리**\
전시카테고리 전체 페이지 또는 특정 전시카테고리를 지정하여 노출합니다.

**④ 기획전**\
기획전 전체 페이지 또는 특정 기획전 페이지를 지정하여 노출합니다.\
📍기획전 페이지 지정은 기획전 번호 입력으로 가능합니다.

**⑤ 상품 상세**\
상품 전체 페이지 또는 특정 상품을 조회하여 상품페이지에 노출합니다.

### 개별설정

{% hint style="warning" %}
**등록하는 팝업창을 플랫폼별 특정 페이지에 개별 노출할 수 있습니다.**&#x20;
{% endhint %}

<figure><img src="/files/FgN1BWv5ju9AcqLIIPhO" alt=""><figcaption><p>&#x3C;노출페이지 설정 - 개별설정></p></figcaption></figure>

**① 팝업 노출 페이지**\
등록하는 팝업창이 노출될 플랫폼과 개별 페이지를 각각 설정할 수 있습니다.

**②** \[관리] 버튼을 클릭하면 나타나는 '팝업 노출 페이지 관리' 창에서 새로운 팝업창 노출 페이지를 직접 등록 하고 수정 및 삭제할 수 있습니다.\
📍팝업 노출 페이지 등록 및 관리는 PC와 모바일 플랫폼 각각 설정해야 해요.

**③** 노출 페이지를 선택하고 파라메터를 입력하면, 특정 페이지에 팝업창을 노출할 수 있습니다.\
📍\[행 추가] 버튼을 클릭하면, 다른 특정 페이지에 동일한 팝업창을 추가 노출할 수 있어요.

{% hint style="danger" %}
사용중인 쇼핑몰 스킨에 따라 노출 페이지 경로가 상이한 점을 참고해 주세요.\
쇼핑몰에서 팝업창을 노출할 페이지 주소를 먼저 확인하고, 제공된 노출 페이지를 선택하거나 신규 노출 페이지를 등록해 활용합니다.\
\
\
**페이지 별 파라메터 값**\
쇼핑몰 도메인과 페이지 URL 다음에 표시되는 '**?productNo=00000**', '**?categoryNo=00000**' 으로 확인합니다. \
\
예) 오로라 개별형 스킨 사용 쇼핑몰의 A카테고리 페이지 팝업창 노출\
&#x20;     \- 쇼핑몰 해당 카테고리 페이지 주소 : \
&#x20;        **http\:// abcde.com**<mark style="color:green;">**/pages/product/product-list.html**</mark><mark style="color:red;">**?categoryNo=00001**</mark>\
&#x20;     \- 노출 페이지 선택 : <mark style="color:green;">**/pages/product/product-list.html**</mark>\
&#x20;     \- 파라메터 입력 : <mark style="color:red;">**?categoryNo=00001**</mark><br>
{% endhint %}

## PC웹 / 모바일웹(앱)

<figure><img src="/files/2E545isYkRfP7JfQsFrm" alt=""><figcaption><p>&#x3C;PC웹 / 모바일웹(앱)></p></figcaption></figure>

**① 팝업창 종류**\
등록하는 팝업창이 노출되는 형태인 팝업창 종류를 선택합니다.

* 고정 레이어창 : 이동이 불가한 팝업창
* 상단 고정 레이어창: 브라우저 상단에 띠배너 형식으로 노출되며 이동이 불가한 팝업창\
  📍'일반 팝업' 유형만 설정 가능
* 이동 레이어창 : 이동이 가능한 팝업 창
* 윈도우 팝업창 : 새로운 윈도우창에서 열리는 팝업창

**② 창크기**\
팝업창 사이즈를 설정합니다.

* 팝업창 사이즈 단위를 'PIXEL'과  '%' 중에서 선택할 수 있습니다.&#x20;
* 브라우저 가로 창크기(width)에 맞춰 에디터 이미지가 노출될 수 있도록 설정이 가능합니다.&#x20;
* '멀티 팝업'은 창크기 설정 항목이 노출되지 않습니다.

**③ 창위치**\
팝업창이 노출되는 위치를 지정할 수 있습니다. \
팝업창 위치 기준 계산 단위를 'P'IXEL'과  '%' 중에서 선택할 수 있습니다.&#x20;

* 레이어창 : 브라우저 기준으로 지정한 위치에노출 됩니다.&#x20;
* 윈도우팝업창 : 모니터 화면을 기준으로 지정한 위치에 노출 됩니다.&#x20;

**④ 배경색상**\
팝업창 배경색상을 컬러 피커를 활용해 설정할 수 있습니다.\
📍 '멀티 팝업'은 배경색상 설정 항목이 노출되지 않습니다.

**⑤** 모바일웹 및 모바일앱은 PC웹과 동일한 설정 항목으로 적용할 수 있습니다.\
📍모바일 플랫폼의 창종류는 '고정 레이어창'과 '상단 고정레이어창'만 선택이 가능한 점을 참고해 주세요.<br>

## 팝업 효과 설정

**✅&#x20;**<mark style="color:green;background-color:yellow;">**멀티 팝업 유형에만 해당하는 설정 항목입니다.**</mark>

<figure><img src="/files/U9pA7O2MPWMdyR7NhxoY" alt=""><figcaption><p>&#x3C;팝업 효과 설정></p></figcaption></figure>

**① 이미지 이동방법** \
멀티 팝업창에서 팝업 내용으로 등록할 이미지의 이동방법을 설정할 수 있습니다.&#x20;

**② 이미지 이동속도** \
멀티 팝업창에서 팝업 내용으로 등록할이미지의 이동속도를 설정할 수 있습니다.&#x20;

**③ 이미지 개수** \
멀티 팝업창에 등록할 팝업 내용인 이미지 개수를 설정할 수 있습니다. \
등록하는 작은 이미지에 따라 큰 이미지가 변경되어 보이는 효과로 노출됩니다.&#x20;

**④ 큰 이미지 크기** \
멀티 팝업창 메인상단에 노출되는 큰 이미지의 사이즈를 지정할 수 있습니다.&#x20;

**⑤ 작은 이미지 크기** \
가로 사이즈는 큰 이미지 가로 크기에 작은 이미지 개수로 나눈 사이즈가 자동 입력되며, 세로 사이즈만 입력할 수 있습니다.&#x20;

**⑥ 팝업 이미지 설정** \
선택한 이미지 개수에 맞춰 작은 이미지 선택 시 큰 이미지가 변경되어 보이도록 이미지 개수 별로 각각 등록할 수 있습니다.&#x20;

* \[파일찾기] 버튼을 클릭해 등록하거나, 이미지호스팅 URL 입력을 통해 등록이가능합니다.&#x20;
* 큰 이미지 클릭 시 원하는 페이지로 랜딩 되도록 링크 주소 입력이 가능하며, 랜딩 페이지 이동 방식을 '현재창'과 '새 창' 중 설정할 수 있습니다.


---

# 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://nhn-commerce.gitbook.io/shopby_enterprise_manual/appearance/popup/registration.md?ask=<question>
```

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.