Shopify ECサイト制作のFASTMAKE

Shopify Checkout Extensibility完全ガイド|checkout.liquid廃止への移行手順

更新日: 2026-04-22
Shopify Checkout Extensibility完全ガイド|checkout.liquid廃止への移行手順

Shopify の旧来のチェックアウトカスタマイズ手法である checkout.liquid は2024年8月13日に廃止され、現在は Checkout Extensibility が唯一の公式カスタマイズ手法となっています。本記事では、仕組み・廃止スケジュール・移行の進め方を、EC 事業者の実務目線で整理します。

はじめに

Shopify のチェックアウト画面は、かつて checkout.liquid を編集することでデザインや入力項目を自由にカスタマイズできました。しかし 2023年2月の発表以降、Shopify は「より安全・高速・アップグレード耐性のあるチェックアウト」を掲げて、Checkout Extensibility へ全面移行を進めています。

多くの Shopify / Shopify Plus ストアにとって、Checkout Extensibility への移行は もはや選択肢ではなく必須対応 です。移行を怠ると、決済直前の画面やサンクスページのカスタマイズが消失し、アプリ連携やタグ計測にも影響が及びます。

Shopify Checkout Extensibility とは?

Checkout Extensibility は、Shopify のホスト型チェックアウト画面に対して、アプリ拡張(App Extension)として機能を追加する新しいフレームワークの総称です。checkout.liquid のように HTML/CSS/Liquid を直接編集する方式ではなく、Shopify が提供する拡張ポイント(Extension Point)に、承認された UI コンポーネントやサーバーサイドロジックを差し込む形を取ります。

主な特徴は次のとおりです。

  • Shopify 管理下の UI:ブラウザ・アクセシビリティ・パフォーマンスが Shopify によって保証される
  • アップグレード耐性:Shopify 側の更新でレイアウトが壊れにくい
  • セキュアなサンドボックス:拡張は独立した環境で実行され、決済情報や他の拡張にアクセスできない
  • 管理画面からの設定:ストア運用者がノーコードで有効化・配置を変更できる

この設計により、チェックアウトのセキュリティを維持したまま、アプリ提供の機能を「レゴブロックのように」差し込めるようになりました。

