Skip to main content

概要

このカスタマイズは、HTML、CSS、JavaScript を使用して、カートにアップセルアイテムしか入っていない場合にチェックアウトをブロックします。アップセルが単独の購入対象ではなく、あくまで付随的なオファーとして扱われるようにし、より統制された意図的なアップセル戦略をサポートします。 これにより、アップセル商品が特定の境界内で機能するようになり、主要商品の補完アイテムとしての役割が強調されます。 実装すると、アップセル以外の商品が少なくとも 1 つカートに追加されるまで、チェックアウトボタンが無効になります

仕組み

  • カートにアップセルアイテムしか入っていない場合、チェックアウトボタンがグレーアウトされます
  • ボタンの下に警告メッセージが表示されます
  • 通常商品が追加されると、ボタンが有効になり警告が消えます - アップセル商品が関連するトリガー商品と一緒にのみ購入されるように、対象を絞った警告メッセージを表示するなど、シナリオに対する明確な検証を提供します。
このセットアップは、JavaScript と CSS の基本知識を持つストアオーナーや開発者に最適です。

ステップ 1: カスタム HTML を追加する

次の場所に移動します:
Upcart > Cart Editor > Settings > Custom HTML

Above announcements/rewards セクションに以下を貼り付けます:

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

Below checkout button セクションに以下を貼り付けます:

警告メッセージの文言は、ブランドのトーンに合わせて自由に調整してください。

ステップ 2: カスタム CSS を追加する

次の場所に移動します:
Upcart > Cart Editor > Settings > Custom CSS
次のコードを貼り付けます:
これにより、警告メッセージのスタイルが設定され、チェックアウトボタンが視覚的にも機能的にも無効になります。

最終結果

セットアップが完了すると:
  • アップセル以外の商品が少なくとも 1 つカートに入っていない限り、チェックアウトがブロックされます
  • チェックアウトが無効になっている理由を顧客にメッセージで伝えます
  • スムーズでブランドに合った体験になります
これは特に次のような場合に役立ちます: 効果的なアップセル戦略とこれらのテクニックを組み合わせることで、購入プロセスにおける不要な競合を排除し、顧客の全体的なショッピング体験も向上します。
  • 誤ったアップセル単品購入の防止
  • アップセルをアドオン専用商品として維持
  • AOV と商品バンドルのより優れた管理

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

カスタマイズに関するサポートが必要な場合は、cart drawer への HTML、CSS、さらには JavaScript の追加について、Shopify エキスパートに相談することをおすすめします。 Shopify エキスパートを見る