TORUBLOG
Shopify

[Shopify] GitHubと統合する方法

[Shopify] GitHubと統合する方法
この記事で解決できるお悩み
  • ShopifyとGitHub統合の概要を知りたい
  • ShopifyとGitHubを統合する手順を知りたい
  • 既存のテーマでShopifyとGitHubを統合する方法を知りたい
早速「Shopify GitHub integration」について試してみました。

Shopifyの無料体験をはじめる

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

Shopifyの無料体験をはじめる

← Back to Home