무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 주문관련

[선물하기] 상세페이지/장바구니 내 선물하기 버튼 노출 방법

글번호 : 1312

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1312
<< 지원범위 >> - 통합옵션 << 기능 설정 >> 주문관리 > 선물하기 > 선물상품관리 페이지에서 선물상품 추가 후 해당 기능을 사용하실 수 있습니다. * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. 1. 상세페이지 내 선물하기 버튼 노출 방법에 대해 알아보겠습니다.
[ PC 버전 ] << 상품 상세페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 상세 페이지 2. 가상태그 - 선물하기 상품 확인: <!--/if_link_baro_giveapresent/--> - 선물하기 주문 버튼 링크 : <!--/link_baro_giveapresent/--> 3. 예제소스 ① 베이직 심플 [ 디자인 편집탭 ] [선물하기 신청 버튼]

<!--/if_link_baro_giveapresent/--><!-- 선물하기--> <a href="<!--/link_baro_giveapresent/-->" class="btn_gift"><span class="fa fa-gift">선물하기</span></a> <!--/end_if/-->

[ CSS 탭 ]

/* 선물하기 */ #productDetail .thumb-info .info .prd-btns .btn_gift { display: block; width: 448px; height: 48px; font-size: 12px; color: #f1191f; text-align: center; line-height: 50px; border: 1px solid #f1191f; background: #fff; } #productDetail .thumb-info .info .prd-btns .btn_gift:hover { color: #fff; background: #f1191f; } #productDetail .thumb-info .info .prd-btns .btn_gift:active { position: relative; top: 1px; } #productDetail .thumb-info .info .prd-btns .btn_gift .fa-gift { font-size: 13px; vertical-align: text-bottom; } #productDetail .thumb-info .info .prd-btns .btn_gift .fa-gift:before { margin-right:5px; }

② 모던심플 [ 디자인 편집탭 ] [선물하기 신청 버튼]

<!--/if_link_baro_giveapresent/--><!-- 선물하기--> <a href="<!--/link_baro_giveapresent/-->" class="btn_gift"><img src="/images/d3/modern_simple/btn/btn_w290_gift.gif" alt="선물하기" title="선물하기" /></a> <!--/end_if/-->

[ CSS 탭 ]

/* 선물하기 */ #productDetail .thumb-info .info .prd-btns a { display: inline-block; } #productDetail .thumb-info .info .prd-btns a.btn_subs, #productDetail .thumb-info .info .prd-btns a.btn_gift { margin-top: 10px; }

[버튼 예시 이미지] (베이직심플 기준)
[ MO 버전 ] << 상품 상세페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 상세 페이지 2. 가상태그 - 선물하기 상품 확인 : <!--/if_link_baro_giveapresent/--> - 선물하기 주문 버튼 링크 : <!--/link_baro_giveapresent/--> 3. 예제소스
① 모바일 4.0 [ 디자인 편집탭 ] * 아래 빨간색 소스를 넣어주세요. <a href="<!--/link_immediate/-->" class="buy">구매하기</a> <!--/if_link_baro_giveapresent/--><!-- 선물하기--> <a href="<!--/link_baro_giveapresent/-->" class="gift"><i class="fa fa-gift"></i>선물하기</a> <!--/end_if/--> ---------------------------------------- <a href="<!--/link_basket/-->" class="cart">장바구니</a><a href="<!--/link_immediate/-->" class="buy">구매하기</a> <!--/if_link_baro_giveapresent/--><!-- 선물하기--> <a href="<!--/link_baro_giveapresent/-->" class="gift"><i class="fa fa-gift"></i>선물하기</a> <!--/end_if/--> [ CSS 탭 ]

.shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.gift { display: inline-flex; align-items: center; justify-content: center; width: 97%; color: #262626; background: #fff; border: 1px solid #333; } /* 선물하기 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.gift .fa-gift { margin-top: -2px; margin-right: 3px; font-size: 16px; color: #777; } /* 선물하기*/ /* //상품옵션 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.gift { display: inline-flex; align-items: center; justify-content: center; padding: 15px 0; width: 70%; background: #fff; border: 1px solid #393939; color: #393939; } /* 선물하기 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.gift .fa-gift { margin-top: -2px; margin-right: 3px; font-size: 16px; } /* 선물하기 */

② 모바일 2.0 [ 디자인 편집탭 ] *아래 빨간색 소스를 넣어주세요. <a href="<!--/link_wish_toggle/-->" class="btn-wish box-shadow-03"><!--/block_btn_wish/--><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><!--/end_block/-->관심상품</a> <!--/if_link_baro_giveapresent/--> <!-- 선물하기--><a href="<!--/link_baro_giveapresent/-->" class="btn-gift box-shadow-02 box-shadow-03"><i class="fa fa-gift"></i>선물하기</a> <!--/end_if/--> [CSS] *아래 [기존]소스를 [신규] 소스로 변경해주세요. [기존] [신규]

* 파워팩(시즌2)의 경우 별도 설정 없이 반영됩니다. 반영이 안되는 경우, 해당 템플릿 디자인 저장버튼 클릭 후 확인 부탁드립니다. [버튼 예시이미지]
2. 장바구니 내 선물하기 버튼 노출 방법에 대해 알아보겠습니다.
[ PC 버전 ] <<장바구니>> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 장바구니 2. 가상태그 - 장바구니 선물하기 기능 여부 확인: <!--/if_is_basket_present/--> - 장바구니 전체 선택(기존 태그): <!--/checkbox_multi_all/--> - 선택 장바구니(기존 태그): <!--/basket@checkbox_multi_basket/--> - 장바구니 항목 중 선물 아이콘 노출 여부 확인: <!--/if_basket@present_icon/--> - 장바구니 항목 중 선물 아이콘 태그 :<!--/basket@present_icon/--> - 선물하기 버튼 노출 여부 확인: <!--/if_link_giveapresent/--> - 선물하기 버튼 링크: <!--/link_giveapresent/--> 3. 예제소스 ① 베이직 심플 [디자인 편집탭] *아래 빨간색 소스를 추가해주세요. <caption>장바구니 담긴 상품</caption> <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="75" /> <col width="90" /> <col width="*" /> <col width="115" /> <col width="95" /> <col width="105" /> <col width="95" /> <col width="95" /> </colgroup> <thead> <tr> <!--/if_is_basket_present/--><th scope="col"><div class="tb-center"><!--/checkbox_multi_all/--></div></th><!--/end_if/--> <th scope="col"><div class="tb-center">번호</div></th> <th scope="col"><div class="tb-center">사진</div></th> <th scope="col"><div class="tb-center">상품명</div></th> <th scope="col"><div class="tb-center">수량</div></th> <th scope="col"><div class="tb-center">적립</div></th> <th scope="col"><div class="tb-center">금액</div></th> <th scope="col"><div class="tb-center">배송비</div></th> <th scope="col"><div class="tb-center">취소</div></th> </tr> </thead> <tfoot> <tr> <td colspan=" <!--/if_is_basket_present/-->9<!--/else/-->8<!--/end_if/-->"> <!--/basket@form/--> <!--/if_idx(1)/--> <tr class="nbg"> <!--/else/--> <tr> <!--/end_if/--> <!--/if_is_basket_present/--><td> <div class="tb-center"><!--/basket@checkbox_multi_basket/--></div></td><!--/end_if/--> <td><div class="tb-center"><!--/basket@number/--></div></td> <a href="<!--/link_order/-->" class="CSSbuttonBlack">주문하기</a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->" class="CSSbuttonWhite">선물하기</a><!--/end_if/--> <a href="<!--/link_shopping/-->" class="CSSbuttonWhite">계속 쇼핑하기</a> ② 모던 심플 * 아래 빨간색 소스를 추가해주세요. <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="50" /> <col width="70" /> <col width="*" /> <col width="70" /> <!--/if_weightdeli_use/--><col width="90" /><!--/end_if/--> <col width="70" /> <col width="90" /> <col width="90" /> <col width="90" /> </colgroup> <thead> <tr> <!--/if_is_basket_present/--><th scope="col"><div class="tb-center"><!--/checkbox_multi_all/--></div></th><!--/end_if/--> <th scope="col"><div class="tb-center">번호</div></th> <th scope="col"><div class="tb-center">사진</div></th> <th scope="col"><div class="tb-center">제품명</div></th> <th scope="col"><div class="tb-center">수량</div></th> <!--/if_weightdeli_use/--><th scope="col"><div class="tb-right">상품무게</div></th><!--/end_if/--> <th scope="col"><div class="tb-right">적립</div></th> <th scope="col"><div class="tb-right">가격</div></th> <th scope="col"><div class="tb-center">배송비</div></th> <th scope="col"><div class="tb-center">취소</div></th> </tr> </thead> <tfoot> <tr> <td colspan="<!--/if_weightdeli_use/-->9<!--/else/--> <!--/if_is_basket_present/-->9<!--/else/--> 8 <!--/end_if/--> <!--/end_if/-->"> <!--/if_is_basket_present/--><td><div class="tb-center"><!--/basket@checkbox_multi_basket/--></div></td><!--/end_if/--> <td><div class="tb-center"><!--/basket@number/--></div></td> <a href="<!--/link_order/-->"><img src="/images/d3/modern_simple/btn/btn_h36_order.gif" alt="주문하기" title="주문하기" /></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->"><img src="/images/d3/modern_simple/btn/btn_h36_gift.gif" alt="선물하기" title="선물하기" /></a><!--/end_if/--> <a href="<!--/link_shopping/-->"><img src="/images/d3/modern_simple/btn/btn_h36_shopping.gif" alt="계속쇼핑하기" title="계속쇼핑하기" /></a> [쇼핑몰 예시 – PC ]
[ MO 버전 ] <<장바구니>> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 장바구니 2. 가상태그 - 장바구니 선물하기 기능 여부 확인: <!--/if_is_basket_present/--> - 장바구니 전체 선택(기존 태그): <!--/checkbox_multi_all/--> - 선택 장바구니(기존 태그): <!--/basket@checkbox_multi_basket/--> - 장바구니 항목 중 선물 아이콘 노출 여부 확인: <!--/if_basket@present_icon/--> - 장바구니 항목 중 선물 아이콘 태그 :<!--/basket@present_icon/--> - 선물하기 버튼 노출 여부 확인: <!--/if_link_giveapresent/--> - 선물하기 버튼 링크: <!--/link_giveapresent/--> 3. 예제소스
① 모바일 4.0 [디자인 편집탭] *아래 빨간색 소스를 추가해주세요. <div class="order-btn"> <a href="<!--/link_order/-->" class="btn_Red"><span>주문하기</span></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->" class="btn_Present"> <i class="fa fa-gift"></i>선물하기</a><!--/end_if/--> </div> [CSS]

#basket .order-btn { display:flex; text-align:center; } #basket .order-btn a { display:inline-block; width:100%; height:40px; line-height:40px; box-sizing: border-box; vertical-align: middle; } #basket .order-btn .btn_Present { margin-left:5px; background-color:#ffffff; border:1px solid #a94343; color:#a94343; } #basket .order-btn .btn_Present .fa-gift { padding-right:4px; font-size:1.250em; vertical-align:middle; }

② 모바일 2.0 [디자인 편집탭] *아래 빨간색 소스를 추가해주세요. <div class="order-btn"> <a href="<!--/link_order/-->" class="btn-order2 btn-type-02 box-gradient-02 box-shadow-02"><span>주문하기</span></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->" class="btn-gift btn-type-02 box-shadow-02 box-shadow-02"><i class="fa fa-gift"></i>선물하기</a><!--/end_if/--> </div> [CSS]

#basket .order-btn { display:flex; margin: 20px 10px; text-align:center; } #basket .order-btn a { display: inline-block; width: 100%; height: 35px; line-height: 35px; text-align: center; font-weight: bold; color: #fff; vertical-align: middle; } #basket .order-btn a.btn-order2 { border: 1px solid #808080; background-color: #8a8687; background-image: -webkit-gradient(linear, left top, left bottom, from(#8a8687), to(#5e5e5e)); background-image: -webkit-linear-gradient(top, #8a8687, #5e5e5e); background-image: -moz-linear-gradient(top, #8a8687, #5e5e5e); background-image: -o-linear-gradient(top, #8a8687, #5e5e5e); background-image: linear-gradient(to bottom, #8a8687, #5e5e5e); -webkit-border-radius: 3px !important; border-radius: 3px !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #basket .order-btn a.btn-order2 span { padding-left: 16px; background: url(/images/d3/m_01/btn/btn_order2@2x.gif) no-repeat 0 50%; background-size: 14px 14px; } #basket .order-btn a.btn-gift { margin-left:5px; font-size: .875em; border: 1px solid #ca6464; background-color: #ca6464; background-image: -webkit-gradient(linear, left top, left bottom, from(#ca6464), to(#a94343)); background-image: -webkit-linear-gradient(top, #ca6464, #a94343); background-image: -moz-linear-gradient(top, #ca6464, #a94343); background-image: -o-linear-gradient(top, #ca6464, #a94343); background-image: linear-gradient(to bottom, #ca6464, #a94343); -webkit-border-radius: 3px !important; border-radius: 3px !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #basket .order-btn a.btn-gift .fa-gift { padding-right: 4px; }

* 파워팩의 경우 별도 설정 없이 적용됩니다. [쇼핑몰 예시 – MO ]
[ PC 버전 ] << 통합장바구니2 >> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 통합장바구니2 2. 가상태그 - 장바구니 선물하기 기능 여부 확인: <!--/if_is_basket_present/--> - 장바구니 전체 선택(기존 태그): <!--/checkbox_multi_all/--> - 선택 장바구니(기존 태그): <!--/basket@checkbox_multi_basket/--> - 장바구니 항목 중 선물 아이콘 노출 여부 확인: <!--/if_basket@present_icon/--> - 장바구니 항목 중 선물 아이콘 태그 :<!--/basket@present_icon/--> - 선물하기 버튼 노출 여부 확인: <!--/if_link_giveapresent/--> - 선물하기 버튼 링크: <!--/link_giveapresent/--> 3. 예제소스 ① 베이직 심플 [디자인 편집탭] * 아래 빨간색 소스를 추가해주세요. <caption>장바구니 담긴 상품</caption> <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="120" /> <col width="*" /> <col width="110" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="95" /> </colgroup> <thead> <tr> <!--/if_is_basket_present/--><th scope="col"><div class="tb-center"><!--/checkbox_multi_all/--></div></th><!--/end_if/--> <th scope="col"><div class="tb-center">사진</div></th> <th scope="col"><div class="tb-center">상품명</div></th> <th scope="col"><div class="tb-center">수량</div></th> <th scope="col"><div class="tb-center">적립</div></th> <th scope="col"><div class="tb-center">금액</div></th> <th scope="col"><div class="tb-center">배송비</div></th> <th scope="col"><div class="tb-center">취소</div></th> </tr> </thead> <tfoot> <!--/if_provider/--> <!--/loop_provider/--> <!--/if_not_provider@is_provider/--> <tr> <td colspan=" <!--/if_is_basket_present/-->8<!--/else/--> 7 <!--/end_if/-->"> <!--/provider@basket@form/--> <tr> <!--/if_is_basket_present/--><td><div class="tb-center"> <!--/provider@basket@checkbox_multi_basket/--></div></td><!--/end_if/--> <caption>장바구니 담긴 상품</caption> <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="120" /> <col width="*" /> <col width="110" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="95" /> </colgroup> <tfoot> <tr> <td colspan="<!--/if_is_basket_present/-->8<!--/else/-->7<!--/end_if/-->"> <div class="tb-right"> <div class="prov-icons"> <p class="ico ico2">업체배송</p> </div> <!--/provider@basket@form/--> <tr> <!--/if_is_basket_present/--><td><div class="tb-center"> <!--/provider@basket@checkbox_multi_basket/--></div></td><!--/end_if/--> <td> ② 모던 심플 [디자인 편집탭] * 아래 빨간색 소스를 추가해주세요. <caption>장바구니 담긴 상품</caption> <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="70" /> <col width="*" /> <col width="70" /> <!--/if_weightdeli_use/--><col width="90" /><!--/end_if/--> <col width="70" /> <col width="90" /> <col width="90" /> <col width="90" /> </colgroup> <thead> <tr> <!--/if_is_basket_present/--><th scope="col"><div class="tb-center"><!--/checkbox_multi_all/--></div></th><!--/end_if/--> <th scope="col"><div class="tb-center">사진</div></th> <th scope="col"><div class="tb-center">제품명</div></th> <th scope="col"><div class="tb-center">수량</div></th> <!--/if_weightdeli_use/--><th scope="col"><div class="tb-right">상품무게</div></th><!--/end_if/--> <th scope="col"><div class="tb-right">적립</div></th> <th scope="col"><div class="tb-right">가격</div></th> <th scope="col"><div class="tb-center">배송비</div></th> <th scope="col"><div class="tb-center">취소</div></th> </tr> </thead> <tfoot> <tr> <td colspan="<!--/if_weightdeli_use/-->8<!--/else/--><!--/if_is_basket_present/-->8<!--/else/-->7<!--/end_if/--> <!--/end_if/-->"> . . . <table summary="사진, 제품명, 수량, 적립, 가격, 배송비, 취소"> <caption>장바구니 담긴 상품</caption> <colgroup> <!--/if_is_basket_present/--><col width="50" /><!--/end_if/--> <col width="70" /> . . . <!--/if_is_basket_present/--><td><div class="tb-center"><!--/provider@basket@checkbox_multi_basket/--></div></td><!--/end_if/--> <td> <div class="tb-center"> <div class="thumb"> <a href="<!--/provider@basket@link/-->"><img src="<!--/provider@basket@image_s/-->" alt="상품 섬네일" title="상품 섬네일" /></a> </div> . . . <a href="<!--/link_order/-->"><img src="/images/d3/modern_simple/btn/btn_h36_order.gif" alt="주문하기" title="주문하기" /></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->"><img src="/images/d3/modern_simple/btn/btn_h36_gift.gif" alt="선물하기" title="선물하기" /></a><!--/end_if/--> <a href="<!--/link_shopping/-->"><img src="/images/d3/modern_simple/btn/btn_h36_shopping.gif" alt="계속쇼핑하기" title="계속쇼핑하기" /></a> [쇼핑몰 예시 – PC ]
[ MO 버전 ] <<통합장바구니2>> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 장바구니 2. 가상태그 - 장바구니 선물하기 기능 여부 확인: <!--/if_is_basket_present/--> - 장바구니 전체 선택(기존 태그): <!--/checkbox_multi_all/--> - 선택 장바구니(기존 태그): <!--/basket@checkbox_multi_basket/--> - 장바구니 항목 중 선물 아이콘 노출 여부 확인: <!--/if_basket@present_icon/--> - 장바구니 항목 중 선물 아이콘 태그 :<!--/basket@present_icon/--> - 선물하기 버튼 노출 여부 확인: <!--/if_link_giveapresent/--> - 선물하기 버튼 링크: <!--/link_giveapresent/--> 3. 예제소스
① 모바일 4.0 [디자인 편집탭] *아래 빨간색 소스를 추가해주세요. <div class="order-btn"> <a href="<!--/link_order/-->" class="btn_Red"><span>주문하기</span></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->" class="btn_Present"> <i class="fa fa-gift"></i>선물하기</a><!--/end_if/--> </div> [CSS]

#basket .order-btn { display:flex; text-align:center; } #basket .order-btn a { display:inline-block; width:100%; height:40px; line-height:40px; box-sizing: border-box; vertical-align: middle; } #basket .order-btn .btn_Present { margin-left:5px; background-color:#ffffff; border:1px solid #a94343; color:#a94343; } #basket .order-btn .btn_Present .fa-gift { padding-right:4px; font-size:1.250em; vertical-align:middle; }

② 모바일 2.0 [디자인 편집탭] *아래 빨간색 소스를 추가해주세요. <div class="order-btn"> <a href="<!--/link_order/-->" class="btn-type-02 box-gradient-02 box-shadow-02 btn-order2"><span>주문하기</span></a> <!--/if_link_giveapresent/--><a href="<!--/link_giveapresent/-->" class="btn-gift btn-type-02 box-shadow-02 box-shadow-02"><i class="fa fa-gift"></i>선물하기</a><!--/end_if/--> </div> [CSS]

#basket .order-btn { display:flex; margin: 20px 10px; text-align:center; } #basket .order-btn a { display: inline-block; width: 100%; height: 35px; line-height: 35px; text-align: center; font-weight: bold; color: #fff; vertical-align: middle; } #basket .order-btn a.btn-order2 { border: 1px solid #808080; background-color: #8a8687; background-image: -webkit-gradient(linear, left top, left bottom, from(#8a8687), to(#5e5e5e)); background-image: -webkit-linear-gradient(top, #8a8687, #5e5e5e); background-image: -moz-linear-gradient(top, #8a8687, #5e5e5e); background-image: -o-linear-gradient(top, #8a8687, #5e5e5e); background-image: linear-gradient(to bottom, #8a8687, #5e5e5e); -webkit-border-radius: 3px !important; border-radius: 3px !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #basket .order-btn a.btn-order2 span { padding-left: 16px; background: url(/images/d3/m_01/btn/btn_order2@2x.gif) no-repeat 0 50%; background-size: 14px 14px; } #basket .order-btn a.btn-gift { margin-left:5px; font-size: .875em; border: 1px solid #ca6464; background-color: #ca6464; background-image: -webkit-gradient(linear, left top, left bottom, from(#ca6464), to(#a94343)); background-image: -webkit-linear-gradient(top, #ca6464, #a94343); background-image: -moz-linear-gradient(top, #ca6464, #a94343); background-image: -o-linear-gradient(top, #ca6464, #a94343); background-image: linear-gradient(to bottom, #ca6464, #a94343); -webkit-border-radius: 3px !important; border-radius: 3px !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #basket .order-btn a.btn-gift .fa-gift { padding-right: 4px; }

* 파워팩의 경우 별도 설정 없이 적용됩니다. [쇼핑몰 예시 – MO ]
목록 1:1 문의