> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 체크아웃 버튼 위에 최종 합계 라인 추가하기

> 체크아웃 버튼 위 하나의 요약 섹션에 소계, 고정 배송비, 합계를 표시하세요.

<div id="overview">
  # 개요
</div>

이 커스터마이징은 체크아웃 버튼 위에 고정 배송 요금을 기준으로 소계, 배송비, 합계를 보여주는 명확한 비용 내역을 추가해요.

고객이 체크아웃 전에 최종 금액을 이해할 수 있도록 도와 신뢰를 높이고 망설임을 줄여줘요.

**중요:** 이 방법은 고정 배송 요금에서만 작동해요. 스토어에서 동적 배송비를 사용하는 경우 결과가 부정확할 수 있어요.

***

<div id="if-you-are-on-upcart-v10">
  ## Upcart V1.0을 사용 중인 경우
</div>

<div id="step-1-add-custom-html">
  #### 1단계: 커스텀 HTML 추가하기
</div>

1. **Upcart > Cart Editor > Settings > Custom HTML**로 이동하세요
2. **Select HTML Location** 드롭다운에서 **Above checkout button**을 선택하세요
3. 다음 코드를 붙여넣고 스토어의 배송비와 기준 금액에 맞게 변수를 수정하세요:

```
<hr>  
  
<div class="cartSummarySection">  
  <div class="cartSummarySubtotal alignLeft">  
    Subtotal:  
    <span class="alignRight subtotalprice">{{UPCART_SUBTOTAL}}</span>  
  </div>  
  
  <div class="cartSummaryShipping alignLeft">  
    Shipping:  
    <span class="alignRight upcartShipping"></span>  
  </div>  
  
  <div class="cartSummaryEndTotal alignLeft">  
    Total:  
    <span class="alignRight upcartEndTotal"></span>  
  </div>  
  
  <div style="clear: both; display: flex;"></div>  
</div>  
  
<script>  
  var shippingThreshold = 15000; // In cents  
  var shippingCostWhenUnderThreshold = 290; // In cents  
  var textWhenUnderShippingThreshold = "$2.90";  
  var textWhenOverShippingThreshold = "FREE";  
  var currencySymbolToAddInfrontOfEndPrice = "$";  
  var shouldCurrencySymbolBeOnLeftSide = true;  
  
  window.upcartSubscribeCartLoaded((event) => {  
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");  
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");  
  
    if (event.cart.total < shippingThreshold) {  
      shippingText.innerText = textWhenUnderShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
  
    } else {  
      shippingText.innerText = textWhenOverShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          (event.cart.total / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          (event.cart.total / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
    }  
  });  
</script>
```

<Note>
  **레거시 참고 사항:** `window.upcartOnCartLoaded` 콜백은 여전히 작동하지만 더 이상 사용되지 않으며(deprecated) 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 `upcartSubscribeCartLoaded`를 사용하세요.
</Note>

<div id="step-2-add-custom-css">
  #### 2단계: 커스텀 CSS 추가하기
</div>

1. **Upcart > Cart Editor > Settings > Custom CSS**로 이동하세요
2. 다음 CSS를 붙여넣고 카트 푸터에 맞게 `background-color` 등 스타일을 조정하세요:

```
.upcart-footer {  
  padding-top: 0px !important;  
}  
  
.cartSummarySection {  
  background-color: #f6f4ef !important;  
  padding: 10px 23px;  
}  
  
.cartSummarySubtotal,  
.cartSummaryShipping,  
.cartSummaryEndTotal {  
  color: black;  
  width: 100%;  
  text-align: left;  
  font-weight: normal;  
  font-size: 16px;  
  padding: 0;  
}  
  
#CartPopup hr {  
  margin: 0px !important;  
}  
  
.alignLeft {  
  float: left;  
}  
  
.alignRight {  
  float: right;  
}
```

<div id="final-result">
  ## 최종 결과
</div>

적용하면:

* 체크아웃 버튼 위에 비용 내역이 표시돼요
* 고객이 소계, 배송비(고정 또는 FREE), 합계를 볼 수 있어요
* 배송비가 설정한 기준 금액에 따라 동적으로 조정돼요

이는 비용 투명성을 높이고, 신뢰를 개선하며, 체크아웃 이탈을 줄일 수 있어요.

***

<div id="if-you-are-on-upcart-v20">
  ## Upcart V2.0을 사용 중인 경우
</div>

<div id="step-1-go-to-cart-summary-module">
  #### 1단계: 카트 요약 모듈로 이동하기
</div>

