- ShopifyとGitHub統合の概要を知りたい
- ShopifyとGitHubを統合する手順を知りたい
- 既存のテーマでShopifyとGitHubを統合する方法を知りたい
早速「Shopify GitHub integration」について試してみました。
Shopify GitHub 統合についての概要
「Shopify GitHub integration」は、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表されました。
ShopifyとGitHub上のリポジトリを接続すると、接続されたShopifyテーマが更新されるたびに、該当ファイルを自動的にpullまたはpushします。
これにより、ブランチへのコミットや、管理画面のコードエディタ（オンラインストア→コードを編集する）や、テーマエディター（オンラインストア→カスタマイズ）で編集・設定されたテーマを簡単に追跡し、最新の状態に保つことができます。
1つのShopifyストアに接続できるGitHubアカウントは1つのみです。
ShopifyをGitHubに統合する方法
ShopifyとGitHubを統合するためには、以下が必要です。
- テーマの管理権限を持つスタッフアカウント・またはオーナーであること（コラボレーターアカウントでは使用できない）
- GitHubで管理したいテーマがGitHub上に存在する（ない場合は作成しpushする）
- GitHubにアプリを追加する権限（ない場合は管理者に依頼）
ここから実際にGitHubに接続してみます。
GitHubにログインする
まずテーマの管理権限を持つアカウントにて、ストアの管理画面に storename.myshopify.com/admin のURLから直接ログインします。
次に、「オンラインストア」→「テーマ」に移動し、以下の「テーマの追加」から「GitHubから接続する」を押します。
すると画面右に以下が表示されるため、「GitHubにログインする」ボタンを押し、GitHubのログイン画面が開いたらまずはログインをします。
GitHubアカウントでShopifyを承認する
GitHubにログイン後、以下の承認画面が開くため、内容を確認して「Authorize Shopify Online Store」ボタンを押します。
GitHubにShopifyアプリをインストールする
Shopifyにアカウントをまだ接続していない場合は、以下の表示になるため、「GitHubで設定を表示する」を押します。
すると、「Shopify Online Store」のGitHubアプリのインストール画面が開くため、接続するリポジトリを選択（全ての場合は「All repositories」）して、「Install」ボタンを押します。
これでアプリがインストールされ、管理画面に戻って画面右に以下の「アカウント」と「リポジトリ」を選択する画面が表示されます。
※なぜか表示されない場合は先程の1つ前の画面になるため「もう一度お試しください」ボタンを押して再度試します。
テーマを接続する画面に進めずに、以下の画面が表示される場合がありますが、一度ログアウトし、パートナーアカウントのストア管理からではなく、storename.myshopify.com/admin のURLから直接ログインすると入れました。（ただこれでも入れない場合があり、今のところ原因不明です）
テーマをGitHubアカウント・リポジトリに接続する
アカウントを選択したら、リポジトリを選択すると、
ブランチが表示されるため、接続したいブランチの右にある「接続」ボタンを押します。これで接続が完了です。
Shopify管理画面で接続されていることを確認する
これでGitHub上のShopifyテーマが以下のようにShopifyに統合されました。
まだ公開はされていないため、公開する際は「公開する」を押します。
ShopifyとGitHubの接続をテストする
ではテーマを更新するとどうなるか見てみます。
Shopifyのテーマエディターから更新してみる
Shopify管理画面のテーマエディター（オンラインストア→カスタマイズ）から、試しに「告知バー」のテキストを変えてみます。
ログを見てみると、
以下のように更新されました。
GitHub上でも変わっていることが確認できます。
Shopifyのコードエディターから更新してみる
次にコードエディター（オンラインストア→アクション→コードを編集する）から、試しにtheme.liquid のbody直下に {{ template }} を追加してみます。
画面左上にテンプレート名が表示されました。
GitHub上でも更新されていました。
Shopify CLIから更新してみる
CLIからも更新してみます。試しにindex.jsonのバナー文言を変えてみます。（通常は管理画面から変えると思いますが例として）
プレビューで確認したら、shopify theme push でプッシュし、GitHubで確認してみるとこちらも正しく更新されていました。
複数のストアに同じリポジトリを接続し、片方で更新してみる
2つの別々のストアに、同じレポジトリを接続して、片方から更新してみるとどうなるか。（あまりやらないと思いますが・・・）
これは両方に同期されるため、2つのストアとも同時に更新されました。
既存のテーマをGitHubに統合する
オンラインストア2.0に対応したDawnテーマではなくても、GitHubと統合することは可能です。
ただし、以下のテーマ構造に沿っていることが条件となります。
└── project
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
└── customers
GitHubから連携を解除する
GitHubから連携を解除するには、管理画面の「オンラインストア」→「アクション」→「GitHubから連携を解除する」を押します。
すると連携は解除されますが、Shopify上には他の通常のテーマと同じように残ります。
また、完全にGitHubとの接続を解除したい場合は、GitHub上のアカウントメニューから「Settings」→「Applications」の「Installed GitHub Apps」タブからアプリの削除を、「Authorized GitHub Apps」から承認の解除をする必要があります。
以上です！
