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

# 제품 ID를 사용하여 특정 장바구니 요소 숨기기

> 제품 ID를 사용하여 장바구니 내용에 따라 리워드 바 또는 기타 장바구니 요소를 조건부로 숨기세요.

⚠️ **중요 공지**

이 커스터마이징은 Upcart 장바구니 모듈의 버전 1에서만 작동해요. 최근에 장바구니를 버전 2로 업그레이드하셨다면 이 커스터마이징이 작동하지 않을 수 있어요. [마이그레이션 가이드](/ko/upcart/upcart_v20_migration_guide)에서 제공하는 버전 2용 새 선택자를 사용하셔야 해요.

커스터마이징이 예상대로 작동하지 않는 경우, 직접 장바구니를 버전 1로 되돌릴 수 있어요. Cart Editor에서 왼쪽 메뉴 상단의 **Cart version** 드롭다운을 사용해 **V1.0 (Legacy)** 를 선택하세요. 이 드롭다운은 장바구니의 모든 모듈이 V2에 있을 때 표시돼요.

현재 모듈 버전 2를 위한 새로운 커스터마이징 템플릿을 준비하고 있으며, 곧 제공될 예정이에요.

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

이 커스터마이징을 사용하면 특정 제품이 장바구니에 있을 때 리워드 바와 같은 장바구니의 특정 부분을 숨길 수 있어요. 특정 SKU에 대해 장바구니 경험을 단순화하거나 특정 프로모션이 특정 상품과 함께 표시되지 않도록 하고 싶을 때 유용해요.

이 설정은 제품 ID를 사용해 장바구니에 어떤 제품이 있는지 감지하고, 일치하는 제품이 발견되면 선택한 요소를 숨겨요. Upcart 에디터에서 커스텀 HTML과 CSS를 사용해 이 로직을 적용하게 돼요.

***

<div id="when-to-use-this">
  ## 언제 사용하나요
</div>

* 프로모션 상품이 장바구니에 있을 때 리워드 바 숨기기
* 제품 유형에 따라 커스텀 콘텐츠 블록, 신뢰 배지 또는 업셀 섹션 숨기기
* 특정 상품에 대해 더 깔끔하거나 맞춤화된 체크아웃 흐름 유지

이 방식은 HTML과 JavaScript에 대한 기본 지식이 필요해요.

***

<div id="step-1-find-the-product-ids">
  ## 1단계: 제품 ID 찾기
</div>

1. **Shopify Admin > Products**로 이동하세요
2. 대상으로 지정할 제품을 클릭하세요
3. URL에서 `/products/` 뒤에 있는 숫자 제품 ID를 복사하세요

**예시:**

```
/products/1234567890 → 1234567890
```

이 ID들은 표시 여부를 제어하는 JavaScript 배열에서 사용하게 돼요.

***

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

1. **Upcart > Cart Editor > Settings > Custom HTML**로 이동하세요
2. 아래 코드를 **Above announcements/rewards**와 **On empty cart screen** HTML 위치 **모두**에 붙여넣으세요
3. `productIDsToExclude`의 값을 여러분의 제품 ID로 교체하세요
4. `.YOUR-CLASS-HERE`를 숨기고 싶은 장바구니 요소로 변경하세요 (예: `.upcart-rewards`, `.custom-message`, `.trust-badge`)

```
<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>
```

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

***

<div id="step-3-optional-fallback-css">
  ## 3단계: 선택적 폴백 CSS
</div>

장바구니가 완전히 로드되기 전에 요소가 숨겨지도록 하고 싶다면, **Custom CSS** 섹션에 다음을 추가하세요:

```
.YOUR-CLASS-HERE {   display: none; }
```

**참고:** 이 방법은 JavaScript가 실행될 때까지 모든 사용자에게 요소를 일시적으로 숨길 수 있어 깜빡임이 발생할 수 있어요. 대부분의 경우 JavaScript 방식에 의존하는 것이 더 좋아요.

***

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

설정이 완료되면:

* 장바구니에 지정된 제품 중 하나가 포함되어 있으면 대상 장바구니 요소(예: 리워드 바)가 숨겨져요
* 그렇지 않으면 요소는 계속 표시돼요
* 이 로직을 재사용하여 제품별 규칙에 따라 다른 요소를 숨기거나 표시할 수 있어요

***

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

더 복잡한 커스터마이징의 경우 **Shopify Expert**와 함께 작업하시는 것을 권장해요. 장바구니 드로어 내부의 HTML, CSS, JavaScript 작업을 도와드릴 수 있어요.

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