Shopify Checkout Extensibility 2026: 締め切り、UI拡張機能とアップグレードガイド

による Eoin Villarin2026-02-05、最終更新日: 2026-11-14

Shopify の checkout extensibility は、checkout.liquid と Shopify Scripts を置き換えました。すべての期限を確認し、アップグレードしなかった場合にどうなるかを確認し、Preact を使用して checkout UI 拡張機能を構築する方法を確認してください。

Shopify の checkout extensibility は、2026年にShopifyのチェックアウトをカスタマイゼーションする方法として唯一サポートされています。 checkout.liquid追加のスクリプト、スクリプトタグ、およびShopify Scriptsと4つのアプリベースのビルディングブロック: チェックアウトUI拡張機能、Shopify Functions、Webピクセル、およびブランディング設定。すべての締め切りは過ぎました。checkout.liquidは、2024年8月13日に情報、配送、支払いステップで動作を停止しました。Plusストアは、2025年8月28日に「ありがとう」ページと注文ステータスページでそれを失いました。Shopify Scriptsは、2026年6月30日に実行を停止しました。非Plusストアは、2026年8月26日に「ありがとう」ページと注文ステータスページの締め切りを迎えました。

ストアがこれらの日付のいずれかを見逃した場合、古いコードは「一時停止」されず、単に実行されなくなりました。このガイドでは、チェックアウト拡張機能が何であるか、完全なタイムライン、何が何に置き換えられたか、段階的なアップグレード方法、および現在の Preact および Polaris ウェブコンポーネントセットアップを使用したチェックアウト UI 拡張機能の構築方法について説明します。私は Shopify チェックアウトの構築および移行を行っているため、実用的な内容に絞り、Shopify の独自のドキュメントに基づいて検証できる事実のみを述べています。ドキュメントは最後にリストされています。

Shopify の checkout extensibility とは？

Shopify の checkout extensibility は、アプリとマーチャントが checkout の見た目や動作を変更できるツールのセットです。checkout コードを直接編集する必要はありません。自由に書き直すことができる 1 つの大きな Liquid テンプレートではなく、checkout は現在、承認されたコードを挿入できる定義された場所を持つ Shopify 所有のページです。Shopify は、その主な部分について説明しています。 チェックアウトアプリの概要:

• Checkout UI extensions フィールド、バナー、アップセル、チェックボックスなどのインターフェイス要素を追加します。 マーチャントはそれらをチェックアウトエディターに配置します。
• Shopify Functions Shopifyのサーバー上のビジネスロジックを変更します: ディスカウント、配送オプション、支払いオプション、カートとチェックアウトの検証、バンドル、ローカルピックアップと履行の制約。
• ウェブピクセル サンドボックス内で標準の顧客イベントにサブスクライブすることで、分析とコンバージョントラッキングを処理します。スクリプトを注入する代わりに。
• ブランディング チェックアウトエディターと、より深い変更についてはGraphQL管理APIを通じて、色、フォント、ロゴ、角の半径とレイアウトを制御します。
• 支払い拡張機能 支払いプロバイダーがチェックアウトに支払い方法を統合できるようにします。

取引は簡単です。ページの任意の部分を書き直す自由を放棄し、その代わりにカスタマイゼーションがShopifyの独自の更新を生き残り、チェックアウトが高速で安全であり、Shop Pay、1ページのチェックアウトや新しい支払い方法などの機能が何も触れずに動作し続けるようにします。

Checkout extensibility の期限とタイムライン

checkout.liquidからの移行は段階的に行われました。以下の表に、重要な日付、影響を受けるユーザー、何が起こったかを一覧します。日付は、Shopifyの変更履歴、ヘルプセンター、開発者ドキュメントから取得しています。

つまり、checkout extensibility のアップグレードは、もはや任意ではありません。2026 年 11 月以降、checkout.liquid、追加スクリプト、または Shopify Scripts を復元する計画や設定は存在しません。

ストアがアップグレードしなかった場合はどうなりますか？

レガシーコードの実行が停止され、ストアはShopifyの標準ページにフォールバックします。実際には、次のことを意味します。

