Shopify

【講座2】Shopifyストア作成とプライベートアプリの作成

SUGAWAYABlogShopifyカテゴリ画像

この記事では、Shopify Theme Kitを使ったローカル環境構築のやり方を解説しています。
手順に従ってShopifyストアの設定をしたり、Shopify Theme Kitのコマンドを叩くだけで簡単にローカル環境が構築できます。

Shopifyストア作成とプライベートアプリの作成

Shopify Theme KitShopifyストアを接続するためにAPIキーやパスワードを取得します。
取得するには Shopifyストアでプライベートアプリを作成します。以下ではその手順を紹介します。

Shopifyストア作成

まずは、ストアがなければShopify Theme Kitとの接続先がありませんからストアを作りましょう。

それでは、Shopify partnersの管理画面にログインしてください。

登録がお済でない方はココから登録してください。

さて、Shopify partnersの管理画面にログインしますと以下の画面になります。

shopifypertners管理画面

次に、ストア管理をクリックして下さい。

ストア管理選択

ストア管理をクリックすると以下の画面になります。

shopifypertnersストア管理画面

次に、「ストアを追加する」ボタンをクリックします。

ストアを追加するボタンを押す

次に、「開発ストア」を選択してください。

開発ストアを選択する

開発ストア」を選択すると「ログイン情報」設定画面が現れます。
ここで、各情報を入力して「保存」ボタンをクリックします。

ログイン情報設定画面

保存をクリックすると「ストアを作成中です」の表示が出ますので少し待ちます。

ストアを作成中です

ストアの作成が完了すると以下の画面になります。

これでストアの作成は完了です!

プライベートアプリを作成

続いてプライベートアプリを作成します。

ストアの管理画面から「アプリ管理」をクリックして下さい。

アプリ管理選択

クリックすると、以下のような表示になります。
そして、「プライベートアプリを管理する」のリンクをクリックして下さい。

プライベートアプリを管理する

はじめは、以下のような画面になるかもしれませんが、「プライベートアプリの開発を有効にする」ボタンをクリックして下さい。

プライベートアプリの開発を有効にする

すると、以下の画面になります。
赤枠部のセレクトボックスを選択して、「プライベートアプリの開発を有効にする」ボタンをクリックして下さい。

プライベートアプリの開発を有効にする確認画面

続いて、以下の画面になります。
この画面では「プライベートアプリを作成する」ボタンをクリックして下さい。

プライベートアプリを作成する

次は、以下の画面になります。
非アクティブなAdmin API権限を表示する」リンクをクリックして下さい。

プライベートアプリを作成する選択

表示されるリストの中から以下(テーマ)を見つけて、「読み取り及び書き込み」を選択して、「 保存する 」をクリックして下さい

APIの選択

保存する」をクリックすると以下のようなポップアップが出ますので「アプリを作成する」をクリックして下さい。

アプリを作成する確認画面

ここまで来ましたら、アプリが完成しています。
一旦ここでブラウザを閉じてください。

閉じましたら Shopify partners から再度ログインしてください。

Shopifyパートナーからのログイン


ログインしようとすると、アカウントの選択などが表示されると思いますので、今回の開発に利用するアカウントを選んでください。

アカウント選択

次に、ストア管理をクリックします。

ストア管理選択

次は、開発ストアのログインボタンをクリックして下さい。

ストア管理からログイン

ログインしましたら、「アプリ管理」をクリックします。

アプリ管理選択

すると、「アプリ」画面になりますので、下の「プライベートアプリを管理する」のリンクをクリックして下さい。

プライベートアプリを管理する

「プライベートアプリを管理する」リンクをクリックすると、以下のような画面になります。
ご自分で作られたストア名をクリックします。

プライベートアプリ管理画面

ストア名をクリックすると、以下のような画面になります。
赤枠部の情報は必ずメモして大切に保管してください。後ほど使います。

ADMIN_API詳細画面

ここまでで、プライベートアプリを作成することができました!
少し長くなりましたので、続きは次の記事「アプリShopify Theme Kitを接続する 」でお送りいたします。