무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

추가 구성 상품 작업방법

글번호 : 1006

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1006
추가구성상품 기능이란? 한 메인상품의 추가구성상품으로 기존에 등록되어 있는 상품을 설정하여, 메인 상품과 추가구성상품을 같이 구매/장바구니 담기를 할 수 있는 기능입니다. << 기능설정 >> 상품관리 > 판매상품 기본관리 > 판매상품 신규등록 / 등록 상품 수정/삭제 > 추가 구성 상품 설정 << 작업위치 >> 중앙디자인 > 상품관리 > 상품 상세 페이지
<< 웹 버전(PC) >> 1. 디자인 편집탭 - 초록색 소스를 추가해주시면 됩니다. <!--/if_multi_option/--> <tr> <td colspan="2" class="nopd"> <div class="opt-wrap" style="margin-top: 0"> <div class="tit blind"><strong>기본옵션</strong></div> <!--/loop_multi_option/--> <dl> <dt><!--/multi_option@title/--></dt> <dd><!--/multi_option@select/--></dd> </dl> <!--/end_loop/--> <!--/if_is_unify_option/--> <!--/if_link_option_select_complete/--> <div class="sel-btn"><a href="<!--/link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></div> <!--/end_if/--> <!--/end_if/--> </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product/--> <tr> <td colspan="2" class="add-option-tit"> <strong>[추가 구성 상품]</strong> </td> </tr> <!--/loop_extra_product/--> <tr <!--/if_idx(1)/-->class="add-option-start"<!--/end_if/-->> <td colspan="2"> <table> <caption>추가 구성 상품 옵션</caption> <colgroup> <col width="120" /> <col width="*" /> </colgroup> <tbody> <tr> <td class="add-option-img"> <div class="thumb-s"><img src="<!--/extra_product@image_s/-->" alt="" /></div> </td> <td class="add-option-wrap"> <p class="prd-icon"><!--/extra_product@icons/--></p> <h3 class="tit-prd"><!--/extra_product@name/--></h3> <div class="table-opt"> <table summary="판매가격, 적립금, 주문수량, 옵션, 사이즈"> <caption>상품 옵션</caption> <colgroup> <col width="90" /> <col width="*" /> </colgroup> <tbody> <tr> <th scope="row"><div class="tb-left">판매가격</div></th> <td class="price"> <div class="tb-left"> <!--/number/extra_product@price_sell/-->원 </div> </td> </tr> <!--/if_extra_product@price_consumer(+1)/--> <tr> <th scope="row"><div class="tb-left">소비자가격</div></th> <td class="price"> <div class="tb-left"> <strike><!--/number/extra_product@price_consumer/-->원</strike> </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@reserve_price(+1)/--> <tr> <th scope="row"><div class="tb-left">적립금</div></th> <td> <div class="tb-left"> <!--/extra_product@reserve_price/-->원 </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@reserve_percent(+1)/--> <tr> <th scope="row"><div class="tb-left">적립금</div></th> <td> <div class="tb-left"> <!--/extra_product@reserve_percent/-->% </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@point_price(+1)/--> <tr> <th scope="row"><div class="tb-left">포인트</div></th> <td> <div class="tb-left"> <!--/extra_product@point_price/--><!--/extra_product@point_unit/--> </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@weight/--> <tr> <th scope="row"><div class="tb-left">상품무게</div></th> <td> <div class="tb-left"> <!--/extra_product@weight/--> </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@etc/--> <tr> <th scope="row"><div class="tb-left">특이사항</div></th> <td> <div class="tb-left"> <!--/extra_product@etc/--> </div> </td> </tr> <!--/end_if/--> <!--/if_extra_product@option/--> <tr> <td colspan="2"> <div class="opt-wrap" style="margin-top: 0"> <div class="tit"><strong>기본옵션</strong></div> <!--/loop_extra_product@option/--> <dl> <dt><!--/extra_product@option@title/--></dt> <dd><!--/extra_product@option@select/--></dd> </dl> <!--/end_loop/--> <!--/if_extra_product@link_option_select_complete/--> <div class="sel-btn"><a href="<!--/extra_product@link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></div> <!--/end_if/--> </div> </td> </tr> <!--/else/--> <tr> <td colspan="2"> <div class="opt-wrap" style="margin-top: 0"> <!--/if_extra_product@link_option_select_complete/--> <div class="sel-btn"><a href="<!--/extra_product@link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></div> <!--/end_if/--> </div> </tr> <!--/end_if/--> </tbody> </table> </div><!-- .table-opt --> </td> </tr> </tbody> </table> </td> </tr> <!--/end_loop/--> <!--/end_if/--> <!--/if_is_unify_option/--> <!--/if_multi_option_add/--> <tr> <td colspan="2" class="nopd"> <div class="opt-wrap opt-wrap-hybrid"> <div class="tit"><strong>추가옵션</strong> (추가 구매를 원하시면 선택하세요)</div> <dl> <!--/loop_multi_option_add/--> <dt><!--/multi_option_add@title/--></dt> <dd><!--/multi_option_add@select/--></dd> <!--/end_loop/--> </dl> </div> </td> </tr> <!--/end_if/--> <!--/end_if/--> <!--/if_is_unify_option/--> <!--/if_hybrid_option/--> <tr> <td colspan="2" style="padding-bottom:2px;"> 2. CSS탭 - CSS탭 소스창 제일 하단에 아래 소스를 추가해주시면 됩니다.

