자주 묻는 질문

무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

주문관련

대량구매할인 혜택 정보 노출 방법

글번호 : 1259

대량구매할인 상품의 미리보기 화면/ 상품 상세페이지에 혜택정보를 노출하는 방법에 대해 알아보겠습니다. * 혜택 확인 팝업을 사용하지 않는 경우에만 노출됩니다. * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. << 지원 버전 >> - 주문 2.0 - D4 - 모바일 전체 << 기능 설정 >> 1. [프로모션 > 고객 프로모션 관리 > 할인 프로모션]에서 할인 프로모션 생성 2. [상품관리 > 판매상품 기본관리 > 판매상품 신규 등록/수정]에서 상품할인 설정 > 할인 프로모션 적용 << 가상 태그 >> - 할인 프로모션 타이틀 :  - 할인 프로모션 대량구매 여부 :  - 할인 프로모션 옵션 적용유무 :  - 대량구매 최소 수량조건 :  - 대량구매 최대 수량조건 :  - 할인 프로모션 할인 타입 :  - 대량구매 할인가격 :  - 대량구매 할인율 :

[PC 버전 – 베이직 심플] << 상품 상세 페이지 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 디자인 편집 탭

(빨간색 소스 복사) - 빨간색 소스를 추가해주시면 됩니다. <tr> <th scope="row"><div class="tb-left">쿠폰할인</div></th> <td class="price sell_benefit"> <strong class="MS_option_price">-원</strong> <a href="" class="benefit_btn layer-open"><span>%</span> 혜택확인 <em>▼</em></a> </td> </tr>

<tr> <th scope="row"><div class="tb-left">혜택</div></th> <td class="buy-benefit"> <div class="tb-left"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>   <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서<br>확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </div> </td> </tr>

3. CSS 탭

/* 구매할인 */ #productDetail .buy-benefit { position:relative; } #productDetail .buy-benefit .tit-txt { font-size:12px; color:#000; } #productDetail .buy-benefit .view-wrap { position:relative; } #productDetail .buy-benefit .btn-view { display:inline-block; padding:2px 3px 2px 5px; font-size:12px; color:#000; font-family:"Malgun Gothic"; background: url(/images/common/bg_layer_gray.gif) no-repeat; border:1px solid #e3e3e3; } #productDetail .buy-benefit .btn-view em { display: inline-block; font-size:10px; vertical-align: top; } #productDetail .buy-benefit .view-wrap { display:none; position:absolute; top:30px; left:50%; max-width:186px; margin-left:-208px; padding:15px; background:#fff; border:1px solid #000; z-index:1; } #productDetail .buy-benefit .view-wrap.active { display:block; } #productDetail .buy-benefit .view-wrap .layer-view { font-size:12px; line-height:20px; color:#000; font-weight:bold; } #productDetail .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } #productDetail .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} #productDetail .buy-benefit .view-wrap .layer-view ul li.layer-info { color:#585858; border-top:1px solid #ccc; padding-top:5px; margin-top:5px; font-weight:normal; } #productDetail .buy-benefit .view-wrap .btn-close { position:absolute; right:10px; top:5px; } /* 구매할인 */

4. JS 탭

// 대량구매 혜택 더보기 jQuery('.btn-view').on('click', function(){ jQuery('.view-wrap').addClass('active'); }); jQuery('.view-wrap #view_close').click(function() { jQuery('.view-wrap').removeClass('active'); });

5. 예시 이미지

<< 상품 미리보기 화면 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 미리보기 화면 2. 디자인 편집 탭

<tr> <th scope="row"><div class="tb-left">혜택</div></th> <td class="buy-benefit"> <div class="tb-left"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>   <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서 확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </div> </td> </tr>

3. CSS탭

