> ## 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. # 카트 아이콘 수량/카운터가 업데이트되지 않아요 > 이 문서는 Upcart에서 카트 아이콘 수량이 업데이트되지 않을 때 해결하는 방법을 안내해요.
# 개요
일부 테마는 아이콘을 자동으로 업데이트하지 않아요. 이 가이드는 약간의 커스텀 코드를 사용해 이를 해결하는 방법을 안내해 드릴게요. 아래 단계를 따라 모든 것이 올바르게 동기화되도록 하세요. **이 불일치가 어떤 모습인지 예시를 보여드릴게요:** Upcart 드로어에는 Cart 2가 표시되지만 테마 카트 아이콘 버블에는 여전히 1이 표시되는 모습 ***
# 시작하기 전 중요한 단계!
카트 아이콘 문제를 해결하려면 카트 아이콘의 클래스 이름을 확인해야 해요. 테마마다 다르기 때문에 이 단계를 통해 코드가 여러분의 스토어에 맞게 작동하도록 보장할 수 있어요.
### **1. Chrome 개발자 도구 사용하기**
테마마다 다르기 때문에 Chrome 개발자 도구(검사)를 사용해 카트 아이콘의 클래스 이름을 확인해야 해요. * Google Chrome에서 스토어프론트의 카트 아이콘을 마우스 오른쪽 버튼으로 클릭하고 **검사**를 선택하세요. * 카트 아이콘의 HTML 요소를 찾으세요 (예: **``**). * **Chrome 개발자 도구 사용에 도움이 필요하신가요?** 단계별 안내는 [이 가이드](https://developer.chrome.com/docs/devtools/overview/)를 확인하세요.
### **2. 도움 요청하기 (선택 사항)**
카트 아이콘 클래스를 찾을 수 없거나 막혔다고 느껴도 걱정하지 마세요! 다음과 같은 선택지가 있어요: * **테마 개발자에게 문의하기:** 테마를 가장 잘 아는 사람들이라 올바른 클래스를 찾는 데 도움을 줄 수 있어요. * **Shopify Expert 고용하기:** 추가 지원이 필요하다면 Shopify에는 도움을 줄 수 있는 신뢰할 수 있는 전문가 디렉터리가 있어요. [여기서 Shopify Expert를 찾아보세요](https://experts.shopify.com/).
## 🚧 **커스텀 코드 면책 조항**
아래 제공된 예시 코드는 템플릿일 뿐이에요. **그대로 복사해 붙여넣으면 작동하지 않아요**. 플레이스홀더 클래스 이름(예: **`.cart-count-bubble > span`**)을 여러분의 카트 아이콘에 해당하는 클래스 이름으로 교체해야 해요. ***
# 단계별 해결 방법
이 과정을 세 가지 수준의 해결 방법으로 나누었으며, 가장 간단한 해결책(Level 1)부터 시작해요. 각 수준은 이전 수준을 기반으로 하므로 먼저 Level 1을 시도하고, 필요한 경우에만 Level 2 또는 3으로 넘어가세요.
## **1단계: Upcart에 커스텀 코드 추가하기**
먼저 Upcart 에디터에 커스텀 HTML 코드를 추가해야 하니 해당 섹션을 준비해 볼게요: 1. **Upcart Editor > Settings**로 이동한 다음 **Custom HTML** 탭을 여세요 (탭 행에 다 표시되지 않으면 **More settings** 안에 있어요). 2. 위치를 \*\*Scripts (Before Load)\*\*로 설정하세요. 3. 편집한 코드를 여기에 붙여넣으세요 (아래에서 각 수준별 예시를 제공할게요). 이 과정은 다음과 같아요: HTML 위치가 Scripts Before Load로 설정된 Upcart Custom HTML 설정 ***
# **2단계: 수준별로 해결 방법 적용하기**
## Level 1 (기본)
카트가 로드될 때 이 스크립트는 카트 라인 아이템의 수량을 합산해 테마의 카트 버블 안 카운트 요소에 기록해요. 카운트가 간단한 중첩 요소(예: `.cart-count-bubble > span`)에 있는 테마에 적합해요. **잊지 마세요** * \*\*`.cart-count-bubble > span`\*\*을 여러분의 카트 아이콘 클래스로 교체하세요. * 코드 추가 후 스토어프론트에서 테스트하세요. cart-count-bubble 셀렉터를 사용해 Level 1 카운트 스크립트를 Upcart Custom HTML에 붙여넣는 모습
## Level 1 예시 코드
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **레거시 참고:** `window.upcartOnCartLoaded` 콜백은 여전히 작동하지만 지원 중단(deprecated)되었으며 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 `upcartSubscribeCartLoaded`를 사용하세요. `event.cart`에는 `item_count` 속성이 없으니, 총 아이템 수를 계산하려면 `event.cart.items.reduce((total, item) => total + item.quantity, 0)`를 사용하세요. ***
## Level 2 (중급)
Level 1이 작동하지 않았다면, 테마가 카운트가 변경될 때 전체 카트 아이콘 HTML을 교체하는 방식일 수 있어요. 이 버전은 빈 카트 상태와 비어 있지 않은 카트 상태에 대해 아이콘 마크업을 다시 만들어 카운트와 아이콘이 동기화되도록 해요. **잊지 마세요** * \*\*`#cart-icon-bubble-custom`\*\*을 테마의 카트 아이콘 래퍼 셀렉터로 교체하세요. * 저장 후 테스트하세요. cart-icon-bubble-custom 셀렉터를 사용해 Level 2 카트 아이콘 스크립트를 Upcart Custom HTML에 붙여넣는 모습
### Level 2 예시 코드
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **레거시 참고:** `window.upcartOnCartLoaded` 콜백은 여전히 작동하지만 지원 중단되었으며 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 `upcartSubscribeCartLoaded`를 사용하세요. `event.cart`에는 `item_count` 속성이 **없어요** — 위 스크립트들은 `event.cart.items.reduce((total, item) => total + item.quantity, 0)`로 합계를 계산해 `itemCount`로 전달해요. `cart.item_count`를 사용하는 이 스니펫의 예전 버전은 `ReferenceError`를 발생시키고 아이콘이 조용히 업데이트되지 않아요. ***
## Level 3 (고급)
테마가 데스크톱과 모바일에 대해 **별도의** 카트 아이콘 마크업을 사용한다면, 각 뷰포트가 올바른 HTML과 카운트를 갖도록 두 개의 셀렉터에 동일한 업데이트 로직을 실행하세요. **잊지 마세요** * \*\*`#cart-icon-bubble-custom-desktop`\*\*과 \*\*`#cart-icon-bubble-custom-mobile`\*\*을 테마의 클래스로 교체하세요. * 데스크톱과 모바일 뷰 모두에서 철저히 테스트하세요. 데스크톱과 모바일 카트 아이콘 셀렉터를 분리해 Level 3 스크립트를 Upcart Custom HTML에 붙여넣는 모습
### Level 3 예시 코드
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **레거시 참고:** `window.upcartOnCartLoaded` 콜백은 여전히 작동하지만 지원 중단되었으며 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 `upcartSubscribeCartLoaded`를 사용하세요. `event.cart`에는 `item_count` 속성이 **없어요** — 위 스크립트들은 `event.cart.items.reduce((total, item) => total + item.quantity, 0)`로 합계를 계산해 `itemCount`로 전달해요. `cart.item_count`를 사용하는 이 스니펫의 예전 버전은 `ReferenceError`를 발생시키고 아이콘이 조용히 업데이트되지 않아요. ***
# 여전히 작동하지 않나요?
이 수준들 중 어느 것도 문제를 해결하지 못해도 걱정하지 마세요. 아직 방법이 있어요! 이는 테마에 더 고급 커스터마이징이 필요하다는 의미일 가능성이 높아요. **다음으로 할 수 있는 일이에요:** * 테마 개발자에게 도움을 요청하세요. * 스토어에 맞춘 커스텀 솔루션을 만들 수 있는 [Shopify Expert](https://www.shopify.com/partners/directory)를 고용하세요.