/* 통옵 추가 구성 상품 */ #productDetail .thumb-info .info .table-opt td.add-option-tit { padding:15px 0 0; border-top:1px solid #e4e4e5; color:#000; font-size:14px; } #productDetail .thumb-info .info .table-opt tr.add-option-start > td .add-option-img, #productDetail .thumb-info .info .table-opt tr.add-option-start > td .add-option-wrap { border-bottom:1px dashed #e4e4e5; } #productDetail .thumb-info .info .table-opt td.add-option-img { padding-top:10px; border-bottom:1px solid #e4e4e5; vertical-align:top; } #productDetail .thumb-info .info .table-opt td.add-option-img .thumb-s img { max-width:100%; } #productDetail .thumb-info .info .table-opt td.add-option-wrap { padding-top:10px; border-bottom:1px solid #e4e4e5; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .prd-icon, #productDetail .thumb-info .info .table-opt td.add-option-wrap .tit-prd { padding-left:20px; padding-top:0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt { padding-left:20px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td select.basic_option, #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td select.addition_option { width:310px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td input.basic_option, #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td input.addition_option { width:306px; height:22px; line-height:24px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap { padding:5px 0 0 0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap .tit { display:none; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap dd { width: 110px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap select { width: 100px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap input { width: 205px; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_p-tit { display:block; width:90%; height:100%; line-height:12px; color:#000; font-weight:bold; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_price { top:40px; right:0; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_btn-del { top:0; }

<< 모바일 버전 >> 1. 디자인 편집탭 - 초록색 소스를 추가해주시면 됩니다. <div class="MK_optAddWrap_div"></div> <div class="MK_optAddWrap"> <!--/hybrid_option_box/--> </div> <div class="MK_optAddWrap_div"></div> <div class="MK_optAddWrap"> <div id="MK_optAddWrapList"> <!--/hybrid_option_list/--> </div> </div> <!--/end_if/-->

