【1から解説！】Shopify CLIとGitHubを連携し、shopifyテーマ開発の手順を解説

こんにちは。PeiWebです。
本日は、Shopifyのテーマ開発する際の基本的な流れを解説していきます。

テーマ開発方法

まず、テーマ開発の手順は以下の２通りあります。
1.Shopify CLIを使う方法
2.GitHubと連携して使う方法

テーマ開発は、基本的に、2.GitHubと連携する方法を利用します。
ただ、一文だけ変えるというちょっとした変更であれば、 初期設定のいらないShopify CLIを使いで変更する場合もあります。そのため、今回はShopify CLIとGitHubと連携して使う方法を解説していきます。また、ローカルで変更する場合は、事前にpullしてから開発を進めていきます。

準備するもの

テーマ開発には以下のものが必要となります。こちらの方法は準備編にて解説していきます。
「すでに、準備万端だぜ！」という方は、準備編をすっ飛ばしてください。

・Shopify CLIのインストール
・GitHubのアカウント
・Shopifyテーマフォルダ(ローカル環境)

【準備編】Shopify CLIのインストール

Shopify CLIをインストールするには、以下の2点が必要です。

1.Ruby2.7以上がインストールされていること
2.Homebrewがインストールされていること（Mac OSの場合)

まだの方は、下記のブログ等に記載されているので参考にインストールしてください。
https://qiita.com/Shopify_ojisan/items/912f457daee23b7d1dd5

準備が終わりましたら、以下のコマンドを入力してインストールしてください。
・gemでインストール(Windowsの場合)

gem install shopify-cli

・Homebrewでインストール（MacOSの場合）

brew tap shopify/shopify
brew install shopify-cli

【準備編】GitHubのアカウント

最初にGitHubに登録していきます。
下記のリンクからログイン画面を開きます。
https://github.com/login

GitHubのログイン画面
URLを開くと、上記のログイン画面が表示されます。赤枠の箇所からアカウントを生成してください。

下記の画面に遷移するかと思いますので、メールアドレス、パスワード、ユーザー名を入力して、Continueをクリックします。
アカウント登録画面

あとは、流れに沿って選択すれば登録できるかと思います。もしわからなければご連絡ください。

【準備編】Shopifyテーマフォルダ(ローカル環境)

ローカル環境にテーマを導入していきます。
以下のコマンドでテーマを導入でき、実行後テーマ名を入力します。

   shopify theme init
   > テーマ名を入力

「shopify theme init」を用いることにより、Gitリポジトリからクローンが始まり、自分のPC(ローカル)にテーマのコピーを作成します。
コピーされるテーマは、デフォルトで「Dawn」のため、「Dawn」のテーマが生成されることが確認できるかと思います。

以下のように作成されていたら成功です。

ここまで、準備できましたら、本題に移っていきます。

手順1.GitHubからリモートリポジトリを作成

1.1 リポジトリ生成画面の表示

下記の画面のように、赤枠の「new repository」を選択してください。

1.2 リポジトリの生成

下記の画面のように、リポジトリの名前、Private設定を行い、リポジトリを生成してください。

基本、現場ではインターネット上の誰でもリポジトリを見られないようにするため、Privateリポジトリで生成しております。そのため、「Private」を選択してリポジトリを生成することをお勧めします。

手順2.ローカルリポジトリとリモートリポジトリを連携

次に、自分のローカル上で管理しているShopifyファイルからローカルリポジトリを生成し、リモートリポジトリを紐づけ、リモートリポジトリに反映させます。
以下のコードをShopifyのテーマを管理しているディレクトリで順番に打ち込んでください。

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/GitHubのユーザー名/リポジトリの名前.git
git push -u origin main

上記の方法でも可能ですが、「1.2 リポジトリの生成」でリポジトリを生成すると下記の画面に遷移するので、下記の画像のように、赤枠のコードをコピペして貼り付けて、連携することも可能です。

何をしているのか詳しくみていきます。

git init

Shopifyテーマを管理しているディレクトリでローカルリポジトリを生成します。

git add . / git commit -m "first commit"

自分のパソコン上にあるShopifyテーマをローカルリポジトリに追加しております。

git remote add origin https://github.com/GitHubのユーザー名/リポジトリの名前.git

ローカルリポジトリとリモートリポジトリを紐付ける作業をしております。

git push -u origin main

リモートリポジトリに反映しております。

手順3.Shopifyの管理画面でGitHubを連携

次に、Shopifyの管理画面からGitHubを連携する作業を説明します。
下記の画像のように、管理画面から「オンラインストア」▶︎「テーマ」▶︎「テーマ追加」▶︎「GitHubから接続する」を選択してください。

「GitHubから接続する」をクリックすると下記の画像のような①の画面が表示されます。
「アカウントの追加」をクリックすると②の画面が表示され、「only select repository」 を選択、「select repository」 にて該当するリポジトリを選択してください。
その後、「SAVE」ボタンをクリックします。

最後に、リポジトリを押すと、連携したリポジトリを選択できるようになっています。
「main」ブランチと「接続」ボタンをおしましょう。
そうすると、GitHubからテーマディレクトリをインストールが始まります。
これで、GitHubとShopifyとの連携が完了です。

下記のように反映されていたら成功です。

---

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

---