묶음 상품이 쇼핑몰에 노출되려면 디자인 작업이 필요한가요?

묶음 상품은 기본 소스로 적용되어 따로 디자인 작업이 필요하지 않아요.

다만, 개별디자인 작업을 진행한 상점 같은 경우는 따로 수정 작업이 필요할 수 있어요.

개별디자인 작업(PC)

작업경로: 중앙디자인 > 마이페이지 > 교환 요청

베이직 심플 기준으로 HTML 2개 영역 수정 필요

1. <!—/loop_trade_bundle/--><!—/end_loog/—> 내부의 내용

<div class="tit-page-2">
  <h2>교환상품 선택</h2>
</div>
<!-- 교환상품 선택 -->
<div class="pro-trade">
  <ul>
    <!--/block_trade_list/-->
    <!--/if_trade_name/-->
    <!--/block_trade_product/-->
    <li>
      <dl class="pro-wrap">
        <dt class="thumb-img">
          <!--/if_trade_image_s/-->
          <img src="
						<!--/trade_image_s/-->" alt="상품이미지" style="width:70px; height:70px">
          <!--/else/-->
          <img src="/images/common/noimage.gif" style="width:70px; height:70px" />
          <!--/end_if/-->
        </dt>
        <dd class="pro-name">
          <a href="
							<!--/link_trade_product/-->">
            <strong>
              <!--/trade_name/-->
            </strong>
            <br />
          </a>
          
<!--/loop_trade_bundle/-->
<div class="quantity option"> -
<!--/trade_bundle@product_name/-->
<!--/if_trade_bundle@option/--> : [
<!--/trade_bundle@option/-->]
<!--/end_if/--> (
<!--/trade_bundle@stock/-->개)
	<!--/if_trade_bundle@link_trade_bundle_option_modify/-->
	<a href="<!--/trade_bundle@link_trade_bundle_option_modify/-->" class="btn-option">선택 </a>
	<!--/end_if/-->
<!--/trade_bundle@trade_bundle_option_view/-->
</div>
<!--/end_loop/-->
          
          <div class="option">
            <label>수량</label>
            <!--/input_trade_amount/-->
            <!--/if_link_trade_option_modify/-->
            <a href="
								<!--/link_trade_option_modify/-->" class="btn-option">선택 </a>
            <!--/end_if/-->
            <!--/block_trade_option_view/-->
            <!--/trade_option/-->
            <!--/end_block/-->
          </div>
        </dd>
        <dd class="pro-price">
          <strong>
            <!--/trade_price/-->원
          </strong>
        </dd>
      </dl>
    </li>
    <!--/end_block/-->
    <!--/else/-->
    <li>
      <div class="no_data">교환하실 상품을 선택해 주세요.</div>
    </li>
    <!--/end_if/-->
    <!--/end_block/-->
  </ul>
</div>
<!-- // 교환상품 선택 -->

1. <!--/if_trade_popup_bundle_name/--> <!—/end_if/—> 내부의 내용

<!-- 교환상품 선택 팝업 -->
<!--/block_popup_trade_option/-->
<div class="opt-wrap">
  <h3> 교환상품 선택 <a href="
			<!--/link_trade_close/-->" class="pop-close btn-close">
      <span class="close">닫기</span>
    </a>
  </h3>
  <ul class="list">
    <li class="item">
      <dl class="pro-wrap">
        <dt class="thumb-img">
          <!--/if_trade_popup_image_s/-->
          <img src="
						<!--/trade_popup_image_s/-->" alt="상품이미지">
          <!--/else/-->
          <img src="/images/common/noimage.gif" style="width:70px; 