<!--/if_extra_product/--> <div class="shopdetailInfoTit">추가 구성 상품</div> <!--/loop_extra_product/--> <div class="shopdetailInfoWrap"> <div class="shopdetailInfoTop"> <figure> <img src="<!--/extra_product@image_s/-->" class="response100" alt=""/> </figure> </div> <div class="shopdetailInfoValue"> <p class="shopdetailInfoprdName"><span class="shopdetailInfoCont"><!--/extra_product@name/--></span></p> <p> <span class="shopdetailInfoCont"> <!--/if_extra_product@price_replace/--> <!--/extra_product@price_replace/--> <!--/else/--> <!--/if_extra_product@price_discount/--> <del><!--/number/extra_product@price_consumer/-->원</del> <!--/else/--> <em class="bold"><!--/number/extra_product@price_sell/--></em>원 <!--/end_if/--> <!--/end_if/--> </span> </p> <!--/if_extra_product@price_discount/--> <p class="shopdetailInfoDiscount bold"> <!--/if_extra_product@discount_apply_type(mobile)/--> <span class="shopdetailInfoName"><span class="fa fa-mobile fa-lg"></span></span> <!--/end_if/--> <span class="shopdetailInfoCont"><em><!--/number/extra_product@price_discount/--></em>원</span> </p> <!--/end_if/--> <!--/if_extra_product@reserve_price(+1)/--> <p> <span class="shopdetailInfoCont"><!--/extra_product@reserve_price/-->원 적립</span> </p> <!--/end_if/--> <!--/if_extra_product@reserve_percent(+1)/--> <p> <span class="shopdetailInfoCont"><!--/extra_product@reserve_percent/-->% 적립</span> </p> <!--/end_if/--> <!--/if_extra_product@point_price(+1)/--> <p> <span class="shopdetailInfoCont"><!--/extra_product@point_price/--><!--/extra_product@point_unit/--> 적립</span> </p> <!--/end_if/--> <!--/if_extra_product@delivery_title/--> <p> <span class="shopdetailInfoCont"><a href="javascript:alert('<!--/extra_product@delivery_detail/-->');"><span><!--/extra_product@delivery_title/--> 배송</span> <span class="fa fa-info-circle fa-lg"></span></a> <!--/if_extra_product@delivery_country_info/--> <a href="javascript:alert('<!--/extra_product@delivery_country_info/-->');"><span class="region">지역별</span> <span class="fa fa-info-circle fa-lg"></span></a> <!--/end_if/--> </span> </p> <!--/end_if/--> <!--/if_extra_product@weight/--> <p> <span class="shopdetailInfoCont"><!--/extra_product@weight/--></span> </p> <!--/end_if/--> <div class="shopdetailInfoSelect"> <!--/if_extra_product@option/--> <!--/loop_extra_product@option/--> <p> <span class="shopdetailInfoName"><!--/extra_product@option@title/--></span> <span class="shopdetailInfoCont"><!--/extra_product@option@select/--></span> </p> <!--/end_loop/--> <!--/if_extra_product@link_option_select_complete/--> <p class="opt-com"><a href="<!--/extra_product@link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></p> <!--/end_if/--> <!--/else/--> <!--/if_extra_product@link_option_select_complete/--> <p class="opt-com"><a href="<!--/extra_product@link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></p> <!--/end_if/--> <!--/end_if/--> </div> </div> </div> <!--/end_loop/--> <!--/end_if/-->

<!--/if_is_unify_option/--> <div class="shopdetailInfoMultiSelect"> <!-- 통합옵션 멀티옵션 수량, 가격 --> <!--/if_multi_option_box/--> <div class="MK_optAddWrap"> <div id="MK_innerOptWrap"> <div id="MK_innerOptScroll"> <!--/multi_option_box/--> <!--/multi_option_add_box/--> 2. CSS탭 - CSS탭 소스창 제일 하단에 아래 소스를 추가해주시면 됩니다.

/* 추가 구성 상품 */ .shopdetail .shopdetailInfo .shopdetailInfoTit { height:40px; line-height:42px; padding:0 12px; border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; font-size:14px; color:#000; } .shopdetail .shopdetailInfo .shopdetailInfoWrap:after { clear: both; content: ""; display: block; } .shopdetail .shopdetailInfo .shopdetailInfoWrap { width:100%; border-bottom:1px solid #c7c7c7; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop { float:left; width:45%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop figure { padding:15px 12px; border:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue { float:right; width:52%; padding:15px 0; margin-right:3%; border:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoprdName { font-size:1.333em; font-weight:bold; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoCont { width:auto; margin:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoName { width:auto; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect p { padding:0; background:none; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoCont .basic_option { width:100%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoName { display:none; width:100%; padding:0 0 5px 0; }

목록 1:1 문의