• checkout.liquid編集 もはや表示されません。Shopifyの checkout.liquidドキュメント は、情報、送料、支払いの各ステップではサポートされていないこと、および2025年8月28日にThank youページと注文ステータスページでのサポートが終了したことを述べています。
• 追加のスクリプト 編集できません。ボックスは2025年8月28日から閲覧専用になっており、コードはアップグレードされたページで実行されなくなりました。通常の影響を受けるのは、コンバージョンタグ、アフィリエイトトラッキング、購入後アンケート、レビュー依頼などです。
• アプリからのスクリプトタグ Thank youページと注文ステータスページでのサポートは終了しました（Plusは2025年8月28日、非Plusは2026年8月26日）。
• Shopify Scripts もはや割引を適用したり、送料を非表示にしたり、支払い方法を並べ替えたりすることはできません。Shopifyの スクリプト移行ページ はっきり言って、スクリプトはどのストアでも実行されなくなりました。

Shopifyの非Plusアップグレードガイドは、アップグレードにより既存のThank youページと注文ステータスページ、およびそれらのカスタマイズが置き換えられることを確認しています。また、Pause and Buildプランのストアは自動的に永久にアップグレードされます。プラスチェックアウトがまだcheckout.liquidにある場合、Shopifyは30日間の電子メール通知で自動的にアップグレードすると述べています。Shopifyの現在のヘルプページには、すべてのストアタイプの正確な自動アップグレード日が公開されていないため、最も安全なチェックはにアクセスすることです 設定、チェックアウト 管理画面で確認し、各ページがどのバージョンであるかを確認してください。

checkout.liquid と checkout extensibility

これは、私がクライアントに古いカスタマイゼーションをコピーできない理由について説明する比較です。

Shopifyチェックアウトのカスタマイズ可能な部分はどれですか？

Checkout UI extensions は次にレンダリングされます ターゲットターゲットは、チェックアウト内の名前付きスポットです。そして、Shopifyはターゲットを3種類に分類します。

• ブロックターゲットなどの purchase.checkout.block.render と purchase.thank-you.block.renderマーチャントがチェックアウトエディタの任意のサポートされた配置にドラッグできる
• 静的ターゲット固定された時点でレンダリングされる、たとえば連絡先フィールドの後、またはカートラインアイテムの後、アクションボタンの前に
• 実行可能なターゲット何もレンダリングせずにデータを返したりロジックを実行したりする

Thank youページはを使用します purchase.thank-you ターゲット。また、注文ステータスページは現在、顧客アカウントで customer-account.order-status ターゲット。

各Shopifyプランの機能

情報、配送、支払いのステップでのプラス制限は、直接 チェックアウトUI拡張機能リファレンスそして、Functionsのカスタムアプリルールは Shopify Functions ドキュメント.

2026年のShopify checkout UI拡張：React、Preactおよびウェブコンポーネント

検索する場合 @shopify/checkout-ui-extensions-reactあなたは、このツールの第一世代を見ています。パッケージ名は2回変更され、多くの古いチュートリアルは元のインポートを表示したままです。

API バージョン 2025-10 以降、新しい拡張機能は Polaris ウェブコンポーネント デフォルトでは。コンポーネントは、カスタム要素などの <s-stack>, <s-checkbox>, <s-text>, <s-button> と <s-banner>Preactでレンダリングされます。チェックアウトデータとアクションは、Reactフックからグローバルに移動しました。 shopify オブジェクト。たとえば shopify.cost, shopify.buyerIdentity と shopify.applyAttributeChange()Shopify CLIは shopify.d.ts を実行するときに型を含むファイルを作成します shopify app dev.

主な切り替え理由はサイズです。コンパイルされたUI拡張バンドルは、を超えることはできません。 64 KB (フルページのカスタマーアカウント拡張機能は128 KBを取得します)。そして、Shopifyはデプロイ時にこれを強制します。Preactの小さなランタイムは、その予算の多くをあなた自身のコードのために残します。2つのより価値のある変更点: APIバージョン2026-04以降、 metafields プロパティは、 shopify.appMetafields およびカートメタフィールドの変更と新しい @shopify/ui-extensions-tester パッケージには単体テストが追加されます。

Shopifyの ウェブ コンポーネントへの移行ガイド 古いAPIバージョンにピン留めされたReactベースの拡張機能の削除日はリストされていませんが、新しい機能は現在のバージョンにのみ追加されるため、次の実際の更新時に移行を計画してください。

