Help Center
카페24 소식
[모바일쇼핑몰] 이용안내, 이용약관, 개인정보취급방침 추가 안내
2014-05-13
안녕하세요, 카페24 운영도우미 입니다.
PC 쇼핑몰 하단에 표시되는 이용안내, 이용약관, 개인정보취급방침을 모바일에서도 표시할 수 있도록
기능이 개선되었습니다.
자세한 내용은 아래를 참조해 주세요.
---------------------------------------------------------------------------------------------------
■ 적용일자 : 2014-05-13 (화)
■ 업데이트 내용
쇼핑몰 어드민에서 설정한 '이용안내, 이용약관, 개인정보취급방침' 내용을 모바일 쇼핑몰에도 적용할 수 있도록
개선되었습니다.
아래의 안내에 따라 HTML을 추가해주시면 정상적으로 노출됩니다.
※ 화면추가 방법
- 위치 : 어드민 > 모바일쇼핑몰 > 스마트편집창 > [화면추가] 버튼 클릭
1. 회원(member) > 개인정보취급방침(privacy.html) 화면 추가
▼ 해당 화면에 아래 소스 추가
|
<!--@layout(/layout/basic/layout.html)--> <div class="titleArea"> <h2>개인정보취급방침</h2> </div> <div module="mall_privacy"> <!--@css(/css/module/mall/privacy.css)--> <div class="privacy"> {$privacy_agreement} </div> </div> |
2. CSS > 모듈(module) > 상점정보(mall) >privacy.css 화면 추가
▼ 해당 화면에 아래 소스 추가
|
/** * 개인정보취급방침 */ .xans-mall-privacy { margin:5px 0 0; padding:10px; font-size:12px; line-height:1.5; border:1px solid #b7b7b9; } |
3. 회원(member) > 이용약관(terms_agreement.html) 화면 추가
▼ 해당 화면에 아래 소스 추가
| <!--@layout(/layout/basic/layout.html)-->
<div class="titleArea"> <h2>이용약관</h2> </div> <div module="mall_term"> <!--@css(/css/module/mall/terms.css)--> <div class="agreement"> {$mall_agreement} </div> </div> |
4. CSS > 모듈(module) > 상점정보(mall) > terms.css 화면 추가
▼ 해당 화면에 아래 소스 추가
|
/** * 이용약관 */ .xans-mall-term { margin:5px 0 0; padding:10px; font-size:12px; line-height:1.5; border:1px solid #b7b7b9; } |
5. shopInfo > guide.html 화면 추가
▼ 해당 화면에 아래 소스 추가
| <!--@layout(/layout/basic/layout.html)-->
<div class="titleArea"> <h2>이용안내</h2> </div> <div module="mall_faq"> <!--@css(/css/module/mall/faq.css)--> <!--@js(/js/module/mall/faq.js)--> <dl> <dt>회원가입 안내</dt> <dd>{$member_info}</dd> <dt>주문 안내</dt> <dd>{$order_info}</dd> <dt>결제 안내</dt> <dd>{$payment_info}</dd> <dt>배송 안내</dt> <dd> <ul> <li>배송 방법 : {$shipping_method}</li> <li>배송 지역 : {$shipping_area}</li> <li>배송 비용 : {$shipping_fee}</li> <li>배송 기간 : {$shipping_period}</li> <li>배송 안내 : {$shipping_agreement}</li> </ul> </dd> <dt>교환/반품 안내</dt> <dd>{$product_change_info}</dd> <dt>환불 안내</dt> <dd>{$refund_info}</dd> <dt>기타 안내</dt> <dd>{$etc_info}</dd> </dl> </div> |
6. CSS > 모듈(module) > 상점정보(mall) > faq.css 화면 추가
▼ 해당 화면에 아래 소스 추가
|
/** * 이용안내 */ .xans-mall-faq { margin:5px 0 0; border-bottom:1px solid #b7b7b9; } .xans-mall-faq dt { position:relative; padding:10px 35px 8px 25px; font-size:12px; line-height:1.5; color:#21242d; cursor:pointer; border-top:1px solid #b7b7b9; background-color:#dfdfe1; } .xans-mall-faq dt:before { content:""; position:absolute; left:10px; top:50%; width:0; height:0; margin-top:-4px; border:4px solid transparent; border-left:4px solid #444547; } .xans-mall-faq dt:after { content:""; position:absolute; right:10px; top:50%; width:8px; height:7px; margin-top:-4px; background:url('http://img.echosting.cafe24.com/design/skin/mobile/bg_mall_faq_open.gif') no-repeat 0 0; background-size:100% 100%; } .xans-mall-faq dd { display:none; padding:10px 10px; font-size:12px; line-height:1.5; border-top:1px dotted #9a9a9c; background-color:#f5f5f6; } .xans-mall-faq dd.open { display:block; } .xans-mall-faq dt.open:after { background-image:url('http://img.echosting.cafe24.com/design/skin/mobile/bg_mall_faq_close.gif'); } |
7. JS > 모듈(module) > 상점정보(mall) > faq.js 화면 추가
▼ 해당 화면에 아래 소스 추가
| // 이용안내
$('.xans-mall-faq dt').click(function(){ $(this).toggleClass('open'); $(this).next('dd').toggleClass('open'); }); |
8. 레이아웃(layout) > 기본레이아웃(basic) > 공통레이아웃(layout.html)
▼ 아래와 같이 상단 파란색 소스를 추가합니다.
|
##상단생략 ## <p class="footerTerms"> <a href="/member/terms_agreement.html">이용약관</a> <a href="/member/privacy.html">개인정보취급방침</a> <a href="/shopInfo/guide.html">이용안내</a> </p> <address module="Layout_footer"> 상점명: {$mall_name} 대표전화 : <a href="tel:{$phone}" class="tel">{$phone}</a><br> 주소: {$mall_zipcode} {$mall_addr1} {$mall_addr2}<br> 사업자등록번호: {$company_regno} 통신판매업 신고: {$network_regno}<br> 대표: <a href="mailto:{$email}">{$president_name}</a> 개인정보관리책임자: <a href="mailto:{$cpo_email}">{$cpo_name}</a><br> 호스팅 제공자: 심플렉스인터넷(주) </address> ##하단생략 ## |
9. 레이아웃(layout) > 기본레이아웃(basic) > CSS > layout.css
▼ 아래와 같이 파란색 소스를 추가, 빨간색 소스를 수정해주세요.
|
##상단생략 ## #footer { margin:50px 0 0; } #footer p { padding:0 0 8px; text-align:center; font-size:0; line-height:0; } #footer p a { font-size:11px; line-height:14px; letter-spacing:-1px; color:#212530; font-weight:bold; padding:0 13px; border-left:1px solid #212530; } #footer p a:first-child { border:0 none; padding-left:0; } #footer p a:last-child { padding-right:0; } #footer .footerTerms { padding:15px 10px 0; background:#dfdfdf; } #footer .footerTerms a { color:#555; } #footer address { padding:15px 10px; font-size:11px; line-height:1.5em; color:#434447; background:#dfdfdf; } #footer address a { color:#555; } ##하단생략 ## |
■ 적용화면
---------------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]