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

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

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

## 개별디자인 작업(PC)

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

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

1. \<!—/loop\_trade\_bundle/-->\<!—/end\_loog/—> 내부의 내용

```html
<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>
<!-- // 교환상품 선택 -->
```

2. \<!--/if\_trade\_popup\_bundle\_name/--> \<!—/end\_if/—> 내부의 내용

````html
<!-- 교환상품 선택 팝업 -->
<!--/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 추가 작업 필요

```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/—> 내부의 내용

```html
<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>
<!-- // 교환상품 선택 -->
```

2. \<!--/if\_trade\_popup\_bundle\_name/--> \<!—/end\_if/—> 내부의 내용

```html
<!-- 교환상품 선택 팝업 -->
<!--/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 추가 작업 필요

```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;
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.makeshop.co.kr/faq/product/undefined-1/undefined-34.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.