- 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から接続する」を押します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration1.png)
すると画面右に以下が表示されるため、「GitHubにログインする」ボタンを押し、GitHubのログイン画面が開いたらまずはログインをします。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration2-1.jpg)
GitHubアカウントでShopifyを承認する
GitHubにログイン後、以下の承認画面が開くため、内容を確認して「Authorize Shopify Online Store」ボタンを押します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration5.jpg)
GitHubにShopifyアプリをインストールする
Shopifyにアカウントをまだ接続していない場合は、以下の表示になるため、「GitHubで設定を表示する」を押します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration2-2.jpg)
すると、「Shopify Online Store」のGitHubアプリのインストール画面が開くため、接続するリポジトリを選択(全ての場合は「All repositories」)して、「Install」ボタンを押します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration3.jpg)
これでアプリがインストールされ、管理画面に戻って画面右に以下の「アカウント」と「リポジトリ」を選択する画面が表示されます。
※なぜか表示されない場合は先程の1つ前の画面になるため「もう一度お試しください」ボタンを押して再度試します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration2-2.jpg)
テーマを接続する画面に進めずに、以下の画面が表示される場合がありますが、一度ログアウトし、パートナーアカウントのストア管理からではなく、storename.myshopify.com/admin のURLから直接ログインすると入れました。(ただこれでも入れない場合があり、今のところ原因不明です)
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration11.jpg)
テーマをGitHubアカウント・リポジトリに接続する
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration7-1.jpg)
アカウントを選択したら、リポジトリを選択すると、
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration7-2.jpg)
ブランチが表示されるため、接続したいブランチの右にある「接続」ボタンを押します。これで接続が完了です。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration8.jpg)
Shopify管理画面で接続されていることを確認する
これでGitHub上のShopifyテーマが以下のようにShopifyに統合されました。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration9.jpg)
まだ公開はされていないため、公開する際は「公開する」を押します。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration10.jpg)
ShopifyとGitHubの接続をテストする
ではテーマを更新するとどうなるか見てみます。
Shopifyのテーマエディターから更新してみる
Shopify管理画面のテーマエディター(オンラインストア→カスタマイズ)から、試しに「告知バー」のテキストを変えてみます。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration12.jpg)
ログを見てみると、
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration13.jpg)
以下のように更新されました。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration14.jpg)
GitHub上でも変わっていることが確認できます。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration15.jpg)
Shopifyのコードエディターから更新してみる
次にコードエディター(オンラインストア→アクション→コードを編集する)から、試しにtheme.liquid のbody直下に {{ template }} を追加してみます。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration16-640x360.jpg)
画面左上にテンプレート名が表示されました。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration17.jpg)
GitHub上でも更新されていました。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration18.jpg)
Shopify CLIから更新してみる
CLIからも更新してみます。試しにindex.jsonのバナー文言を変えてみます。(通常は管理画面から変えると思いますが例として)
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration19.png)
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration20.jpg)
プレビューで確認したら、shopify theme push でプッシュし、GitHubで確認してみるとこちらも正しく更新されていました。
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration21.jpg)
![](https://torublog.com/wp-content/uploads/2021/07/shopify-cli-for-theme-320x180.png)
複数のストアに同じリポジトリを接続し、片方で更新してみる
2つの別々のストアに、同じレポジトリを接続して、片方から更新してみるとどうなるか。(あまりやらないと思いますが・・・)
これは両方に同期されるため、2つのストアとも同時に更新されました。
既存のテーマをGitHubに統合する
オンラインストア2.0に対応したDawnテーマではなくても、GitHubと統合することは可能です。
ただし、以下のテーマ構造に沿っていることが条件となります。
└── project
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
└── customers
![](https://torublog.com/wp-content/uploads/2021/07/shopify-github-integration22.jpg)
![](https://torublog.com/wp-content/uploads/2021/07/shopify-theme-migration-320x180.png)
GitHubから連携を解除する
GitHubから連携を解除するには、管理画面の「オンラインストア」→「アクション」→「GitHubから連携を解除する」を押します。
すると連携は解除されますが、Shopify上には他の通常のテーマと同じように残ります。
また、完全にGitHubとの接続を解除したい場合は、GitHub上のアカウントメニューから「Settings」→「Applications」の「Installed GitHub Apps」タブからアプリの削除を、「Authorized GitHub Apps」から承認の解除をする必要があります。
以上です!
![](https://torublog.com/wp-content/uploads/2021/07/shopify-dawn-theme-320x180.png)