Skip to main content
⚠️ 重要なお知らせ 以下のテーマスニペットは、Upcart カートモジュールの両バージョンに適用されます。これにより Shopify がページ上に迅速チェックアウト（accelerated checkout）ボタンをレンダリングするようになり、モジュールのバージョンに関係なく Upcart にはこれが必要です。 以下の .additional-checkout-buttons セレクターは、Upcart のモジュールクラスではなく、迅速チェックアウトのコンテナに対する Shopify 自身のクラスであるため、どちらのカートバージョンでも同じです。

​
概要

エクスプレスチェックアウトボタンがクリックできない、または Upcart 内に表示されないことがあります。これは、Shopify がテーマ内でエクスプレス決済ボタンのレンダリングを制御している仕組みに起因するよくある問題です。 このガイドでは、なぜこれが起こるのか、そしてどのように解決できるかを説明します。

​
新モジュールに必要なセットアップ

⚠️ 重要： これらの手順は、レガシー版ではなく、Upcart の新しい Express Payments モジュールに適用されます。 Upcart でエクスプレスチェックアウトボタンを正しく動作させるには、Shopify テーマに小さなコードスニペットを追加する必要があります。このスニペットがないと、Shopify はカートドロワー内で決済ボタンを正しく読み込みません。変更を行う前に、該当する決済方法（Shop Pay、PayPal、Apple Pay、Google Pay など）が Shopify 管理画面のアカウント設定で有効になっていることを確認してください。これらの決済方法を有効にしなければ、ボタンは表示されません。さらに、スニペットがテーマファイル内の開始 <body> タグ（例：<body class="...">）の直下に配置されていることを確認してください。閉じタグ </body> の後など、誤った場所に配置すると、エクスプレスチェックアウトボタンが正しく機能しない場合があります。

​
解決方法

  1. Shopify 管理画面に移動します。
  2. オンラインストア > テーマ > コードを編集に移動します。
  3. layout/theme.liquid を開き、<body> の行を見つけて、その直下の新しい行に以下のスニペットを追加します。カートが開く可能性のあるすべてのページにボタンが存在する必要があるため、cart-drawer.liquid や他の場所ではなく、必ずここに配置してください。
  1. 変更を保存し、ストアフロントを更新します。
  2. カートドロワーを再度開き、エクスプレスチェックアウトボタン（Shop Pay、PayPal、Apple Pay、Google Pay など）が表示され、クリックできることを確認します。
完全なセットアップ手順については、Express Payments モジュールガイドをご覧ください。

​
この問題が起こる理由

エクスプレス決済ボタンは、Upcart ではなく Shopify によって完全に管理されています。これは次のことを意味します：
  • Upcart は独自のボタンをレンダリングしません。ページ上にある Shopify の迅速チェックアウトボタンをカートドロワー内に**複製（クローン）**します。そのため、まずボタンがページ上に存在している必要があり、それを保証するのが上記のテーマスニペットです。
  • Apple Pay は、Apple Pay が設定されている Apple デバイスでのみ表示されます。
  • コンテンツと機能は Shopify によって処理されるため、Upcart はどのエクスプレスボタンが表示されるかを制御しません。
🎨 注意：
Upcart 内のボタンは視覚的なコンテナとして機能し、その表示と動作は Shopify が制御します。Upcart はボタンの外観や機能を変更できません。

​
よくある問題と解決策

​
1. ボタンがページ上にレンダリングされていない

これが最も一般的な原因です。Upcart はページ上の Shopify のボタンを複製するため、ページがボタンをレンダリングしていなければ複製するものがなく、カートには空白のスペースが表示されます。 対処方法：
  • 上記の解決方法にあるテーマスニペットを、layout/theme.liquid の <body> 行の直下に追加します。
「競合を避けるため」にテーマ独自のエクスプレスボタンを削除しないでください。 Upcart はそれらが存在することに依存しています。テーマからボタンを削除したり、テーマ設定でオフにしたりすると、Upcart が複製する元のボタンがなくなってしまい、問題は改善するどころか悪化します。

​
3. CSS がボタンをブロックしている

一部のテーマは、デフォルトで CSS を使ってエクスプレスボタンを非表示にしています。例：
対処方法：
  • テーマの CSS を確認します。
  • Upcart のドロワー内でボタンを非表示または無効にしている CSS ルールがないことを、テーマ開発者に確認してもらいます。

​
4. レガシー設定が干渉している

旧バージョンの Express Payments モジュールを使用していた場合、保存された設定が新しいセットアップと競合する可能性があります。 対処方法：
  • 旧 Express Payments モジュールを開きます（まだ表示されている場合）。
  • 以前のオプションのチェックをすべて外して保存します。
  • 新しいモジュールで再度テストします。

​
それでも問題が解決しない場合

​
Upcart で Shadow DOM を無効にする

Upcart で Shadow DOM が有効になっているために、エクスプレス決済ボタンが読み込まれない、または更新されない場合があります。 Shadow DOM とは？
Shadow DOM は、安定性を向上させるために Upcart をストアの他のコードから分離します。ただし、まれにこの分離が原因で、Shopify のエクスプレスボタンが正しく更新されないことがあります。 Shadow DOM を無効にする方法：
  1. Upcart > Cart Editor > Settings > Cart settings に移動し、Advanced Settings を展開します。
  2. Render Cart in Shadow DOM のチェックを外します。
  3. 保存して再度テストします。
⚠️ 重要：
Shadow DOM をオフにした後は、他のアプリやテーマ要素と Upcart との連携に影響する可能性があるため、必ずカートをテストしてください。 💡 注意： Shadow DOM を無効にするとこの問題は解決する可能性がありますが、テーマとの CSS 競合が発生することがあります。トレードオフの詳細については、Shadow DOM 設定のドキュメントをご覧ください。

​
さらにサポートが必要ですか？

これらの手順を完了しても問題が解決しない場合：
  • テーマ開発者に連絡して、競合するコードや設定を削除してもらってください。
  • 高度なテーマ編集や連携の支援については、Shopify Expert に依頼することもできます。

​
参考資料

  • Shopify ヘルプ – 迅速なチェックアウト
  • Shopify 開発者ドキュメント – エクスプレス決済ボタン