Shopify チェックアウト拡張機能へのアップグレード方法を段階的に説明

自動アップグレード後のクリーンアップを行う場合でも、Scripts時代のロジックを再構築する必要がある場合でも、プロセスは同じです。

1. 監査した内容。 の中に 設定、チェックアウトアップグレードガイドまたはカスタマイゼーション報告を開きます。それはあなたの古いcheckout.liquid編集をリストし、注文追跡や認証などの目的別に追加のスクリプトを並べ替えます。また、もしあなたがまだそれを持っているなら、あなたの古いShopify Scriptsコードをエクスポートしてください。
2. カスタマイゼーションをその代替えにマッピングする。 UIの変更はチェックアウトUI拡張機能になり、割引と配送ロジックはShopify Functionsになり、トラッキングはアプリのピクセルまたはカスタムピクセルになり、視覚的な変更はブランディング設定になります。
3. まず App Store を確認してください。 ギフトメッセージ、配達日、購入後アンケート、階層割引などの多くの一般的なニーズは、すでに checkout extensibility アプリとして存在しています。カスタム構築は、アプリが適合しない場合やロジックがお客様のビジネスに固有の場合にのみ意味があります。
4. 置き換えをビルドまたはインストールする 開発ストアまたはチェックアウトの複製でご利用いただけます。Plusストアは、エディターでドラフトのチェックアウトを作成し、ライブのチェックアウトはそのままにしておくことができます。
5. トラッキングを再作成する。 Google、Meta、TikTok の公式アプリをインストールし、アプリのピクセルを出荷し、残りのタグを移動します。 設定、カスタマーイベント カスタムピクセルとして。
6. 実際の注文をテストしてください。 すべての支払い方法、チェックアウトレイアウト、販売市場を使用してテストモードで注文を出し、分析でコンバージョンが届くのを確認します。
7. 公開して監視する。 新しいチェックアウトを公開し、コンバージョン率、平均注文額、トラッキングされた収益を、切り替え前の週と比較する。

ストアにこれを適切に行う必要がある場合、これは私の Shopify開発サービス.

Shopify チェックアウト UI 拡張機能の構築方法

Shopifyパートナーアカウント、最新のShopify CLI、開発ストアが必要です。 Information、Shipping、またはPaymentステップをターゲットにするには、開発ストアにShopify Plus機能を有効にする必要があります。

1. 実行 shopify app init アプリを作成するか、既存のアプリを開きます。
2. 実行 shopify app generate extension --template checkout_ui そして、拡張機能に明確な名前を付けます。
3. 編集 shopify.extension.toml APIのバージョン、機能、ターゲットを設定します。
4. Polarisウェブコンポーネントを使用してPreactでUIを記述します。
5. 実行 shopify app dev 開発ストアの実際のチェックアウトに対してプレビューします。
6. 実行 shopify app deploy 新しいアプリのバージョンをリリースしてから、チェックアウトエディターでブロックを追加します。

ギフトラッピングオプションの設定は次のとおりです。これはブロックターゲットでレンダリングされ、チェックボックスラベル用の 1 つのマーチャント設定を公開します。

api_version = "2026-10"

[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"

  [extensions.capabilities]
  api_access = true
  network_access = false
  block_progress = false

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.block.render"

[settings]
  [[settings.fields]]
  key = "label_text"
  type = "single_line_text_field"
  name = "Checkbox label"

そして、ここに拡張機能自体があり、保存されています。 src/Checkout.jsxそれは、現在のチェックアウトが属性の変更を許可するかどうかを確認し、選択をマーチャントが注文で見ることができるカート属性として保存し、保存に失敗した場合にフレンドリーなエラーを表示します:

import '@shopify/ui-extensions/preact';
import { render } from 'preact';
import { useState } from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [error, setError] = useState('');
  const label = shopify.settings.value.label_text || 'Gift wrap this order';

  if (!shopify.instructions.value.attributes.canUpdateAttributes) {
    return null;
  }

  async function onCheckboxChange(event) {
    const isChecked = event.target.checked;
    const result = await shopify.applyAttributeChange({
      type: 'updateAttribute',
      key: 'gift_wrap',
      value: isChecked ? 'yes' : 'no',
    });
    if (result.type === 'error') {
      setError('We could not save your gift wrap choice. Please try again.');
      return;
    }
    setError('');
  }

  return (
    <s-stack gap="base">
      <s-checkbox label={label} onChange={onCheckboxChange} />
      {error && <s-banner tone="critical">{error}</s-banner>}
    </s-stack>
  );
}

