チェックアウトのローカルピックアップ体験が刷新 「縦に長いリスト」から「インライン＋最寄り1件＋モーダル」へ

図解 ： チェックアウトのローカルピックアップ体験アップデート Checkout / 変更 チェックアウトのローカルピックアップ体験が刷新 「縦に長いリスト」から「インライン＋最寄り1件＋モーダル」へ 配送と店頭受取の選択肢が縦に積み上がって長いスクロールになっていた問題を解消。最寄りの受取拠点を1件だけ先に出し、残りはモーダルで一覧表示する形に変わった。マーチャント側の対応作業は不要。 このページの構成 そもそも何が変わるのか（30秒で理解） 新しいチェックアウト表示の流れ（図解） ローカルピックアップが表示される条件 従来 vs 新UI の比較 マーチャントが取るべきアクション 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか これまでチェックアウトは 配送と店頭受取（ローカルピックアップ）の選択肢を縦に並べて表示 していた。 受取拠点が多い複雑なチェックアウトほどリストが長くなり、顧客がサッと見渡せなかった。 新UIでは 最初に利用可能なローカルピックアップ拠点を1件だけ表示し、追加の拠点はモーダルで選ぶ 形になった。 従来 ： 縦長スクロール 配送と全ての受取拠点を縦に列挙。拠点が多いと延々スクロールが必要で、ひと目で把握しづらかった。 新UI ： 最寄り1件＋モーダル 配送と店頭受取はインライン表示。店頭受取を選ぶと最寄り拠点が1件出て、残りはモーダルの一覧から選ぶ。 この更新の適用に作業は不要（No action is required）。 変更は自動で反映される。 2 新しいチェックアウト表示の流れ（図解） 配送方法（配送 / 店頭受取）の選択肢は カート内の商品が配送できるか・店頭受取できるか によって決まる。 店頭受取を選ぶと 在庫がある最寄りの拠点 がまず表示され、 全リストはモーダル で確認できる。 3 ローカルピックアップが表示される条件 商品が店頭受取の対象であること カート内の商品が店頭受取（pickup）に対応している場合にのみ「店頭受取」が選択肢に出る。 購入者の国に利用可能な拠点があること 購入者の国に利用可能な受取拠点が存在する場合を含め、対象であれば店頭受取が表示される。 店頭受取を選んだとき最初に出るのは 「在庫がある最寄りの拠点」 。在庫の無い拠点をいきなり提示しない設計になっている。具体的な距離計算ロジックや在庫判定の内部仕様は 記載なし 。 4 従来 vs 新UI の比較 項目 従来 新しいローカルピックアップ体験 配送と店頭受取の並び 縦積み 縦に列挙 インライン 横並びで選びやすく 受取拠点の表示 全件 拠点を全部リスト表示 最寄り1件 ＋ 残りはモーダル 多拠点時の見やすさ 長いスクロールでスキャンしづらい 初期表示が短くひと目で把握しやすい 最初に出る拠点 記載なし 在庫がある最寄り拠点 マーチャントの対応 — 不要 （自動反映） 5 マーチャントが取るべきアクション 1 設定変更は不要 更新を表示するための作業は要らない。アップデートは自動で適用される。 2 チェックアウト拡張の設定を見直す 今回の変更後もカスタマイズが正しく表示されるか、拡張の設定を確認することが推奨されている。 3 実機で受取フローを確認 多拠点ストアは、インライン表示＋モーダル一覧の挙動を実際のチェックアウトで目視確認しておくと安心。 原文の注意： 「チェックアウト拡張（checkout extension）の設定を確認し、今回の変更後もカスタマイズが正しく表示されるか確かめることを推奨」 とされている。配送方法まわりに拡張を入れているストアは要チェック。 6 技術者が押さえるべき5つのポイント 1. 自動適用・デプロイ作業なし 「No action is required」。マーチャント側のコードやテーマ変更なしにチェックアウトのUIが切り替わる。リリース通知としての監視対象。 2. Checkout拡張の表示崩れに注意 配送方法がインライン化＋モーダル化されるため、配送ステップ周辺に置いた Checkout UI Extensions のレイアウト前提が変わる可能性。表示確認が公式推奨。 3. 配送方法は商品eligibilityで分岐 配送方法の選択肢は「カート内商品が配送可能か／店頭受取可能か」で決まる。受取専用・配送専用商品が混在するカートでの出方を把握しておく。 4. 店頭受取の表示は「国＋拠点」条件 商品が受取対象で、購入者の国に利用可能な拠点があるときに店頭受取が現れる。国別に拠点を持つマルチロケーション構成で挙動を検証する価値がある。 5. 「在庫ありの最寄り拠点」を初期表示 → 残りはモーダル 店頭受取選択時に最初に出るのは在庫がある最寄り拠点。多拠点でも初期描画が短く済む。全件はモーダルに退避するため、拠点が多いストアほどUX改善が効く。距離・在庫判定の詳細アルゴリズムや対応プラン・地域は 記載なし 。 7 業務に活かせる3つのユースケース USE CASE 1 多店舗チェーンの店頭受取（BOPIS）チェックアウト最適化 課題 全国に多数の受取拠点を持つストアで、チェックアウトに全拠点が縦に並び、長いスクロールで顧客が迷い離脱が起きていた。 打ち手 今回の自動アップデートで、最寄り拠点1件＋モーダル一覧の表示に切り替わる。マーチャント作業は不要。多拠点ストアほど初期表示が短くなる。 効果 チェックアウトのスキャン負荷が下がり、店頭受取ステップでの離脱低減・受取選択のスピードアップが期待できる。 技術メモ 初期表示は「在庫がある最寄り拠点」。在庫データと拠点（ロケーション）設定の整備が、最寄り提案の精度に直結する。 USE CASE 2 配送品と店頭受取品が混在するストアの導線設計 課題 大型家具は店頭受取のみ、小物は配送のみ、といった eligibility が分かれる商品を扱い、どの配送方法が出るか把握しきれていない。 打ち手 配送方法はカート内商品の配送/受取 eligibility で決まる仕様を前提に、代表的なカート組み合わせでチェックアウトの出方をテストする。 効果 「店頭受取が出るはずなのに出ない／配送だけになる」といった顧客の混乱を事前に潰せる。 技術メモ 店頭受取は商品が受取対象で、購入者の国に利用可能な拠点があるときに表示。国またぎ販売では国別拠点の設定有無で結果が変わる。 USE CASE 3 Checkout拡張を入れている案件の回帰チェック 課題 配送方法ステップ付近にCheckout UI Extensionsでカスタムバナーや注記を出しており、UIレイアウト変更で崩れないか不安。 打ち手 公式推奨どおり拡張設定を見直し、インライン表示＋モーダル化後のチェックアウトでカスタマイズが意図通り出るか回帰確認する。 効果 UI更新後に「拡張が見えない／重なる」事故を防ぎ、納品済み案件の品質を維持できる。 技術メモ 確認は配送方法選択ステップと店頭受取モーダルの両方で。プレビュー環境のチェックアウトで目視＋スクショ記録を残すと監査しやすい。 8 提案で使える1行サマリ 「チェックアウトの店頭受取が 縦長リストから『最寄り1件＋モーダル一覧』へ自動刷新 。 配送/受取はインライン表示、店頭受取は商品eligibilityと国内拠点の有無で出し分け。 マーチャント作業は不要だが、 Checkout拡張のストアは表示確認だけ済ませておく。 」 source ： changelog.shopify.com / updates-to-local-pickup-user-experience-in-checkout published 2026-04-21