모바일 쇼핑몰에도 주요 공지 및 모바일 쇼핑몰 이용 고객만을 위한 이벤트 팝업 등을 등록할 수 있어요.
자세히 알아보기
모바일 쇼핑몰 팝업 설정 방법
- 으로 이동해 주세요.
- 모바일(탭)을 클릭해 주세요.
- '배너/팝업 목록' 에 있는 '등록' 버튼을 클릭하세요.
- '배너/팝업 설정' 페이지에서 '이미지 표시설정' 항목을 '팝업창으로 표시' 로 선택해 주세요.
- 기본 설정
1) 제목 : 팝업 관리를 위한 제목을 입력해 주세요. 입력한 제목은 모바일 쇼핑몰 팝업에 노출되지 않아요.
2) 기간설정 : 팝업을 노출할 기간을 설정해 주세요.. 노출 기간이 종료되면 자동으로 팝업 노출이 종료돼요.
3) 진행여부: 진행 여부를 '진행' 으로 설정해야 모바일 쇼핑몰에 팝업이 노출돼요. - 디자인 설정
1) 상세 이미지 : 팝업에 표시할 이미지를 등록해 주세요. 이미지는 가로 사이즈가 최소 320px 이상인 것을 권장해요.
2) 링크 URL : 상세 이미지를 모바일에서 터치했을 때 연결될 URL을 입력해 주세요.
3) 이미지 표시 설정 : '팝업창으로 표시'를 선택하고 '팝업형/풀스크린형' 중 원하는 형식을 선택해 주세요.
4) 창닫기 방법 : 팝업 창의 '닫기' 버튼은 기본으로 노출되며, 부가적인 창닫기 방식을 선택하여 추가할 수 있어요. - 설정 완료 후 화면 아래에 있는 '저장' 버튼을 클릭해 주세요.
Info
팝업형 선택 시 팝업이 노출될 특정 위치를 설정하기 때문에 모바일 기기별 해상도에 따라 팝업 노출 위치가 중앙이 아닐 수 있어요. 이는 별도 디자인 수정이 불가하므로 모바일 기기별 해상도와 상관없이 팝업이 중앙에 노출되게 하려면 풀스크린형 팝업을 사용해 주세요.
디자인 소스 수정 방법
- 으로 이동해 주세요.
- '모바일(탭)' 을 클릭한 뒤, 디자인 보관함 목록에 있는 모바일 쇼핑몰 디자인 중에서 수정할 스킨 디자인의 '편집' 버튼을 클릭해 주세요.
- 스마트디자인 편집창에서 '전체화면보기(탭) > 레이아웃(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 필드 항목 값을 확인해 주세요.