ЯoomeR

プログラミング~実装とエラー解決と、時々、AI~

Shopifyで開発ストアを作ってみよう~アカウント作成からカスタムアプリインストールまで~

アカウント作成

ShopifyPartnerのページから「Join Now」を選択してアカウントの作成を進める。

ストアの作成

開発ストアを作成しよう。

ストア名は任意の内容で問題ない。

作成が完了すれば、{ストア名}.myshopify.comで自分のストアにアクセスできるようになる。

アプリの開発

Shopifyのパートナーページからログインしよう。

すると、アプリの作成画面に辿り着ける。

目的に応じてカスタムアプリか公開アプリのいずれかを選択しよう。

アプリURLとリダイレクトURLにはとりあえず「https://localhost/」と入力しておけば問題ない。

これでアプリ完成である。

アプリをインストールしよう

envファイルの編集

ngrokを公式サイトからダウンロードし、設定をしておこう。

また、ngrokのサイトでサインアップをついでに済ませておくと良い。

ngrokを立ち上げ、ローカルでアプリの.envファイルを編集する。

SHOPIFY_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
SHOPIFY_API_SECRET=shpss_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
SHOP=frepra.myshopify.com
SCOPES=write_products,write_customers,write_draft_orders
HOST=https://xxxxxxxxxxxxxxxxxxxxxxx.ngrok.io

入力する項目は以下の通り。

SHOPIFY_API_KEY
SHOPIFY_API_SECRET

カスタムアプリのAPIキー、APIシークレットキーを記載する。

SHOP

{ストア名}.myshopify.comを記載する。

SCOPES

記載しなくてもOK。

サブスクリプションアプリを開発する場合は、上記のように記載しておこう。

HOST

ngrokで表示されたものを記載する。

ngrokの使い方はこちら。

ストアにインストールする

URLを設定する

アプリの設定>URL

アプリURL、リダイレクトURLの許可の部分にngrokのURLを入力し、保存する。

次に、以下のURLにアクセスする。

https://[ngrokで発行したURL]/login?shop=[shopifyの開発ストアの名称]

例:https://xxxxxxxxxxxxxxx.ngrok.io/login?shop=frepra.myshopify.com

これでアプリのインストール画面に遷移するので、インストールを完了すれば終了。