【Shopify.dev和訳】Apps/Online store/Extensions/Gettings started
この記事について
この記事は、Apps/Online store/Theme app extensions/Gettings startedの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
テーマアプリ拡張機能の使用を開始する
このチュートリアルでは、ShopifyCLIを使用してテーマアプリ拡張機能の構築を開始する方法について説明します。拡張コマンドの詳細については、ShopifyCLI 拡張コマンドを参照してください。
Shopify は、テーマアプリの拡張機能を、拡張機能のドラフトバージョンにプッシュするか、バージョンを作成する際に検証します。アプリのコンテンツが強制された制限を超えると、テーマアプリの拡張機能は検証に失敗し、更新されません。詳しくはテーマアプリの拡張機能の制限を参照してください。
サンプルアプリでアプリブロックとアプリ埋め込みブロックの例を確認するには、Shopify の製品レビューアプリを参照してください。
要件
- Shopify パートナーアカウントを作成しました。
- 開発ストアを作成しました。
- ShopifyCLIをインストールしました。
- Shopify CLI のNode.jsやRuby on Railsのコマンドで作成したような、店舗にインストールできるアプリがあります。
- JSON テンプレートを使用し、アプリブロックをサポートするDawnなどの Online Store2.0 テーマがあります。
パートナーアカウントにログインします
$ shopify login
テーマアプリの拡張機能を足場にして登録する
Shopify CLI を使用して、テーマアプリ拡張機能の足場を作成し、拡張機能をアプリに登録します。
Shopify CLI がテーマアプリ拡張機能を作成すると、アプリに専用theme-app-extensionディレクトリが追加されます。
- ターミナルウィンドウを開き、
cdでプロジェクトのルートディレクトリに移動します。Terminal$ cd my-app-directory - テーマアプリ拡張機能を作成し、拡張機能を登録するアプリを選択します。Terminal
$ shopify extension create $ $ ? Which app would you like to register this extension with? (Choose with ↑ ↓ ⏎, filter with 'f') $ > 1. Product reviews app - 新しいテーマ拡張機能に移動し、アプリに登録します。Terminal
$ cd theme-app-extension $ shopify extension register $ $ You can only create one Theme App Extension per app, which can’t be undone. $ ┃ ? Would you like to register this extension? (y/n) (You chose: yes) - アセット管理とアプリのパフォーマンスを改善するための推奨事項を参照してください。
アプリをドラフトバージョンにプッシュする
shopify 拡張機能の push コマンドは、アプリの更新を開発ストアのドラフトバージョンにプッシュします。これにより、オンラインストアに公開する前に、サンドボックス環境でテーマアプリ拡張機能をテストできます。
- パートナーダッシュボードで拡張機能をドラフトバージョンにプッシュします。Terminal
$ shopify extension push $ $ Pushing code to Shopify... $ ┃ ✓ Pushed theme-app-extension to a draft on June 21, 2021 19:02:02 UTC. $ ┃ ⭑ Visit https://partners.shopify.com/368842/apps/5389427/extensions/theme_app_extension/3421707 to version and publish your extension. -
shopify extension pushコマンドから返されたリンクを使用して、パートナーダッシュボードに移動します。 - パートナーダッシュボードの開発ストアプレビューセクションで、有効にするをクリックします。
変更をテストする
開発ストアのテーマで変更をテストして、アプリの外観と動作が正しく機能することを確認します。
- 開発ストアで、Online Store 2.0 テーマに移動し、テーマエディターに移動します。
- 次の手順に従います。
- アプリが期待どおりに動作することを確認します。例については、ライフサイクル管理の推奨事項を参照してください。
アプリにオンボーディング手順を含める
アプリのインストール後に販売者が行う必要があることについての指示を提供します。詳細については、UX ガイドラインを参照してください。
テーマアプリの拡張機能を公開する
テーマアプリ拡張機能をオンラインストアで使用できるようになったら、最新のコードをプッシュしてアプリ拡張機能を公開できます。
- 拡張機能をパートナーダッシュボードにプッシュします。Terminal
$ shopify extension push $ $ Pushing code to Shopify... $ ┃ ✓ Pushed theme-app-extension to a draft on June 21, 2021 19:02:02 UTC. $ ┃ ⭑ Visit https://partners.shopify.com/368842/apps/5389427/extensions/theme_app_extension/3421707 to version and publish your extension. -
shopify extension pushコマンドから返されたリンクを使用して、パートナーダッシュボードでテーマ拡張機能に移動します。 - バージョンの作成をクリックします。
- 新しいバージョンがバージョンリストに表示されたら、公開をクリックします。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion