> ## 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 Developer Toolsを使用する**
テーマはそれぞれ異なるため、Chrome Developer Tools（検証）を使用してカートアイコンのクラス名を特定する必要があります。 * Google Chromeで、ストアフロント上のカートアイコンを右クリックし、**検証**を選択します。 * カートアイコンのHTML要素を見つけます（例: **``**）。 * **Chrome Developer Toolsの使い方でお困りですか？** ステップバイステップの手順については、[こちらのガイド](https://developer.chrome.com/docs/devtools/overview/)をご覧ください。
### **2. サポートを求める（任意）**
カートアイコンのクラスが見つからなかったり、行き詰まったりしても、心配はいりません！選択肢があります: * **テーマの開発者に連絡する:** テーマを最もよく知っているのは開発者であり、正しいクラスを見つける手助けをしてくれます。 * **Shopify Expertを雇う:** 追加のサポートが必要な場合、Shopifyには信頼できるエキスパートのディレクトリがあります。[Shopify Expertはこちらから探せます](https://experts.shopify.com/)。
## 🚧 **カスタムコードに関する免責事項**
以下に示すサンプルコードはテンプレートに過ぎず、**そのままコピー＆ペーストしても動作しません**。プレースホルダーのクラス名（例: **`.cart-count-bubble > span`**）を、あなたのカートアイコンの特定のクラス名に置き換える必要があります。 ***
# ステップバイステップの修正
このプロセスは、最もシンプルな解決策（レベル1）から始まる3段階の修正レベルに分かれています。各レベルは前のレベルを基にしています。まずレベル1を試し、必要な場合にのみレベル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: レベルごとに修正を適用する**
## レベル1（基本）
カートが読み込まれると、このスクリプトはカートのラインアイテムの数量を合計し、その値をテーマのカートバブル内のカウント要素に書き込みます。カウントがシンプルなネストされた要素（たとえば `.cart-count-bubble > span`）にあるテーマに適しています。 **お忘れなく** * **`.cart-count-bubble > span`** をあなたのカートアイコンのクラスに置き換えてください。 * コードを追加した後、ストアフロントでテストしてください。 cart-count-bubbleセレクターを使用してレベル1のカウントスクリプトをUpcartのCustom HTMLに貼り付ける様子
## レベル1のサンプルコード
```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)` を使用してください。 ***
## レベル2（中級）
レベル1で解決しなかった場合、テーマがカウントの変更時にカートアイコンのHTML全体を置き換えている可能性があります。このバージョンは、カートが空の状態と空でない状態のアイコンのマークアップを再構築し、カウントとアイコンが同期し続けるようにします。 **お忘れなく** * **`#cart-icon-bubble-custom`** を、あなたのテーマのカートアイコンのラッパーセレクターに置き換えてください。 * 保存後にテストしてください。 cart-icon-bubble-customセレクターを使用してレベル2のカートアイコンスクリプトをUpcartのCustom HTMLに貼り付ける様子
### レベル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` をスローし、アイコンが更新されないまま気づかれない状態になります。 ***
## レベル3（上級）
テーマがデスクトップとモバイルで**別々の**カートアイコンのマークアップを使用している場合は、同じ更新ロジックを2つのセレクターに対して実行し、各ビューポートで正しいHTMLとカウントが表示されるようにします。 **お忘れなく** * **`#cart-icon-bubble-custom-desktop`** と **`#cart-icon-bubble-custom-mobile`** を、あなたのテーマのクラスに置き換えてください。 * デスクトップとモバイルの両方のビューで十分にテストしてください。 デスクトップとモバイルで別々のカートアイコンセレクターを使用してレベル3のスクリプトをUpcartのCustom HTMLに貼り付ける様子
### レベル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) を雇う。