Shopify Customer account UI extensions: inline extensionsの紹介

ShopifyのCustomer Account UI Extensionsは、顧客アカウントの画面に独自の機能や情報を追加するための拡張機能です。この機能を使用することで、Shopify標準のUIに縛られることなく、顧客のニーズに応じた画面を作成できます。拡張機能は、Shopifyの既存デザインと統一感を保ちながらカスタマイズを実現し、顧客体験を向上させるための強力な手段を提供します。

詳細については「Shopify Customer Account UI Extensionsの活用法：ストアの顧客体験を向上させる」にてご紹介しています。

今回は、Customer Account UI Extensionsの中でもInline extensionsに焦点を当て、具体的な実装方法を解説します。

Inline extensionsとは

Inline extensionsは、注文インデックス、注文ステータス、プロファイルなど、顧客アカウント ページに UI を追加する静的拡張機能またはブロック拡張機能です。

仕組み

各顧客アカウント ページには、指定された領域で使用できる静的およびブロック拡張機能ターゲットがあります。静的拡張機能ターゲットは 1 つの指定された場所にのみ表示されますが、ブロック拡張機能を使用すると、販売者はページ上の複数の指定された場所に拡張機能を柔軟に配置できます。

例えば、注文状況ページに「お知らせ」のバナーを表示する場合、このバナーは拡張機能のターゲットとして customer-account.order-status.block.render を使用します。バナーの位置は柔軟で、販売者がページ上のサポートされている他の位置に移動することが可能です。
一方で、注文状況ページの下部に「レビューを書く」ボタンを配置する場合、この機能は静的な拡張機能として customer-account.order-status.fulfillment-details.render-after を使用します。この位置は固定されているため、販売者は他の要素との整合性を保ちながら、確実に顧客にアクションを促すことができます。

注文状況ページにバナーを追加してみる

それでは、具体的な実装手順を見ていきましょう。ここでは、注文状況ページに「お知らせ」のバナーを追加する例を紹介します。
よくあるシチュエーションでは、セール情報や配送遅延などの重要なお知らせを顧客に伝えるために、このようなバナーを追加することがあります。他にも店舗受取りの案内や、特定の商品カテゴリのおすすめ情報を表示するなど、様々な用途で活用できます。

extensionの作成

まずは、拡張機能を作成します。以下のコードを実行します。

 shopify app generate extension --template=customer_account_ui --name=info-banner --flavor=typescript-react

info-bannerという名前の Customer Account UI extension が作成されます。ここではTypeScriptベースのReactフレームワークを選択して作成しています。

ターゲットの設定

どこにUIを出すのかを設定します。作成したextensionディレクトリにあるshopify.extension.tomlを開き、以下のように設定します。

[[extensions.targeting]]
module = "./src/PointsBlockExtension.tsx"
target = "customer-account.order-status.block.render"

[extensions.settings]
[[extensions.settings.fields]]
key = "banner_text"
type = "single_line_text_field"
name = "バナーの内容"

これで注文状況ページにUIを追加することができます。また、[extensions.settings]でバナーの内容を管理画面から上書きできるように設定しています。

UIの作成

src/PointsBlockExtension.tsxを開き、以下のように記述します。

import {
  BlockStack,
  reactExtension,
  TextBlock,
  Link,
  Banner,
  useSettings,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order-status.block.render",
  () => <InfoBanner />,
);

function InfoBanner() {
  const { banner_text } = useSettings();

  const bannerText =
    banner_text ||
    "🎉 あなたの会社は 1,000 ポイントを獲得しました。プラチナカンパニーに昇格しました。";

  return (
    <Banner>
      <BlockStack inlineAlignment="center">
        <TextBlock>
          {bannerText}
          <Link to="https://www.shopify.com/jp">報酬を見る</Link>
        </TextBlock>
      </BlockStack>
    </Banner>
  );
}

コンポーネントはShopifyが用意しているコンポーネントライブラリを使用します。チェックアウト画面用の汎用コンポーネントと顧客ページ専用のコンポーネントがあります。

• Components
• Additional components

本サンプルでは管理画面から内容の上書きがなければデフォルトの文章を表示するようにしています。 他にも例えばStorefront APIを使っておすすめの商品を取得して表示することも可能です。また、App proxyを使って埋め込みアプリと連携して、動的な情報を表示することも可能です。

動作確認

準備ができたらextensionを起動して動作確認を行います。

shopify app dev

コンソールにPreview URLが表示されるので、ブラウザでアクセスして動作を確認します。

Developer Consoleが表示されるので作成したinfo-bannerのPreview linkをクリックします。

バナーが表示されているのがわかりますね。devモードなので２つのバナーが表示されています。

せっかくなので内容を変更してみましょう。アプリをデプロイします。インストールがまだでしたらインストールしてください。

shopify app deploy

デプロイが完了したら、Shopify管理画面にアクセスして、チェックアウト設定のページに移動します。

注文状況ページに切り替えて、「アプリブロックを追加」をクリックしてinfo-bannerを追加します。

ヘッダーにバナーが追加されました。

内容上書きすると、バナーの内容が変わることを確認できました。

動的ブロックなので自由に配置できます。コンテンツに合わせて最適な位置に配置しましょう。

まとめ

Inline extensionsを使えば、Shopifyの顧客アカウントページに独自のUIを追加することができます。この機能を活用することで、顧客のニーズに合わせた画面を提供し、顧客体験を向上させることが可能です。ぜひ、Customer Account UI Extensionsを活用して、ストアの運営効率を高め、ビジネス目標を達成してください。

参考

• Shopify Customer Account UI Extensions
• Build Order status page inline extensions
• useSettings() | Shopify API