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

이 커스터마이징은 HTML, CSS, JavaScript를 사용해 장바구니에 업셀 상품만 있을 때 체크아웃을 차단해요. 업셀이 독립적인 구매가 아니라 보조 오퍼로 취급되도록 보장하여, 더 통제되고 의도적인 업셀 전략을 뒷받침해요.

이렇게 하면 업셀 제품이 특정 경계 내에서 작동하여 주요 제품의 보완 상품으로서의 역할이 강조돼요.

구현하면 업셀이 아닌 제품이 최소 하나 장바구니에 추가될 때까지 **체크아웃 버튼이 비활성화**돼요.

<div id="how-it-works">
  ## 작동 방식
</div>

* 장바구니에 업셀 상품만 있으면 체크아웃 버튼이 회색으로 표시돼요
* 버튼 아래에 경고 메시지가 나타나요
* 일반 제품이 추가되면 버튼이 활성화되고 경고가 사라져요 - 대상 경고 메시지를 표시하는 등, 업셀 제품이 연관된 트리거 제품과 함께만 구매되도록 보장하는 시나리오에 대한 명확한 검증을 제공해요.

이 설정은 JavaScript와 CSS에 대한 기본 지식이 있는 스토어 운영자나 개발자에게 적합해요.

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

다음으로 이동하세요:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## **Above announcements/rewards** 섹션에 다음을 붙여넣으세요:
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>
```

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

<div id="in-the-below-checkout-button-section-paste">
  ## **Below checkout button** 섹션에 다음을 붙여넣으세요:
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

경고 메시지의 문구는 브랜드 톤에 맞게 자유롭게 조정하세요.

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

다음으로 이동하세요:\
**Upcart > Cart Editor > Settings > Custom CSS**

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

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

이 코드는 경고 메시지의 스타일을 지정하고 체크아웃 버튼을 시각적, 기능적으로 비활성화해요.

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

설정이 완료되면:

* 업셀이 아닌 제품이 최소 하나 장바구니에 있지 않으면 체크아웃이 차단돼요
* 체크아웃이 비활성화된 이유를 고객에게 메시지로 안내해요
* 매끄럽고 브랜드에 어울리는 경험을 제공해요

특히 다음에 도움이 돼요: 효과적인 업셀 전략을 이러한 기법과 결합하면 구매 과정에서 불필요한 충돌을 제거하여 전체적인 고객 쇼핑 경험도 개선돼요.

* 실수로 업셀 단일 상품이 구매되는 것 방지
* 업셀을 애드온 전용 제품으로 유지
* AOV와 제품 번들링에 대한 더 나은 통제 보장

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

커스터마이징에 도움이 필요하시면, 장바구니 드로어에 HTML, CSS, 그리고 JavaScript까지 추가하는 것에 대해 Shopify Expert와 상담하시는 것을 권장해요.

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