/* 구매할인 */ #detailpage .buy-benefit { position:relative; max-width:70%; } #detailpage .buy-benefit li { list-style-type : none } #detailpage .buy-benefit .tit-txt { font-size:12px; color:#000; padding-right:64px; max-width:75%; display: block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } #detailpage .buy-benefit .view-wrap { position:relative; } #detailpage .buy-benefit .btn-view { display:inline-block; padding:2px 3px 2px 5px; font-size:12px; color:#000; font-family:"Malgun Gothic"; background: url(/images/common/bg_layer_gray.gif) no-repeat; border:1px solid #e3e3e3; width:51px; top:-3px; right:0px; position:absolute; } #detailpage .buy-benefit .btn-view em { display: inline-block; font-size:10px; vertical-align: top; } #detailpage .buy-benefit .view-wrap { display:none; position:absolute; top:30px; right:0%; width:186px; margin-left:-186px; padding:15px; background:#fff; border:1px solid #000; z-index:1; } #detailpage .buy-benefit .view-wrap.active { display:block; } #detailpage .buy-benefit .view-wrap .layer-view { font-size:12px; line-height:20px; color:#000; font-weight:bold; white-space:normal; word-break:break-word; } #detailpage .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } #detailpage .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} #detailpage .buy-benefit .view-wrap .layer-view ul li.layer-info { margin-top:5px; color:#585858; border-top:1px solid #ccc; padding-top:5px; font-weight:normal; } #detailpage .buy-benefit .view-wrap .btn-close { position:absolute; right:10px; top:5px; } /* 구매할인 */

4. 예시 이미지

[PC 버전 – 모던 심플] << 상품 상세 페이지 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 디자인 편집 탭

<tr> <th scope="row"><div class="tb-left">혜택</div></th> <td class="buy-benefit"> <div class="tb-left"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>   <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서<br>확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </div> </td> </tr>

3. CSS 탭

4. JS 탭

5. 예시 이미지

<< 상품 미리보기 화면 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 미리보기 화면 2. 디자인 편집 탭

(빨간색 소스 복사) - 빨간색 소스를 추가해주시면 됩니다.  <li>쿠폰할인 : -원 <a href="" class="benefit_btn layer-open"><span>%</span> 혜택확인 <em>▼</em></a> </li>

<li class="s-price"> <span class="prev-tit">혜택</span> <span class="buy-benefit prev-price"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>   <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서<br>확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </span> </li>

3. CSS탭

#detailpage .detail { zoom: 1; overflow: unset; margin-top: 20px; padding-left: 300px; } /* 구매할인 */ #detailpage .buy-benefit { position:relative; max-width:70%; } #detailpage .buy-benefit .tit-txt { font-size:12px; color:#000; padding-right:64px; max-width:70%; vertical-align: top; display: inline-block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } #detailpage .buy-benefit .view-wrap { position:relative; } #detailpage .buy-benefit .btn-view { display:inline-block; padding:2px 3px 2px 5px; font-size:12px; color:#000; font-family:"Malgun Gothic"; background: url(/images/common/bg_layer_gray.gif) no-repeat; border:1px solid #e3e3e3; width:51px; top:-3px; right:0px; position:absolute; } #detailpage .buy-benefit .btn-view em { display: inline-block; font-size:10px; vertical-align: top; } #detailpage .buy-benefit .view-wrap { display:none; position:absolute; top:30px; right:0%; width:186px; margin-left:-186px; padding:15px; background:#fff; border:1px solid #000; z-index:1; } #detailpage .buy-benefit .view-wrap.active { display:block; } #detailpage .buy-benefit .view-wrap .layer-view { font-size:12px; line-height:20px; color:#000; font-weight:bold; } #detailpage .buy-benefit .view-wrap .layer-view p { word-wrap: break-word; } #detailpage .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } #detailpage .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} #detailpage .buy-benefit .view-wrap .layer-view ul li.layer-info { color:#585858; border-top:1px solid #ccc; padding-top:5px; margin-top:5px; font-weight:normal; } #detailpage .buy-benefit .view-wrap .btn-close { position:absolute; right:10px; top:5px; }

4. 예시 이미지

[모바일 4.0] << 상품 상세 페이지 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 디자인 편집 탭

(빨간색 소스 복사) - 빨간색 소스를 추가해주시면 됩니다. <p> <span class="shopdetailInfoName">쿠폰할인</span> <span class="shopdetailInfoCont listCoupon"> <em class="bold">-</em>원<a href="" class="btn-coupon"><span>%</span> 혜택확인 <em>▼</em></a> </span> </p>

