Help Center
카페24 소식
[주문관리] 빠른결제 기능 (카페24페이먼츠, KSNET, LG U+ PG 이용고객 대상) - HTML/CSS
2017-05-03
안녕하세요. 카페24 운영도우미 입니다.
자세한 내용은 아래를 참조해주세요.
※ 아래 링크의 공통 CSS 파일이 반드시 존재해야 정상 노출되므로 없는 몰의 경우 먼저 추가해주시기 바랍니다.
■ PC 쇼핑몰 - 스마트 디자인
1. 주문서작성 화면
1) 수정
- 위치 : 주문 (order) > 주문서작성 (orderform.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
##상단 생략## <!-- 결제수단 --> ##하단 생략## |
.gLabel { display:inline-block; } .gLabel label { margin-right:20px; line-height:22px; } .ec-order-payment-card { margin:10px 20px; } .ec-order-payment-card .ec-base-table table { margin-top:20px; } .ec-order-payment-card .ec-base-table .ec-base-help { display:inline-block; vertical-align:middle; } .ec-order-payment-card .cardSelect { width:150px; } .ec-order-payment-card .cardMethod { display:inline-block; margin:2px 0 0 7px; } .ec-order-payment-card .cardMethod .gLabel { margin:0 7px 0 0; } .ec-order-payment-card .btnNormal { display:inline-block; margin:0 0 2px 0; line-height:12px; padding:5px 7px 5px 7px; border:1px solid #b4b4b4; border-radius:2px; font-family:돋움,Dotum; font-size:12px; text-decoration:none; color:#000; background-color:#fff; } .ec-order-payment-card .pgBanner img { max-width:100%; height:auto; } .ec-order-payment-card .paymentAgree { border:1px solid #d7d5d5; } .ec-order-payment-card .paymentAgree .all { position:relative; padding:10px 70px 10px 10px; font-weight:bold; background:#fbfafa; } .ec-order-payment-card .btnToggle { position:absolute; top:10px; right:10px; font-size:12px; line-height:18px; color:#707070; outline:0; background:none; } .ec-order-payment-card .btnToggle:after { display:inline-block; content:""; width:9px; height:5px; margin:-2px 0 0 4px; vertical-align:middle; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow2.gif") no-repeat 0 0; } .ec-order-payment-card .paymentAgree .detail { display:none; padding:10px 20px; border-top:1px solid #e9e9e9; } .ec-order-payment-card .paymentAgree.selected .detail { display:block; } .ec-order-payment-card .paymentAgree .check { margin:6px 0; } .ec-order-payment-card .view { color:#aaa; } |
■ 모바일 쇼핑몰 - 스마트 디자인
1. 주문서작성 화면
1) 수정
- 위치 : 주문 (order) > 주문서작성 (orderform.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
##상단 생략##
##하단 생략## |
label { margin:0; display:inline-block; min-height:29px; line-height:29px; vertical-align:middle; } input[type="radio"], input[type="checkbox"] { margin:0 7px 0 0; } .ec-order-payment-card .cardSelect { width:98%; } .ec-order-payment-card .pgBanner img { max-width:100%; height:auto; } .ec-order-payment-card .ec-base-help { margin:6px 0 5px 14px; } .ec-order-payment-card .paymentAgree { margin:-1px 0 0; border:1px solid #d5d5d5; font-size:11px; background-color:#fff; } .ec-order-payment-card .paymentAgree .all { position:relative; padding:0 0 0 9px; font-weight:bold; color:#508bed; } .ec-order-payment-card .paymentAgree .btnToggle { position:absolute; top:50%; right:5px; padding:0; margin:-8px 0 0 0; color:#353535; border:0; font-size:11px; cursor:pointer; outline:0; background:transparent; } .ec-order-payment-card .paymentAgree .btnToggle:after { display:inline-block; content:""; width:10px; height:10px; margin:-2px 0 0; vertical-align:middle; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_arrow_gray.png") no-repeat 0 0; background-size:10px auto; } .ec-order-payment-card .paymentAgree .detail { display:none; padding:0 0 0 22px; border-top:1px solid #e9e9e9; } .ec-order-payment-card .paymentAgree.selected .detail { display:block; } .ec-order-payment-card .paymentAgree.selected .check { position:relative; } .ec-order-payment-card .paymentAgree.selected .check .view { position:absolute; top:50%; right:14px; padding:0; margin:-8px 0 0 0; text-decoration:underline; color:#757575; border:0; font-size:11px; cursor:pointer; background:transparent; } |
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.