⚠️ 重要なお知らせ このカスタマイズは、Upcart カートモジュールのバージョン 1 でのみ動作します。最近カートをバージョン 2 にアップグレードした場合、これらのカスタマイズは動作しない可能性があります。移行ガイドで提供されているバージョン 2 用の新しいセレクターを使用する必要があります。カスタマイズが期待どおりに動作しない場合は、カートを自分でバージョン 1 に戻すことができます。Cart Editor で、左側メニュー上部にある Cart version ドロップダウンを使用し、V1.0 (Legacy) を選択してください。このドロップダウンは、カート内のすべてのモジュールが V2 になると表示されます。現在、モジュールのバージョン 2 用の新しいカスタマイズテンプレートを作成中で、まもなく利用可能になる予定です。

概要

このカスタマイズを使うと、特定の商品がカートに入っている場合に、リワードバーなどカートの特定の部分を非表示にできます。特定の SKU についてカート体験をシンプルにしたい場合や、特定のアイテムと一緒に特定のプロモーションが表示されないようにしたい場合に便利です。このセットアップでは、商品 ID を使用してどの商品がカートに入っているかを検出し、一致が見つかった場合に選択した要素を非表示にします。ロジックは、Upcart エディタのカスタム HTML と CSS を使用して適用します。

使いどころ

プロモーション商品がカートに入っているときにリワードバーを非表示にする
商品タイプに応じて、カスタムコンテンツブロック、トラストバッジ、アップセルセクションを非表示にする
特定のアイテムについて、よりすっきりした、または最適化されたチェックアウトフローを維持する

この方法には、HTML と JavaScript の基本的な知識が必要です。

ステップ 1：商品 ID を確認する

Shopify 管理画面 > 商品に移動します
対象にしたい商品をクリックします
URL 内の /products/ の後にある数値の商品 ID をコピーします

例：

/products/1234567890 → 1234567890

これらの ID を、表示を制御する JavaScript の配列で使用します。

ステップ 2：カスタム HTML を追加する

Upcart > Cart Editor > Settings > Custom HTML に移動します
以下のコードを、Above announcements/rewards と On empty cart screen の両方の HTML 欄に貼り付けます
productIDsToExclude の値をご自身の商品 ID に置き換えます
.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>

レガシーに関する注意： window.upcartOnCartLoaded のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeCartLoaded を使用してください。

ステップ 3：オプションのフォールバック CSS

カートの完全な読み込み前に要素を確実に非表示にしたい場合は、Custom CSS セクションに以下を追加します：

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

注意： これにより、JavaScript が実行されるまですべてのユーザーに対して要素が一時的に非表示になり、ちらつきが発生する可能性があります。ほとんどの場合、JavaScript の方法に頼る方が適切です。

最終結果

セットアップが完了すると：

カートに指定した商品のいずれかが含まれている場合、対象のカート要素（リワードバーなど）が非表示になります
それ以外の場合、要素は表示されたままです
このロジックを再利用して、商品固有のルールに基づいてさまざまな要素の表示/非表示を切り替えられます

まだサポートが必要ですか？

より複雑なカスタマイズについては、Shopify Expert との連携をおすすめします。カートドロワー内の HTML、CSS、JavaScript を支援してもらえます。 Shopify Experts を見る

はじめに

カートモジュール

カート設定

スティッキーカートボタン

Multicart

カスタマイズ

アナリティクス

連携と互換性

請求とアカウント

トラブルシューティング

商品 ID を使って特定のカート要素を非表示にする

概要

使いどころ

ステップ 1：商品 ID を確認する

ステップ 2：カスタム HTML を追加する

ステップ 3：オプションのフォールバック CSS

最終結果

まだサポートが必要ですか？

​概要

​使いどころ

​ステップ 1：商品 ID を確認する

​ステップ 2：カスタム HTML を追加する

​ステップ 3：オプションのフォールバック CSS

​最終結果

​まだサポートが必要ですか？

概要

使いどころ

ステップ 1：商品 ID を確認する

ステップ 2：カスタム HTML を追加する

ステップ 3：オプションのフォールバック CSS

最終結果

まだサポートが必要ですか？