・Shopifyテーマ開発するには、何を準備すればいい？
・Shopifyテーマ開発の流れが知りたい！
Shopifyのテーマ開発をする流れについて解説しています。
Shopifyは2021年6月30日から、Shopify Online Store2.0が始まりました。
以前は、Debutというテーマを元にテーマ開発を行っていましたが、Shopify Onlilne Store2.0からはDawnというテーマを元にテーマ開発を進めていきます。
①Shopifyの開発ストアを構築
まずは、テーマを作っていくための開発ストアを用意します。
開発ストアは無料のShopifyアカウントで作成できる開発用のストアです。
開発ストアを作成する流れは以下です。
参考：開発ストアを構築する
1.パートナーダッシュボードにログイン。
※アカウントを持っていない方はアカウントを作成してください。
2.「ストア」をクリック。
3.「ストア」を追加するをクリック。
4.ストアタイプセクションで、「開発ストア」 を選択。
5.ログイン情報セクションで、ストアの名前とパスワードを入力。
6.オプション: 「開発者プレビューを使用した譲渡不可のストアを作成する」を確認し、開発者プレビューを有効にします。ドロップダウンリストから開発者プレビューバージョンを選択。
7.ストアの住所セクションで、住所を入力。
8.オプション: ストアの目的セクションで、開発ストアを作成している理由を選択。
9.「保存」をクリック。
開発ストアでできること、できないことは以下です。
②Shopify CLIをインストール
テーマを開発していくストアを作成した後は、テーマを作成するために必要なツールを準備していきます。
Shopify Online Store2.0が出る以前は「ThemeKit」を使っていましたが、Shopify Online Store2.0は「Shopify CLI」を使って開発していきます。
1.ターミナルで下記コマンドを実行し、Shopify CLIをインストールする準備
brew tap shopify/shopify※homebrewでシャロークローンのエラーが出る方は下記の方法で対処してください。
https://gotohayato.com/content/528/
2.下記コマンドを実行し、Shopify CLIをインストール
brew install shopify-cli3.下記コマンドを実行し、Shopify CLIがインストールできたかを確認
shopify version4.新しいバージョンがある場合は、下記コマンドで新しいバージョンにアップデート
brew update
brew upgrade shopify-cliShopify CLでできることは以下です。（Shopify CLI for Theme）
Shopify CLIのコマンド一覧については、こちらを参考にしてください。
③開発テーマを作成する
開発ストアと、テーマ開発のツールを準備できたので、いよいよテーマを開発していきます。
1.ターミナルで以下を実行し、開発ストアに接続
shopify login --store <DOMAIN>例えば、下記のように開発ストアのドメインを入力して実行してください。
shopify login --store johns-apparel.myshopify.com2.ログインが完了したら、テストサーバーを立ち上げる
下記コマンドでローカルのテストサーバーを起動
shopify theme serve※パスワードを求められる際に、ストアのパスワードを入力
僕は初めての時にここでめちゃくちゃハマりました。以下ハマった時の記事です、参考にしてください。
④gitとの連携を行う
1.テーマを反映したいストアにログイン。
2.「オンラインストア」から「テーマ」に移動
3.「テーマライブラリ」で、「テーマの追加」から「GitHubから接続」をクリック。
4.Git Hubにログイン。
5.Shopify GitHubアプリをインストール
Shopify GitHubアプリを承認し、インストールする。
インストールすると、Shopifyのロード画面になり、インストールが完了するとストアとの接続が完了する。
⑤開発したテーマを本番に反映
1.テーマを反映したいストアにログイン。
2.「オンラインストア」から「テーマ」に移動。
3.「テーマライブラリ」で、公開するテーマで「アクション」から「公開」をクリック。
4.「公開」ウィンドウで、「公開」をクリック。
これで、作成したテーマを本番ストアへ反映することが出来ます。
