> ## 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="what-this-customization-does">
  ## 이 커스터마이징의 기능
</div>

* 체크아웃 버튼 아래에 이용약관 체크박스를 추가해요
* 고객이 동의할 때까지 체크아웃을 진행하지 못하도록 막아요
* 표준 체크아웃 버튼을 차단해요. 빠른 결제 모듈 **Version 1**에서는 빠른 결제 버튼도 회색으로 표시돼요 — Version 2를 사용 중이라면 아래 참고 사항을 확인하세요
* 텍스트와 링크를 자유롭게 커스터마이징할 수 있어요

이 커스터마이징에는 기본적인 HTML, JavaScript, CSS가 필요해요. 초급 수준의 코딩 지식을 가진 스토어 운영자나 개발자에게 적합해요.

<Warning>
  **빠른 결제 버튼 관련 부분은 Version 1 전용이에요.** 이 스크립트는 `#upcart-additional-checkout-buttons`를 찾고, CSS는 `.upcart-express-pay-button`을 스타일링하는데 — 둘 다 Version 1 빠른 결제 모듈에 속해요. Version 2는 `#upcart-express-payments`를 렌더링하고 Shopify 자체 버튼을 복제하는데, 이 버튼에는 두 셀렉터가 모두 없기 때문에 체크박스가 체크되지 않아도 빠른 결제는 계속 클릭할 수 있어요. 표준 체크아웃 버튼은 두 버전 모두에서 차단돼요.
</Warning>

***

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

1. **Upcart > Cart Editor > Settings > Custom HTML**로 이동하세요
2. **Above announcements/rewards**에 다음을 붙여넣으세요:

```
<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>
```

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

1. **Below checkout button**에 다음을 붙여넣으세요. 링크와 텍스트를 스토어의 약관에 맞게 수정하세요:

```
<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>
```

***

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

1. **Upcart > Cart Editor > Settings > Custom CSS**로 이동하세요
2. 스타일을 제어하려면 다음을 붙여넣으세요:

```
.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}
```

`color`, `background-color`, `opacity` 값을 수정해 브랜드에 맞게 색상을 변경할 수 있어요.

***

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

고객이 카트를 열면:

* 체크박스를 체크할 때까지 체크아웃 및 빠른 결제 버튼이 비활성화돼요
* 동의 없이 진행하려고 하면 빨간색 경고 메시지가 표시돼요
* 체크박스를 체크하면 모든 버튼이 활성화돼요

***

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

고급 구현이나 더 복잡한 요구 사항의 경우 **Shopify Expert**와 협업하는 것을 권장해요. Upcart 지원팀은 커스텀 코드 작성이나 문제 해결을 지원하지 않아요.

[Shopify Experts 보기](https://www.shopify.com/partners/directory)