Shopifyテーマ開発の流れ|Shopify Online Store 2.0

テーマ開発

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.「保存」をクリック。

開発ストアでできること、できないことは以下です。

開発ストア内でできること

  • テスト注文 (無制限)
  • ユニーク商品を作成(無制限)
  • カスタムアプリを作成(最大10個)
  • カスタムドメインを割り当てる
開発ストアで制限されること

  • アプリのインストールは、無料アプリとパートナー向けアプリのみ。
  • パスワードページを削除すること。

②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-cli

3.下記コマンドを実行し、Shopify CLIがインストールできたかを確認

shopify version

4.新しいバージョンがある場合は、下記コマンドで新しいバージョンにアップデート

brew update
brew upgrade shopify-cli

Shopify CLでできることは以下です。(Shopify CLI for Theme

Shopify CLIでできること

  • テーマへの変更を安全にプレビュー、テスト、および共有
  • テーマをプレビューするときのCSSとセクションのホットリロード
  • Dawnを開始点として使用して新しいテーマを初期化
  • コマンドラインからテーマをプッシュして公開
  • テーマチェックを実行
  • 製品、顧客、ドラフト注文など、テーマのテストデータを入力

Shopify CLIのコマンド一覧については、こちらを参考にしてください。

③開発テーマを作成する

開発ストアと、テーマ開発のツールを準備できたので、いよいよテーマを開発していきます。

1.ターミナルで以下を実行し、開発ストアに接続

shopify login --store <DOMAIN>

例えば、下記のように開発ストアのドメインを入力して実行してください。

shopify login --store johns-apparel.myshopify.com

2.ログインが完了したら、テストサーバーを立ち上げる

下記コマンドでローカルのテストサーバーを起動

shopify theme serve

※パスワードを求められる際に、ストアのパスワードを入力
僕は初めての時にここでめちゃくちゃハマりました。以下ハマった時の記事です、参考にしてください。

④gitとの連携を行う

1.テーマを反映したいストアにログイン。

2.「オンラインストア」から「テーマ」に移動

3.「テーマライブラリ」で、「テーマの追加」から「GitHubから接続」をクリック。

4.Git Hubにログイン。

5.Shopify GitHubアプリをインストール

Shopify GitHubアプリを承認し、インストールする。
インストールすると、Shopifyのロード画面になり、インストールが完了するとストアとの接続が完了する。

参考:Shopify|Git Hubの統合

⑤開発したテーマを本番に反映

1.テーマを反映したいストアにログイン。

2.「オンラインストア」から「テーマ」に移動。

3.「テーマライブラリ」で、公開するテーマで「アクション」から「公開」をクリック。

4.「公開」ウィンドウで、「公開」をクリック。

これで、作成したテーマを本番ストアへ反映することが出来ます。