개요

이 커스터마이징은 체크아웃 버튼 위에 고정 배송 요금을 기준으로 소계, 배송비, 합계를 보여주는 명확한 비용 내역을 추가해요. 고객이 체크아웃 전에 최종 금액을 이해할 수 있도록 도와 신뢰를 높이고 망설임을 줄여줘요. 중요: 이 방법은 고정 배송 요금에서만 작동해요. 스토어에서 동적 배송비를 사용하는 경우 결과가 부정확할 수 있어요.

Upcart V1.0을 사용 중인 경우

1단계: 커스텀 HTML 추가하기

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

<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>

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

2단계: 커스텀 CSS 추가하기

Upcart > Cart Editor > Settings > Custom CSS로 이동하세요
다음 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;  
}

최종 결과

적용하면:

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

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

Upcart V2.0을 사용 중인 경우

1단계: 카트 요약 모듈로 이동하기

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

다음 코드를 붙여넣으세요:

해당 섹션의 커스텀 코드는 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번째 줄의 이 섹션이에요. 화면에 표시할 값을 결정할 때는 이 문서를 참고하세요

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

도움이 필요하신가요?

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

시작하기

장바구니 모듈

장바구니 설정

고정 장바구니 버튼

멀티카트

사용자 지정

분석

연동 및 호환성

요금 및 계정

문제 해결

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

개요

Upcart V1.0을 사용 중인 경우

1단계: 커스텀 HTML 추가하기

2단계: 커스텀 CSS 추가하기

최종 결과

Upcart V2.0을 사용 중인 경우

1단계: 카트 요약 모듈로 이동하기

도움이 필요하신가요?

​개요

​Upcart V1.0을 사용 중인 경우

​1단계: 커스텀 HTML 추가하기

​2단계: 커스텀 CSS 추가하기

​최종 결과

​Upcart V2.0을 사용 중인 경우

​1단계: 카트 요약 모듈로 이동하기

​도움이 필요하신가요?

개요

Upcart V1.0을 사용 중인 경우

1단계: 커스텀 HTML 추가하기

2단계: 커스텀 CSS 추가하기

최종 결과

Upcart V2.0을 사용 중인 경우

1단계: 카트 요약 모듈로 이동하기

도움이 필요하신가요?