안녕하세요, 카페24 운영도우미 입니다.

모바일쇼핑몰에서 메인화면에 팝업을 띄울 수 있도록 팝업관리 기능이 추가되었습니다.

자세한 내용은 아래를 참조해 주세요.

---

■ 적용일자 : 2013-05-02 (월)

■ 업데이트 내용

모바일쇼핑몰에서도 팝업관리가 가능하도록 업데이트되었습니다.

1. 어드민 팝업설정
'쇼핑몰어드민 > 디자인관리 > 스마트디자인 > 디자인기능설정 > 팝업/배너 > 팝업설정' 메뉴로 이동하신 후
구분을 모바일쇼핑몰로 선택하시면 모바일 팝업 설정 및 관리를 하실 수 있습니다.

PC 팝업과는 별도로 설정되며, 실행모드는 [오늘하루 열지 않음] 으로 고정됩니다.
진행 중인 팝업이 여러 개 일 경우, 모바일쇼핑몰 화면에서는 Swipe 기능으로 제공됩니다.

▼ 모바일쇼핑몰 팝업 설정화면



2. HTML 수정

아래와 같이 HTML 및 CSS를 수정하시면 어드민에서 설정한 내용이 모바일쇼핑몰에 정상적으로 적용됩니다.

1) 쇼핑몰 메인(index.html)

[수정 전] <!--@layout(/layout/basic/main.html)--> [수정 후] <!--@layout(/layout/basic/main.html)--> <div module="Popup_Mobile">{$mobile}</div>

2) css > common.css
  - 아래 소스를 추가합니다.

/* 메인 레이어 팝업 */ .mainLayerArea { z-index:10; position:relative; height:0px; } .mMainLayer { position:absolute; left:7px; top:7px; right:7px; border:1px solid #9d9db0; } .mMainLayer .banner { position:relative; overflow:hidden; background-color:#fff; } .mMainLayer ul { position:relative; white-space:nowrap; font-size:0; line-height:0; } .mMainLayer ul img { width:100%; } .mMainLayer li { display:inline; } .mMainLayer .pagenate { position:absolute; left:0px; bottom:5px; width:100%; text-align:center; font-size:0; line-height:0; } .mMainLayer .pagenate button { overflow:hidden; width:9px; height:9px; margin:0 5px 0 0; border:0; background:url("http://img.echosting.cafe24.com/mobileWeb/common/ico_mainlayer_pagenate_off.png") no-repeat 0px 0px; background-size:8px 8px; } .mMainLayer .pagenate button.selected { background-image:url("http://img.echosting.cafe24.com/mobileWeb/common/ico_mainlayer_pagenate_on.png"); } .mMainLayer .pagenate button span { visibility:hidden; font-size:0; line-height:0; } .mMainLayer .option { padding:5px 15px; color:#fff; background-color:#434447; } .mMainLayer .option:after{ content:""; display: block; clear:both; } .mMainLayer .option label { float:left; font-size:12px; } .mMainLayer .option input { margin-right:5px; vertical-align:middle; } .mMainLayer .option button { float:right; padding-right:12px; color:#fff; border:0; font-family:Dotum; cursor:pointer; background:url("http://img.echosting.cafe24.com/mobileWeb/common/ico_mainlayer_close.png") no-repeat right 50%; background-size:10px 9px; }

▼ 모바일쇼핑몰 팝업 예시화면

---

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]