개요

이 튜토리얼에서는 체크아웃 버튼 아래에 고객이 스토어의 이용약관에 동의하도록 요구하는 체크박스를 추가하는 방법을 알아볼게요. 체크되지 않은 상태에서는 체크아웃 버튼과 빠른 결제 버튼이 비활성화돼요. 이는 법적 준수를 보장하고, 명확한 기대치를 설정하고, 카트 경험에 전문성을 더하는 훌륭한 방법이에요.

이 커스터마이징의 기능

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

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

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

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

Upcart > Cart Editor > Settings > Custom HTML로 이동하세요
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>

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

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>

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

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

.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 값을 수정해 브랜드에 맞게 색상을 변경할 수 있어요.

최종 결과

고객이 카트를 열면:

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

도움이 필요하신가요?

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

시작하기

장바구니 모듈

장바구니 설정

고정 장바구니 버튼

멀티카트

사용자 지정

분석

연동 및 호환성

요금 및 계정

문제 해결

카트에 필수 이용약관 체크박스 추가하기

개요

이 커스터마이징의 기능

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

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

최종 결과

도움이 필요하신가요?

​개요

​이 커스터마이징의 기능

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

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

​최종 결과

​도움이 필요하신가요?

개요

이 커스터마이징의 기능

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

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

최종 결과

도움이 필요하신가요?