height:70px" />
          <!--/end_if/-->
        </dt>
        <dd class="pro-name">
          <p>
            <strong>
              <!--/trade_popup_name/-->
            </strong>
          </p>
          <div class="quantity">
            <!--/if_trade_popup_bundle_name/-->
            <!--/trade_popup_bundle_name/-->
            <!--/else/-->
            <!--/trade_popup_option/-->
            <span class="txt-gray">|</span> 수량
            <!--/trade_popup_stock/-->개
            <!--/end_if/-->
          </div>
        </dd>
        <dd class="pro-price">
          <strong>
            <!--/number/trade_popup_price/-->원
          </strong>
        </dd>
      </dl>
    </li>
  </ul> ```

CSS 추가 작업 필요

.smMypage .pro-trade .pro-wrap dd.pro-name .option .btn-option {
    display:inline-block;
    width:68px;
    height:22px;
    line-height:22px;
    border:1px solid #000;
    border-radius:2px;
    text-align:center;
}

개별디자인 작업(MO 4.0)

작업경로: 중앙디자인 > 마이페이지 > 교환 요청

HTML 2개 영역 수정 필요

1. <!—/loop_trade_bundle/--><!—/end_loog/—> 내부의 내용

<div class="tit-page-2">
  <h2>교환상품 선택</h2>
</div>
<!-- 교환상품 선택 -->
<div class="pro-trade">
  <ul>
    <!--/block_trade_list/-->
    <!--/if_trade_name/-->
    <!--/block_trade_product/-->
    <li>
      <dl class="pro-wrap">
        <dt class="thumb-img">
          <!--/if_trade_image_s/-->
          <img src="
						<!--/trade_image_s/-->" alt="상품이미지" style="width:70px; height:70px">
          <!--/else/-->
          <img src="/images/common/noimage.gif" style="width:70px; height:70px" />
          <!--/end_if/-->
        </dt>
        <dd class="pro-name">
          <a href="
							<!--/link_trade_product/-->">
            <strong>
              <!--/trade_name/-->
            </strong>
            <br />
          </a>
          
<!--/loop_trade_bundle/-->
<div class="quantity option"> -
<!--/trade_bundle@product_name/-->
<!--/if_trade_bundle@option/--> : [
<!--/trade_bundle@option/-->]
<!--/end_if/--> (
<!--/trade_bundle@stock/-->개)
	<!--/if_trade_bundle@link_trade_bundle_option_modify/-->
  <a href="<!--/trade_bundle@link_trade_bundle_option_modify/-->" class="btn-option">선택 </a>
  <!--/end_if/-->
<!--/trade_bundle@trade_bundle_option_view/-->
</div>
<!--/end_loop/-->

          <div class="option">
            <label>수량</label>
            <!--/input_trade_amount/-->
            <!--/if_link_trade_option_modify/-->
            <a href="
								<!--/link_trade_option_modify/-->" class="btn-option">선택 </a>
            <!--/end_if/-->
            <!--/block_trade_option_view/-->
            <!--/trade_option/-->
            <!--/end_block/-->
          </div>
        </dd>
        <dd class="pro-price">
          <strong>
            <!--/trade_price/-->원
          </strong>
        </dd>
      </dl>
    </li>
    <!--/end_block/-->
    <!--/else/-->
    <li>
      <div class="no_data">교환하실 상품을 선택해 주세요.</div>
    </li>
    <!--/end_if/-->
    <!--/end_block/-->
  </ul>
</div>
<!-- // 교환상품 선택 -->

1. <!--/if_trade_popup_bundle_name/--> <!—/end_if/—> 내부의 내용

<!-- 교환상품 선택 팝업 -->
<!--/block_popup_trade_option/-->
<div class="opt-wrap">
  <h3> 교환상품 선택 <a href="
			<!--/link_trade_close/-->" class="pop-close btn-close">
      <span class="close">닫기</span>
    </a>
  </h3>
  <ul class="list">
    <li class="item">
      <dl class="pro-wrap">
        <dt class="thumb-img">
          <!--/if_trade_popup_image_s/-->
          <img src="
						<!--/trade_popup_image_s/-->" alt="상품이미지">
          <!--/else/-->
          <img src="/images/common/noimage.gif" style="width:70px; 
height:70px" />
          <!--/end_if/-->
        </dt>
        <dd class="pro-name">
          <p>
            <strong>
              <!--/trade_popup_name/-->
            </strong>
          </p>
          <div class="quantity">
 
<!--/if_trade_popup_bundle_name/-->
	<!--/trade_popup_bundle_name/-->
	<!--/else/-->
	  <!--/trade_popup_option/-->
    <span class="txt-gray">|</span> 수량
	    <!--/trade_popup_stock/-->개
<!--/end_if/-->

          </div>
        </dd>
        <dd class="pro-price">
          <strong>
            <!--/number/trade_popup_price/-->원
          </strong>
        </dd>
      </dl>
    </li>
  </ul>

CSS 추가 작업 필요

.smMypage .item-wrap.pro-trade ul.product-list li div.quantity.option a.btn-option {
    padding: 7px;
    line-height:31px;
    margin:0 0 0 7px;
    font-size:1.083em;
    border:1px solid #e0e0e0;
    border-radius:4px;
    text-align:center;
}