はじめに
初めてShopifyのテーマ開発を行ったので、その手順を記録に残します。
わたしはテーマの編集や更新といった運用保守ではなく、
デザイナーさんが作成したカンプに沿ってオリジナルデザインのテーマを構築しました。
Shopifyパートナー登録
まずはShopifyにアカウントを作成しましょう。
ショップオーナー用ではなく、開発者用のアカウントがあるので、
Shopifyパートナーに登録 します。
https://www.shopify.com/jp/partners
登録が終わったら、開発者用の管理画面にログインできます。
ここからマーチャントのストアにログインしたり、開発ストアを作成したりすることができます。
開発ストアを作成（ストアの新規作成）
開発ストアは簡単にいくつも作成できるので、試しにやってみるのも良さそうです。
作ったストアは完成後にオーナーへ譲渡することができます。
既存ストアがある場合
既存のストアがある場合や、ストアをリニューアルする場合は、マーチャントにアクセス許可をもらいましょう。Shopifyパートナーで作成したアカウントを共有して、コラボレーターアカウントを作成します。
開発ツールを導入
ローカルでテーマの構築を行っている場合、サーバーにアップすることなく、ローカル上でプレビューすることができます。
Shopify CLIをインストール
npmでダウンロードする場合は、以下のコマンドを実行してください：
npm install -g @shopify/cli@latest
https://shopify.dev/docs/api/shopify-cli
GitHubと連携する
リポジトリを作成
GitHubにリポジトリを作成し、コマンドラインが表示されているのでそのまま残しておきます。
テーマをインストール
開発を行うローカルフォルダでターミナルを起動します。
元となるテーマをインストールするため、次のコマンドを実行します：
shopify theme init
Name of the new theme: と聞かれるので、GitHubに作成したリポジトリと同じ名前 を入力しましょう。
ファイルのダウンロードが行われたら、cdコマンドで作成したフォルダへ移動 します。
cd "my-new-theme"
Gitにプッシュする
ディレクトリを移動したら、Gitコマンドでファイルをプッシュ します。
まずは初期化して、ファイルを追加・コミット：
git init
git add .
git commit -m "first commit"
git branch -M main
次に、リモートリポジトリを設定してプッシュします：
git remote set-url origin git@github.com:アカウント名/リポジトリ名
git push -u origin main
これでGitHubにプッシュできたらOKです。
ストアと連携する
コマンドでも連携できますが、複数ストアを管理していてちょっとビビリな私は、管理画面から操作を行いました。
テーマ画面を表示
ストアにログインし、「販売チャネル」＞「オンラインストア」＞「テーマ」でテーマ画面を開きます。
「テーマを追加」ボタンをクリックし「GitHubから接続」を選択します。
「GitHubにログインする」ボタンが表示されるので、ShopifyとGitHubを連携します。
アカウントとリポジトリの一覧が出てくるので、選択します。
接続が完了すると画像のようになります。
mainブランチにプッシュしたら更新されるか試してみましょう。
まずはプレビューでストアを表示します。
その後、どこかをコードで編集しGitにプッシュしたあと、編集箇所が反映されていたら問題なく接続されています！
プレビューしながら開発する
Shopifyコマンドで開発フォルダをローカルのブラウザでプレビューできます：
shopify theme dev
成功後は、http://127.0.0.1:9292 にアクセスしてリアルタイムプレビューが可能です。
ストアへデータを反映する場合は、git push を活用しましょう。
GitHubと連携しない
GitHubを使わずに、Shopify CLIでローカル環境のデータをストアへプッシュする方法です。
ストアと連携する
ストアのURLを確認して、下記のコマンドのテキストを差し替えて実行：
shopify theme list --store ストアのURL
ログインが必要な場合もあります。画面の指示に従ってください。
成功するとストアのテーマリストが表示されます。
Shopifyコマンドでプッシュする
Shopify CLIでストアのテーマを更新できます：
shopify theme push
ストアに存在するテーマのリストが表示されるので、該当のものを選択。
メインテーマとして設定されているテーマは [live] と表示されています。
ストアのカスタマイズ画面を使う
コマンドで簡単に操作できるShopifyですが、慣れないうちは theme push と theme pull を活用しつつ、
ストアのカスタマイズ画面も使っていくと良いです。
コードを編集するよりも、カスタマイズ画面から操作した方が簡単なときもあります。
ターミナルで以下を実行すると、カスタマイズ画面で更新した内容がローカルのファイルに反映されます：
shopify theme pull
おわりに
これでShopifyの開発環境が整いました！お疲れさまでした。
Shopifyの公式YouTubeにハンズオン動画があります。
これを見ると理解が深まると思います。
https://www.youtube.com/watch?v=YN8LQPW2DSY
Shopifyの学びをしっかり定着させるために、
次回はLiquidファイルの書き方を紹介できればと思っています。
この記事が何かのお役に立てれば幸いです！