この shopify.instructions チェックが重要です。一部のチェックアウト、例えばドラフト注文のチェックアウトでは、特定のカート変更が許可されておらず、拡張機能はエラーを投げるのではなく静かに退避する必要があります。

テストチェックリスト

• 静的ターゲットは、固定された場所で自動的にレンダリングされます。 shopify app dev 実行されます。
• ブロックターゲットは、チェックアウトURLの配置参照を使用して特定の場所でプレビューできます。 WALLETS1Shopifyの テストガイド それらをすべてリストします。
• の中に 設定、チェックアウト、カスタマイズアプリブロックを追加し、配置の間で移動します。
• 1ページと3ページのレイアウトの両方をテストしてください。なぜなら、ユーザーは切り替えることができるからです。
• Shop Payを含む、テストモードでの支払いを使用した完全なテスト注文を配置します。

Shopify Functions、ウェブピクセルおよびブランディング

UI 拡張機能は、Shopify の checkout extensibility の一部にすぎません。以前の Shopify Scripts で実行されていたほとんどの処理は、現在こちらに属しています。 Shopify Functionsチェックアウトがそれらを呼び出すときにShopifyのサーバーで実行されます。それらは、WebAssemblyにコンパイルされる任意の言語で記述され、RustとJavaScriptテンプレートが提供されます。Shopifyは、大きなカートにはRustをお勧めします。

ウェブピクセル 以前は追加スクリプトにあったトラッキングを置き換えます。アプリのピクセルは厳格なWeb Workerサンドボックスで実行され、販売者が追加したカスタムピクセルは、トップページにアクセスできないルーズなiframeサンドボックスで実行されます。両方とも顧客の同意を尊重します。完了したチェックアウトを報告する最小のアプリのピクセルは次のようになります。

import { register } from '@shopify/web-pixels-extension';

register(({ analytics }) => {
  analytics.subscribe('checkout_completed', (event) => {
    const checkout = event.data && event.data.checkout;
    if (!checkout) {
      return;
    }
    fetch('https://analytics.example.com/collect', {
      method: 'POST',
      keepalive: true,
      body: JSON.stringify({
        orderId: checkout.order ? checkout.order.id : null,
        total: checkout.totalPrice ? checkout.totalPrice.amount : null,
        currency: checkout.currencyCode,
      }),
    });
  });
});

ブランディング 色、タイポグラフィー、ロゴ、セクションのスタイルをカバーします。すべてのプランは、チェックアウトエディターで基本的なコントロールを利用できます。プラスストアと開発ストアは、GraphQL管理APIを通じてさらに進んだカスタマイゼーションが可能です。Shopifyは、APIバージョン2026-10で checkoutBrandingUpsert として廃止され、代わりに checkoutAndAccountsConfigurationUpdateしたがって、新しいブランディングコードは、新しいミューテーションをターゲットにする必要があります。

マーチャント向け Checkout extensibility

コードを記述しないストアを運営している場合、今実際に必要なことは次のとおりです。

• 開く 設定、チェックアウト そして、チェックアウトを確認します。 Thank youページと注文ステータスページは新しいバージョンにあります。
• 表示専用の追加スクリプトボックスを読んで、以前はそれに依存していたすべてのツールをリストアップする。
• それらのアプリを再インストールまたは更新して、アプリのピクセルまたはアプリブロックを使用し、各ツールのダッシュボードで注文がまだ記録されていることを確認する。
• 以前は Shopify Scripts を使用していた場合、割引または配送ルールがアプリまたはカスタム Function として存在するかどうかを確認してください。ルールをトリガーするカートとトリガーしないカートがテストの最も迅速な方法です。
• インストールされたアプリから信頼バッジ、注文メモ、アップセル、またはアンケートを追加し、ほとんどの注文が発生するモバイルでプレビューするには、チェックアウトエディターを使用します。