(出典:Shopify.dev | Apps in checkout

checkout.liquid 廃止スケジュール

Shopify が公式に示している主要マイルストーンは以下のとおりです(2026年4月時点)。

時期対象内容
2023年2月全ストアcheckout.liquid の廃止を正式発表
2024年8月13日Shopify PlusInformation / Shipping / Payment の各ページで checkout.liquid が無効化
2025年8月28日Shopify PlusThank you ページ・Order status ページでも checkout.liquid、Additional Scripts、Script Tags が無効化
2026年1月以降Shopify Plus自動アップグレードが開始され、旧方式のカスタマイズは失われる可能性

チェックアウトページ(Information / Shipping / Payment)の checkout.liquid は 2024年8月13日以降、完全に機能を停止しています。 (出典:Shopify developer changelog | Checkout.liquid will no longer work for in-checkout pages starting August 13, 2024

Thank you / Order status ページは、Plus ストアで 2025年8月28日以降に Additional Scripts と checkout.liquid の編集が不可となり、旧ページでは個人情報(PII)が取得できなくなります。 (出典:Shopify Help Center | Upgrading and replacing your Thank you and Order status pages

(出典:Auto-upgrades in January 2026

Non-Plus ストアのスケジュールはプランや時期によって異なるため、最新情報は Shopify 管理画面の通知と公式ヘルプで必ず確認してください。

Checkout Extensibility の主要コンポーネント

Checkout Extensibility は、単一の機能ではなく複数の仕組みの集合体です。用途に応じて使い分けることで、旧 checkout.liquid で実現していたカスタマイズの大半をカバーできます。

Checkout UI Extensions

チェックアウト画面の決められた位置(Extension Point)に、アプリが提供する UI を差し込む仕組みです。商品情報、配送、支払い、注文サマリー付近など、複数の拡張ポイントが公開されています。

  • Web コンポーネント形式で UI を宣言し、Shopify がネイティブ描画
  • Preact ベースのフック(useStateuseEffect など)が利用可能
  • コンパイル後のバンドルサイズは 64KB 上限で、パフォーマンスを担保

(出典:Shopify.dev | Checkout UI extensions

Shopify Functions

Shopify のサーバーサイドロジックを拡張・置換する仕組みです。割引・配送・決済方法の並び替えなど、従来は Shopify Scripts(Plus 限定)で実装していた処理を、WebAssembly ベースの Functions で置き換えます。

  • 値引き、配送方法のカスタマイズ、決済方法のソートなどが可能
  • Shopify Scripts からの移行が必須(Scripts は廃止対象)

(出典:Shopifyヘルプセンター | Shopify スクリプトでの商品バンドルの使用

Web Pixels

アクセス解析・広告タグを安全にチェックアウトへ設置するための仕組みです。GA4、Meta Pixel、LINE Tag などはこの枠組みで構成します。

  • 分離されたサンドボックスで実行
  • 顧客の同意(コンセント)状態に連動した発火制御

Branding API・Checkout Editor

ロゴ・カラー・フォントなどのブランド要素は、Shopify 管理画面のチェックアウトエディタか Branding API で制御します。CSS を直接上書きできなくなった代わりに、テーマと一貫したブランディングを維持しやすくなりました。

移行のメリットと注意点

メリット

  • 高速化:Shopify のインフラ上で UI が最適化され、体感速度が改善
  • 耐障害性:Shopify 側のアップデートで壊れにくい
  • アクセシビリティ:WCAG 準拠の UI がデフォルトで提供される
  • セキュリティ:拡張はサンドボックス化され、PCI DSS スコープの逸脱リスクが低い
  • モバイル対応:Shop アプリとチェックアウト体験が統一される

注意点

  • 完全自由なデザインは不可:HTML を 1px 単位で調整する運用はできない
  • アプリ依存度が上がる:要件を満たす UI Extension / Function を提供するアプリ選定が鍵
  • Scripts からの書き換え:Shopify Scripts の割引ロジックは Functions で再実装が必要
  • 計測タグの見直し:追加スクリプトによる発火は動作しないため、Web Pixels へ移行
  • 開発スキルの転換:Liquid だけでなく、React/Preact 系 UI と Rust/JS の Functions 開発が求められる

移行プロジェクトの進め方

Checkout Extensibility への移行は、単純な置換ではなく「チェックアウト運用の棚卸し」です。次のステップで進めると漏れが起きにくくなります。

  1. 現状の棚卸し
    • checkout.liquid、Additional Scripts、Script Tags に記述された全カスタマイズを一覧化
    • 連携アプリが旧方式か新方式かを確認
  2. 要件の再整理
    • なぜその改修が必要か、KPI との紐付けを見直す
    • Checkout Extensibility で実現可能か/アプリで代替可能かを判定
  3. ギャップ分析
    • 機能のうち Extensibility では不可能なものを特定
    • 社内業務フロー・CRM・会計連携への影響を把握
  4. 実装方針の決定
    • 既存の Shopify アプリ(公認パートナーの UI Extension)を優先採用
    • 独自要件は Custom App で開発
  5. 段階的リリース
    • テストストアで十分に検証し、コンバージョンやエラーログを比較
    • 本番切替後も 2〜4 週間は KPI を厳密に監視

よくある移行課題

  • 独自フォーム・カスタム項目:Metafields + UI Extension で再構築
  • 注文メモ・配送日時指定:専用アプリ(予約配送、熨斗、ギフトメッセージ等)への置換
  • 定期購買・サブスク:Subscription API 対応アプリと Checkout Extensibility の組み合わせ
  • 計測・タグマネージャ:Web Pixels + Consent Mode へ刷新
  • 法人向け決済・請求書払い:Shopify Plus の B2B 機能やアプリで代替

まとめ

Checkout Extensibility は、Shopify チェックアウトの未来を決定づける共通基盤です。一般的には「見た目が変わるだけ」と誤解されがちですが、実際にはタグ計測・割引ロジック・アプリ連携すべてが関わる全社的プロジェクトになります。公式スケジュールの遵守だけでなく、CVR や計測精度への影響を最小化する設計力が問われる領域です。

FASTMAKE では、Shopify / Shopify Plus を中心に、Checkout Extensibility への移行計画の策定、UI Extensions・Functions の実装、計測タグの Web Pixels 対応までを一気通貫で支援しています。チェックアウト回りの移行や刷新をご検討の際は、お気軽に FASTMAKE までご相談ください。

EC事業を成功させるためのポイントは?

「ShopifyでEC事業を始めたいけど何から手をつければいいのか分からない」「ECサイトを立ち上げたけどなかなか売上げが伸びない」などECサイトに関するお悩みがございましたら、お気軽にご相談ください。無料です。

ECサイト制作のお悩みについて
FASTMAKEに相談してみませんか?