콘텐츠 목차
PC 쇼핑몰에 팝업 등록은 어떻게 하나요?
PC쇼핑몰 팝업 등록 방법
- 으로 이동해 주세요.
- '배너/팝업' 메뉴 화면 내 '팝업 목록' 에 있는 '팝업등록' 버튼을 클릭하세요.
- '팝업 설정' 페이지에서 '진행여부' 항목을 '진행' 으로 선택하고,
팝업이 노출될 쇼핑몰 디자인 선택 후 팝업 표시 기간 등을 설정해 보세요.
※ 반드시 현재 사용중인 디자인을 선택해주세요. - '팝업창 디자인' 에서 팝업 제목과 내용을 입력하세요.
- '창닫기 디자인' 에서 항목 설정 후 '저장' 버튼을 클릭합니다.
팝업에 링크 걸기
- 으로 이동해 주세요.
- '배너/팝업' 메뉴 화면 내 '팝업 목록' 에 있는 '팝업등록' 버튼을 클릭하세요.
- '팝업창디자인' 팝업내용에서 +: 더 많은 내용 삽입 클릭 링크삽입으로 이용 가능해요.
모바일 쇼핑몰에 팝업 등록은 어떻게 하나요?
모바일 쇼핑몰 팝업 설정 방법
- 으로 이동해 주세요.
- 모바일(탭)을 클릭해 주세요.
- '배너/팝업 목록' 에 있는 '등록' 버튼을 클릭하세요.
- '배너/팝업 설정' 페이지에서 '이미지 표시설정' 항목을 '팝업창으로 표시' 로 선택해 주세요.
- 기본 설정
1) 제목 : 팝업 관리를 위한 제목을 입력해 주세요. 입력한 제목은 모바일 쇼핑몰 팝업에 노출되지 않아요.
2) 기간설정 : 팝업을 노출할 기간을 설정해 주세요.. 노출 기간이 종료되면 자동으로 팝업 노출이 종료돼요.
3) 진행여부: 진행 여부를 '진행' 으로 설정해야 모바일 쇼핑몰에 팝업이 노출돼요. - 디자인 설정
1) 상세 이미지 : 팝업에 표시할 이미지를 등록해 주세요. 이미지는 가로 사이즈가 최소 320px 이상인 것을 권장해요.
2) 링크 URL : 상세 이미지를 모바일에서 터치했을 때 연결될 URL을 입력해 주세요.
3) 이미지 표시 설정 : '팝업창으로 표시'를 선택하고 '팝업형/풀스크린형' 중 원하는 형식을 선택해 주세요.
4) 창닫기 방법 : 팝업 창의 '닫기' 버튼은 기본으로 노출되며, 부가적인 창닫기 방식을 선택하여 추가할 수 있어요. - 설정 완료 후 화면 아래에 있는 '저장' 버튼을 클릭해 주세요.
- 디자인 소스 수정 방법을 참고하여 디자인을 수정해주세요.
Info
팝업형 선택 시 팝업이 노출될 특정 위치를 설정하기 때문에 모바일 기기별 해상도에 따라 팝업 노출 위치가 중앙이 아닐 수 있어요. 이는 별도 디자인 수정이 불가하므로 모바일 기기별 해상도와 상관없이 팝업이 중앙에 노출되게 하려면 풀스크린형 팝업을 사용해 주세요.
모바일 팝업을 2개이상 노출 하는 방법
- 으로 이동해 주세요.
- 모바일(탭)을 클릭해 주세요.
- '배너/팝업 목록' 에 있는 '등록' 버튼을 클릭하세요.
- 디자인 > 상세 이미지에서 삭제/추가 +하여 추가 가능해요.
- 모바일 팝업 등록이 완료 되면 목록에서 팝업 아이디 확인 후 아래와 같이 소스 수정 시 메인 레이아웃 페이지에 해당 소스를 두 가지 등록 후 확인하신 ID값을 각각 기재하여 주시면 모바일에서 2개의 팝업이 노출돼요.
디자인 소스 수정 방법
- 으로 이동해 주세요.
- '모바일(탭)' 을 클릭한 뒤, 디자인 보관함 목록에 있는 모바일 쇼핑몰 디자인 중에서 수정할 스킨 디자인의 '편집' 버튼을 클릭해 주세요.
- 스마트디자인 편집창에서 '전체화면보기(탭) > 레이아웃(layout) > 기본 레이아웃(basic) > 메인 레이아웃(main.html)'으로 이동해 주세요.
- ▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가해 주세요.
## 상단 생략 ##
<body id="main">
<-- 기존 팝업등록의 소스입니다. 노출 중인 팝업이 없으면 삭제하셔도 무방합니다. -->
<div module="Popup_Mobile">{$mobile}</div>
<-- 기존 팝업등록의 소스입니다.노출 중인 팝업이 없으면 삭제하셔도 무방합니다. -->
<div module="Popup_MultiPopup">
<!--
$banner_popup_no =
※ 노출시킬 팝업의 ID를 숫자로 넣어주세요.
-->
{$popup}
</div>
<div module="Popup_MultiBanner">
<!--
$banner_popup_no =
※ 노출시킬 배너의 ID를 숫자로 넣어주세요.
-->
{$banner} </div>
<div id="wrap">
<!--@import(/layout/basic/sidebar.html)-->
<hr class="layout">
## 하단 생략 ## - HTML 소스 수정을 완료한 뒤 스마트디자인 편집창 위에 있는 '저장' 버튼을 클릭해 주세요.
Info
- 디자인을 수정하여 '메인 레이아웃'이 아닌 다른 레이아웃(예: 공통 레이아웃)을 사용 중일 경우, 해당 레이아웃에 아래 파란색 소스를 추가해 주세요.
- 빨간색 소스 <div module="Popup_Mobile"{$mobile}</div> 가 없을 경우에는 파란색 소스만 추가해 주세요.
팝업 아이디 확인하는 방법
- 으로 이동해 주세요.
- 모바일(탭)을 클릭해 주세요.
- '배너/팝업 목록' 화면 내 등록되어 있는 팝업의 ID 필드 항목 값을 확인해 주세요.
직접 만든 화면으로 팝업을 등록하고 싶어요.
직접 만든 이미지 등록하기
- 으로 이동해 주세요.
- '팝업등록' 버튼을 클릭해 주세요.
- '팝업 설정' 화면 내 '팝업창 디자인' 항목에서 '팝업창 내용 등록 방법' 을 '샘플팝업 이용하여 만들기' 로 선택해 주세요.
- '팝업내용' 항목의 글쓰기 에디터 옵션창에 있는 '[+] 더 많은 내용 삽입' 버튼 클릭 후 '이미지 삽입' 버튼을 클릭하여 PC에 저장된 팝업 이미지를 불러오세요.
- 필요 시 나머지 내용을 입력 및 선택하고 하단의 '저장' 버튼을 클릭해 주세요.
팝업 페이지 생성하기
- 로 이동해 주세요.
- 대표 디자인으로 사용 중인 디자인의 '디자인 편집' 버튼을 클릭해 주세요.
- 스마트디자인 편집창 왼쪽 하단에 있는 '화면추가' 버튼을 클릭해 주세요.
- 저장 경로를 '팝업(popup)'으로 선택하고 원하는 파일명을 입력한 뒤 '저장' 버튼을 클릭해 주세요.
- '전체화면보기(탭) > 팝업(popup) > 입력한 파일명' 에 새로운 페이지가 생성되었는지 확인해 주세요.
- 새로 만든 페이지(.html 파일)를 선택해 주세요.
- HTML 소스를 입력해 팝업을 제작을 완료한 후 '저장' 버튼을 클릭해 주세요.
직접 만든 팝업에 닫기 버튼을 추가하고 싶어요.
팝업에 '닫기 버튼' 생성 방법
- 로 이동해 주세요.
- 대표 디자인으로 사용 중인 디자인의 '디자인 편집' 버튼을 클릭해 주세요.
- 스마트디자인 편집창에서 '전체화면보기(탭) > 팝업(폴더)' 를 클릭해 주세요.
- 직접 만든 팝업 페이지 파일(.html)을 클릭해 주세요.
- 팝업 화면 소스 맨 아래에 '<div module="Popup_Footer">{$footer}<div>' 코드를 추가하면 '닫기 버튼'이 생성돼요.
- 쇼핑몰에서 팝업 내 '닫기' 버튼이 정상적으로 노출되는지 확인해 주세요.
반응형 디자인 이용 중 모바일 팝업 등록 방법
현재 모바일과 PC버전 사용성 개선을 위해 모바일 전용 디자인 '사용안함'으로 설정하신 경우 PC 버전의 팝업은 노출되지 않도록 개선이 되었어요. 모바일 전용 디자인을 '사용안함'으로 설정하면서 팝업을 등록하고자 하시는 경우 앱스토어에서 '스마트 팝업 관리' 앱을 이용해 주세요.
단, ‘스마트 팝업 관리’ 앱에서 쿠폰 발급 알림 기능은 지원되지 않으니 참고해 주세요.