ほとんどのストアは、既存のアプリでこれを終了できます。 ユニークなロジック (卸売ルール、B2Bフィールド、ロイヤリティ連携など) の場合にのみ、カスタム作業が効果的です。

開発者向け Checkout extensibility

Shopify 用に構築する場合、テーマ作業とは異なるメンタルモデルが必要です。

• 拡張機能は、DOM アクセスのない Web Worker で実行されます window またはDOM。いずれかに触れるライブラリは失敗します。
• バックエンドへのすべての呼び出しは信頼されていないため、セッショントークンで認証する必要があります。 shopify.sessionToken そして、サーバーで価格と適格性を確認し直します。
• ピン留めする api_version そして、スケジュールに従ってアップグレードします。 Shopifyは四半期ごとに新しいバージョンをリリースし、最新のドキュメントはPreactとウェブコンポーネントを前提としています。
• ネットワーク呼び出しを含むパブリックアプリには、 network_access TOMLとパートナーダッシュボードでのネットワークアクセス承認が必要です。サーバーはCORSリクエストにも応答する必要があります。
• 保護されたデータにアクセスするパブリックアプリは、現在より厳格なプラットフォームルールに直面しています。 パブリックアプリのShopify IP許可リスト要件 1つの最近の変更をカバーします。

プロジェクトにカスタムのバックエンド、管理ダッシュボード、または拡張機能周辺の統合が必要な場合、私の作業範囲に含まれます。 カスタムウェブ開発 仕事。

一般的な Checkout extensibility の間違い

• 拡張機能が自動的に表示されると仮定します。 デプロイはブロックを利用可能にするだけです。マーチャントはまだチェックアウトエディタで追加する必要があり、そのため「自分のストアでは動く」というチケットが多数発生します。
• 64 KBの予算を超過しています。 日付ライブラリ、アイコンパック、分析 SDK はすぐに増えてしまいます。必要なものだけをインポートし、ビルドサイズに注意してください。
• 古いチュートリアルをコピーすること。 インポートするコード @shopify/checkout-ui-extensions-react またはReactフックのような useApplyAttributeChange 古いAPIバージョンに属します。新しい作業を開始する @shopify/ui-extensions Preactを使用します。
• を使用する block_progress 注意せずに。 この機能により、拡張機能はバイヤーが続行するのを停止できます。実際の検証でのみ使用し、常に理由を説明してください。
• 自動アップグレード後のトラッキングの忘却。 タグが発火しなくなった場合、収益が減少したように見えることがあります。Shopifyの注文を広告プラットフォームと比較する。
• スクリプトをUI拡張機能として再構築する。 割引や配送ルールはサーバー上の Functions に置くべきであり、購入者が改ざんできるクライアント側コードには入れません。
• 1つのレイアウトまたは市場のみをテストします。 1ページと3ページのチェックアウト、異なる通貨と異なる支払い方法はすべて異なる動作をします。

Checkout の速度は機能と同等に重要であり、私の … の一部です。 Shopifyスピード最適化チェックリストもしあなたが古いページにトラッキングを持っていたら、私の スクリプト タグの廃止後のピクセルの移行 さらに深く掘り下げ、AIアシスタントを通じて販売する場合、 Shopifyでのエージェントコマース.

よくある質問

Shopify の checkout extensibility とは？

Shopifyチェックアウト拡張機能は、Shopifyのアプリベースのシステムで、チェックアウトをカスタマイズするために使用されます。インターフェースの変更にはチェックアウトUI拡張機能、ビジネスロジックにはShopify Functions、トラッキングにはウェブピクセル、デザインにはブランディング設定を使用します。これにより、checkout.liquid、追加スクリプト、スクリプトタグ、およびShopify Scriptsが置き換えられ、これらはすべて現在廃止されています。

checkout extensibility の期限はいつでしたか？

以前のカスタマイゼーションは実行されなくなります。checkout.liquid 編集、追加スクリプト、Thank you ページのスクリプト タグ、および Shopify Scripts は実行されなくなり、ページは Shopify の標準バージョンにフォールバックします。各ページのバージョンを確認するには、[設定]、[決済] をチェックし、アプリ、拡張機能、Functions、またはピクセルを使用して失われたものを再構築してください。

checkout.liquidは廃止されましたか？