<div style="margin-bottom:8px;"> <span class="shopdetailInfoName">혜택</span> <div class="shopdetailInfoCont"> <div class="buy-benefit"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>  <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서<br>확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </div> </div> </div>

3. CSS 탭

/* 구매할인 추가 */ .shopdetail .shopdetailInfo .buy-benefit { position:relative; display:inline-block; font-weight:bold; max-width:70%; } .shopdetail .shopdetailInfo .buy-benefit .tit-txt { font-size:14px; color:#000; display: block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap { position:relative; } .shopdetail .shopdetailInfo .buy-benefit .btn-view { display:inline-block; padding:3px 5px 3px 5px; font-size:11px; color:#000; border:2px solid #a9a9a9; width:48px; top:-3px; left:100%; position:absolute; } .shopdetail .shopdetailInfo .buy-benefit .btn-view em { display: inline-block; font-size:10px; color: #000; vertical-align: top; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap { display:none; position:absolute; top:30px; left:0; width:186px; padding:15px; background:#fff; border:2px solid #a9a9a9; z-index:1; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap.active { display:block; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap .layer-view { font-size:13px; line-height:20px; color:#000; word-break:break-word; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} .shopdetail .shopdetailInfo .buy-benefit .view-wrap .layer-view ul.list li { list-style-type:none; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap .layer-view ul.list li.layer-info { list-style-type:none; border-top:1px solid #ccc; padding-top:5px; margin-top:5px; color:#585858; font-weight:normal; } .shopdetail .shopdetailInfo .buy-benefit .view-wrap .btn-close { position:absolute; right:7px; top:6px; }

4. JS 탭

5. 예시 이미지

<< 상품 미리보기 화면 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 미리보기 화면 2. 디자인 편집 탭

(빨간색 소스 복사) - 빨간색 소스를 추가해주시면 됩니다. <li class="s-price"> <span class="prev-tit">쿠폰할인</span> <span class="prev-price"> <em class="bold"><span class="coupon-price">-</span>원</em> <a href="" class="btn-coupon"><span>%</span> 혜택확인 <em>▼</em></a> </span> </li>

3. CSS 탭

4. 예시 이미지

[모바일 2.0] << 상품 상세 페이지 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 디자인 편집 탭

(빨간색 소스 복사) - 빨간색 소스를 추가해주시면 됩니다. <li> <span class="tit">쿠폰할인</span> <span class="txt"> <strong><span class="coupon_price">-</span>원</strong> <a href="" class="btn-coupon layer-open"><span>%</span> 혜택확인 <em>▼</em></a> </span> </li>

<li> <span class="tit">혜택</span> <div class="buy-benefit"> <span class="tit-txt"></span> <a href="#none" class="btn-view"><span>더보기</span> <em>▼</em></a>  <div class="view-wrap"> <div class="layer-view"> <p><br />동일상품 구매 시, 옵션 포함옵션 제외</p> <ul class="list">  <li>·  ~ 개 개당 <span class="fc-red"> 원 % 할인 </span> </li>  <li class="layer-info">* 할인적용금액은 장바구니에서<br>확인해주세요.</li> </ul> </div> <a href="#none" class="btn-close" id="view_close"><img src="/images/common/btn_layer_close.gif" alt="" /></a> </div>  </div> </li>

3. CSS 탭

/* 구매할인 추가 */ #detail-item .buy-benefit { position:relative; display:inline-block; max-width:50%; } #detail-item .buy-benefit .tit-txt { font-size:14px; color:#000; display: block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } #detail-item .buy-benefit .view-wrap { position:relative; } #detail-item .buy-benefit .btn-view { display:inline-block; padding:3px 5px 3px 5px; font-size:11px; color:#000; border:2px solid #a9a9a9; width:48px; top:-3px; left:100%; position:absolute; } #detail-item .buy-benefit .btn-view em { display: inline-block; font-size:10px; color: #000; padding-top:2px; vertical-align: top; } #detail-item .buy-benefit .view-wrap { display:none; position:absolute; top:30px; left:0px; width:186px; padding:15px; background:#fff; border:2px solid #a9a9a9; z-index:1; } #detail-item .buy-benefit .view-wrap.active { display:block; } #detail-item .buy-benefit .view-wrap .layer-view { font-size:13px; line-height:20px; color:#000; white-space:normal; word-break:break-word; } #detail-item .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } #detail-item .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} #detail-item .buy-benefit .view-wrap .layer-view ul.list li { list-style-type:none; } #detail-item .buy-benefit .view-wrap .layer-view ul.list li.layer-info { list-style-type:none; border-top:1px solid #ccc; color:#585858; padding-top:5px; margin-top:5px; font-weight:normal; } #detail-item .buy-benefit .view-wrap .btn-close { position:absolute; right:7px; top:3px; }

4. JS 탭

$(function() { // 대량구매 혜택 더보기 jQuery('.btn-view').on('click', function(){ jQuery('.view-wrap').addClass('active'); }); jQuery('.view-wrap #view_close').click(function() { jQuery('.view-wrap').removeClass('active'); }); });

5. 예시 이미지

<< 상품 미리보기 화면 >> 1. 작업 위치 - 중앙 디자인 > 상품 관련 > 상품 미리보기 화면 2. 디자인 편집 탭

(빨간색 소스 복사) <li class="s-price"><span class="prev-tit">쿠폰할인</span><span class="prev-price"><span class="coupon-price">-</span>원 <a href="" class="btn-coupon"><span>%</span> 혜택확인 <em>▼</em></a></span> </li>

3. CSS 탭

/* 구매할인 */ #detailpage .buy-benefit { position:relative; max-width:70%; } #detailpage .buy-benefit li { list-style-type : none } #detailpage .buy-benefit .tit-txt { font-size:12px; color:#000; padding-right:64px; max-width:75%; display: block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } #detailpage .buy-benefit .view-wrap { position:relative; } #detailpage .buy-benefit .btn-view { display:inline-block; padding:2px 3px 2px 5px; font-size:12px; color:#000; font-family:"Malgun Gothic"; background: url(/images/common/bg_layer_gray.gif) no-repeat; border:1px solid #e3e3e3; width:51px; top:-3px; right:0px; position:absolute; } #detailpage .buy-benefit .btn-view em { display: inline-block; font-size:10px; vertical-align: top; } #detailpage .buy-benefit .view-wrap { display:none; position:absolute; top:30px; right:0%; width:186px; margin-left:-186px; padding:15px; background:#fff; border:1px solid #000; z-index:1; } #detailpage .buy-benefit .view-wrap.active { display:block; } #detailpage .buy-benefit .view-wrap .layer-view { font-size:12px; line-height:20px; color:#000; font-weight:bold; white-space:normal; word-break: break-word; } #detailpage .buy-benefit .view-wrap .layer-view .fc-red { color:#ff0000; } #detailpage .buy-benefit .view-wrap .layer-view ul.list {margin-top:5px;} #detailpage .buy-benefit .view-wrap .layer-view ul li.layer-info { margin-top:5px; border-top:1px solid #ccc; padding-top:5px; margin-top:5px; color:#585858; font-weight:normal; } #detailpage .buy-benefit .view-wrap .btn-close { position:absolute; right:10px; top:5px; }

4. 예시 이미지

[모바일 파워팩] << 상품 상세 페이지 >> 상품관련 > 상품상세 페이지 > 기본 상세 페이지 > 상품 정보/옵션 블록 > 상품정보 노출에서 '혜택 팝업'을 체크해주시면 됩니다. << 상품 미리보기 화면 >> 상품관련 > 상품 미리보기 화면 > 상품 미리보기 블록 > 상품정보 노출에서 '혜택 팝업'을 체크해주시면 됩니다.

이전 글

[모바일] 주문서 주소록 레이어 팝업 변경방법
다음 글

주문서 대량구매할인 내역 노출 방법

목록 1:1 문의

Make Shop, Make Signature

시작하기

인기 검색어

무엇을 도와드릴까요?

개별디자인 TIP

(주)커넥트웨이브