> For the complete documentation index, see [llms.txt](https://nhn-commerce.gitbook.io/shopby_enterprise_manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nhn-commerce.gitbook.io/shopby_enterprise_manual/appearance/popup/registration.md).

# 팝업창 등록

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

## 기본정보

<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;
* 큰 이미지 클릭 시 원하는 페이지로 랜딩 되도록 링크 주소 입력이 가능하며, 랜딩 페이지 이동 방식을 '현재창'과 '새 창' 중 설정할 수 있습니다.