はい。Shopify のドキュメントによると、checkout.liquid は Information、Shipping、Payment ステップではサポートされておらず、2025 年 8 月 28 日に Thank you および Order status ページで終了しました。2026 年には再度有効にすることはできないため、残りのカスタマイゼーションは checkout extensibility で再構築する必要があります。

これらは、checkout extensibility を基に構築された Shopify App Store アプリです。たとえば、購入後のアンケート、配送日、ギフト オプション、アップセル、ロイヤルティ、階層別割引などのアプリがあります。checkout UI 拡張機能、Shopify Functions、アプリ ピクセルと記載のあるアプリを探し、追加スクリプトにコードを貼り付けるように求めるアプリは避けてください。

Checkout UI extensions は、小さなサンドボックスアプリで、フィールドやバナー、アップセルなどのインターフェース要素をチェックアウト、サンキューページ、注文ステータスページの定義された対象に追加します。API バージョン 2025-10 以降は、Preact と Polaris のウェブコンポーネントを使用して構築されています。 @shopify/ui-extensions パッケージで、バンドル制限は64 KBです。

@shopify/checkout-ui-extensions-reactはまだ使用されていますか？

いいえ。 これは、元の2022年から2023年のパッケージで、2023年8月に最後に公開されました。 その後、 @shopify/ui-extensions-reactその最後のリリースラインはAPIバージョン2025-07をターゲットにしており、その後 @shopify/ui-extensions Preactを使用します。Shopifyの現在のドキュメントで使用されているものと同様です。

非プラスストアはチェックアウト拡張機能を使用できますか？

はい、Thank you および Order status ページで使用できます。非 Plus ストアは、Shopify Functions、アプリ ピクセル、および基本的な checkout ブランディングを含むパブリック アプリも使用できます。Information、Shipping、Payment ステップの UI 拡張機能、カスタム アプリの Functions および API ベースのブランディングには、Shopify Plus が必要です。

Shopify の checkout UI 拡張機能とは何ですか？

いくつかありました。Plus ストアは、2024 年 8 月 13 日に Information、Shipping、Payment ステップの checkout.liquid を失い、2025 年 8 月 28 日に Thank you および Order status ページを失いました。Shopify Scripts は 2026 年 6 月 30 日に実行されなくなりました。非 Plus ストアは、2026 年 8 月 26 日までに Thank you および Order status ページをアップグレードする必要がありました。

checkout extensibility アプリとは何ですか？

古いカスタマイゼーションは実行を停止します。checkout.liquidの編集、追加のスクリプト、Thank youページのスクリプトタグ、およびShopify Scriptsは実行されなくなり、ページはShopifyの標準バージョンにフォールバックします。チェック 設定、チェックアウト 各ページのバージョンを確認してから、アプリ、拡張機能、関数、またはピクセルで失われたものを再構築します。

次のステップ

チェックアウトを監査し、トラッキングがまだ有効であることを確認し、失われたロジックを関数またはアプリに移動します。私が行うShopify Plusの作業例は、 リアル マド ハニー ケーススタディまたは、もっと見る ShopifyおよびWordPressのケーススタディチェックアウト拡張機能の構築またはPreactへの移行が必要ですか？ お問い合わせフォームから詳細を送ってください.

出典

• Shopify Dev：checkout.liquid（廃止および終了日）
• Shopifyの変更履歴: checkout.liquidテーマファイルの廃止予定 (2023年2月13日)
• Shopifyの変更履歴: Plusショップのカスタマイゼーション報告 (2024年8月13日 締切)
• Shopify ヘルプセンター：Thank youページおよび注文ステータスページのアップグレード（非Plus）
• Shopify Devの変更履歴: Shopify Scriptsは2026年6月30日に廃止予定
• Shopify ヘルプセンター：Shopify ScriptsからShopify Functionsへの移行
• Shopify Dev: チェックアウトアプリを構築する
• Shopify Dev：Checkout UI 拡張APIリファレンス
• Shopify Dev: チェックアウトUI拡張機能の設定
• Shopify Dev：Polaris ウェブコンポーネントへの移行
• Shopify Dev：Shopify Functions
• Shopify Dev：ウェブピクセル
• Shopify Dev：checkoutBrandingUpsert ミューテーション
• npm: @shopify/checkout-ui-extensions-react と npm: @shopify/ui-extensions