- 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」から承認の解除をする必要があります。
以上です!