1. 먼저 커스텀 템플릿을 활성화하세요: **Upcart > Cart Editor > Settings > Cart settings**에서 **Advanced Settings**를 펼치고 **Access custom templates**를 체크하세요. 기본적으로 꺼져 있으며, 켜기 전까지 Cart summary 탭에는 에디터 없이 "Custom templates aren't enabled" 메시지만 표시돼요.
2. **Upcart > Cart Editor > Cart summary > Custom template**로 이동하세요
3. 다음 코드를 붙여넣으세요:

   1. 해당 섹션의 커스텀 코드는 52번째 줄부터 73번째 줄까지예요

      ```
      <div>  
        <div className="upcart-internal-cart-summary upcart-public-cart-summary">  
          <div className="upcart-internal-cart-summary__discount-codes upcart-public-cart-summary__discount-codes">  
            <span className="upcart-internal-cart-summary__discount-label upcart-public-cart-summary__discount-label">  
              {props.totalSavingsText}  
            </span>  
        
            <div className="upcart-internal-cart-summary__slide-codes upcart-public-cart-summary__slide-codes">  
              {props.discountApplications.map((discountApplication) => (  
                <span  
                  key={discountApplication.key}  
                  className="upcart-internal-component-tag upcart-public-component-tag"  
                >  
                  <span className="upcart-internal-component-tag__icon upcart-public-component-tag__icon">  
                    <svg  
                      xmlns="http://www.w3.org/2000/svg"  
                      viewBox="0 0 20 20"  
                      focusable="false"  
                    >  
                      <title>Discount tag icon</title>  
                      <path  
                        fillRule="evenodd"  
                        d="M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.187a3.25 3.25 0 0 1-.996 2.34l-4.747 4.572a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Zm4.425 3.351a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"  
                      />  
                    </svg>  
                  </span>  
        
                  <span className="upcart-internal-component-tag__text upcart-public-component-tag__text">  
                    {discountApplication.title}  
                  </span>  
        
                  {discountApplication.type === "discount_code" && (  
                    <button  
                      type="button"  
                      className="upcart-internal-component-tag__remove-button upcart-public-component-tag__remove-button"  
                      onClick={props.handleRemoveDiscount}  
                      aria-label="Remove tag"  
                    >  
                      {props.isRemovingDiscount ? (  
                        <div className="upcart-internal-component-loader upcart-public-component-loader" />  
                      ) : (  
                        <svg  
                          xmlns="http://www.w3.org/2000/svg"  
                          viewBox="0 0 20 20"  
                        >  
                          <path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z" />  
                        </svg>  
                      )}  
                    </button>  
                  )}  
                </span>  
              ))}  
            </div>  
          </div>  
        
          <div>  
            {props.showCartTotalDiscount && (  
              <span  
                className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"  
                dangerouslySetInnerHTML={{  
                  __html: props.formattedCartTotalDiscount,  
                }}  
              />  
            )}  
          </div>  
        </div>  
        
        {/* Custom code for summary section */}  
        <hr />  
        
        <div className="upcart-custom-cart-summary__container">  
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
            Subtotal:  
            <span className="upcart-custom-cart-summary__subtotal-value">  
              ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
            Shipping:  
            <span className="upcart-custom-cart-summary__shipping-value">  
              $2.99  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
            Total:  
            <span className="upcart-custom-cart-summary__cart-total-value">  
              {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
              ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
            </span>  
          </div>  
        </div>  
      </div>
      ```

      b. 핵심 부분은 52\~73번째 줄의 이 섹션이에요. 화면에 표시할 값을 결정할 때는 [이 문서](/ko/upcart/setting_up_a_custom_template_in_upcart#available-props-full-template)를 참고하세요

      ```
        <hr />  
        
        <div className="upcart-custom-cart-summary__container">  
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
            Subtotal:  
            <span className="upcart-custom-cart-summary__subtotal-value">  
              ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
            Shipping:  
            <span className="upcart-custom-cart-summary__shipping-value">  
              $2.99  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
            Total:  
            <span className="upcart-custom-cart-summary__cart-total-value">  
              {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
              ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
            </span>  
          </div>  
        </div>
      ```

      c. **Upcart > Cart Editor > Settings > Custom CSS**로 이동해 다음을 추가하세요:

      ```
      .upcart-custom-cart-summary__row {  
        display: flex;  
        flex-direction: row;  
        justify-content: space-between;  
      }
      ```

***

<div id="need-help">
  ## 도움이 필요하신가요?
</div>

여러 배송 기준 금액이나 고급 로직에 맞게 조정하고 싶다면 **Shopify Expert**와 협업하는 것을 권장해요. Upcart 지원팀은 커스텀 코드 구현이나 디버깅을 지원하지 않아요.