Shopifyのテーマを複数人で編集していると「いつ変更されたのかわからない」「制作会社がどこを修正したのか確認したい」といった場面があります。
Shopifyでは「Shopify GitHub App」を利用してテーマとGitHubリポジトリを接続できます。GitHubで変更したテーマをShopifyへ反映したり、Shopify管理画面から行った変更をGitHubへ記録したりできる機能です。
本記事ではShopify GitHub連携の仕組みやメリット、設定方法、運用時の注意点を解説します。
Shopify GitHub連携とは
Shopify GitHub連携では、ShopifyテーマとGitHubリポジトリを接続できます。管理対象となるのはテーマコードやテーマ設定で、商品、注文、顧客、決済設定、アプリ内データなどをGitHubで管理する機能ではありません。
＜GitHub連携で使う主な用語＞
| 用語 | 意味 |
|---|---|
| リポジトリ | テーマのファイル一式と変更履歴を保管する場所 |
| ブランチ | 同じリポジトリの中で作業を分けて進めるための分岐。本番用と開発用などを並行して管理できる |
| コミット | ファイルの変更を1回分の履歴として記録すること |
| push | パソコン上で記録したコミットをGitHubへ送ること |
| プルリクエスト | あるブランチの変更を別のブランチへ取り込む前に、内容の確認を依頼する仕組み |
ShopifyテーマとGitHubリポジトリを接続する機能
Shopifyでは「Shopify GitHub App」が提供され、GitHubアカウントとShopifyを接続すると、GitHubリポジトリ内のブランチをShopifyテーマとして登録できます。
接続したテーマには、リポジトリ名、ブランチ名、最後にコミットされた時刻などがShopify管理画面に表示されます。
画像出典：GitHub
ShopifyとGitHubの間でテーマの変更を同期できる
GitHubで接続中のブランチを更新すると、変更内容がShopify側のテーマへ反映されます。反対に、Shopify管理画面からテーマを変更して保存すると、接続しているGitHubブランチへ変更内容が自動的にコミットされます。
Shopify側からGitHubへ反映される変更には、テーマエディタによるカスタマイズ、コードエディタでの編集、オンラインストアにインストールされたテーマアプリによる変更などがあります。
ただし、ShopifyとGitHubが双方の変更を自動的に統合するわけではありません。同じファイルを複数の環境から編集すると、競合や上書きが発生する場合があります。詳しくは本記事の「ShopifyとGitHubを連携するときの注意点」で解説します。
Shopify CLIとGitHub連携の違い
Shopifyのテーマ開発では「Shopify CLI」もよく利用されます。
Shopify CLIはパソコン上のローカル環境でShopifyテーマを開発するためのコマンドラインツールです。テーマのプレビュー、Shopifyからのテーマ取得、作成したコードの反映などに利用できます。
| 項目 | Shopify GitHub連携 | Shopify CLI |
|---|---|---|
| 主な用途 | GitHubとShopifyテーマの変更・履歴管理 | ローカル環境でのテーマ開発 |
| 変更履歴 | GitHubのコミットやブランチで管理 | Gitなどを別途利用して管理 |
| プレビュー | Shopifyに登録したテーマで確認 | 開発テーマを利用して確認 |
| 主な利用者 | GitHubでテーマを管理したいチーム | コードを編集してテーマ開発する開発者 |
Shopify GitHub連携とShopify CLIを併用することもでき、Shopify CLIを使ってローカル環境でテーマを開発し、GitHubでコードや変更履歴を管理する運用も可能です。
Shopify CLIについて詳しくは、公式ドキュメントをごらんください。
ShopifyテーマをGitHubで管理するメリット
GitHubではコミットやブランチ、プルリクエストなどを使って変更内容を整理できます。変更を公開用のブランチへ取り込む前に、別の担当者が内容を確認する運用も可能です。
テーマの変更履歴をコミットとして残せる
GitHubでは、テーマコードの変更をコミットとして記録できます。変更前後のコードを比較できるため、どのファイルがどのように書き換えられたのかを確認可能です。
問題が発生したときも、過去のコミットをたどって原因を調査できます。原因となった変更を取り消す場合は、GitHub上でその変更を打ち消すコミット（revert）を作成して接続中のブランチへ反映すると、Shopify側のテーマにも取り消した内容が同期されます。複数のファイルにまたがる変更も、コミット単位でまとめて取り消せます。
Shopify管理画面から行った変更もGitHubに記録できる
Shopify GitHub連携では、開発者がGitHubから行った変更だけでなく、Shopify側で行ったテーマの変更も記録できます。
たとえば、制作会社がGitHubからコードを編集し、EC担当者がShopifyのテーマエディタから画像やセクションを変更している場合でも、Shopify側で保存した内容は接続中のブランチへコミットされます。
開発者以外の担当者がShopify管理画面から行った編集も、変更履歴に含められる点が特徴です。
GitHubのコミットから最後のテーマ編集者を確認できる
Shopifyは2026年8月26日、GitHubと連携したテーマのコミット情報をアップデートしました。Shopify管理画面から接続中のテーマを編集すると、変更内容がShopifyのbotによるコミットとしてGitHubに記録されます。
アップデート以降は、コミットの本文にストア名と、最後にテーマを保存したユーザー名が表示されるようになりました。ただし、約10秒以内に続けて保存された変更は1つのコミットにまとめられ、表示されるのは最後に保存したユーザー名だけです。制作会社とストア担当者がほぼ同時に編集した場合、先に保存した人の名前は残りません。なお、コミットの作成者は引き続きShopifyのbotのため、git blameなどGitの標準機能で表示される作成者は変わりません。
Shopify側で保存した変更について、ファイルごとの編集者を完全に特定することはできません。変更内容を詳しく管理したい場合は、GitHub上でコミットやプルリクエストを作成する運用もあわせて検討しましょう。
参照：GitHub commits now name the last theme editor（2026年8月26日時点）
ブランチを使って本番用と開発用のテーマを分けられる
GitHubでは「ブランチ」を作成し、テーマの変更を分けて管理できます。
たとえば、公開中のテーマを管理するメインのブランチとは別に、リニューアルやキャンペーン用のブランチを用意できます。
開発中のブランチをShopifyの未公開テーマとして接続すれば、公開ストアへ影響を与えずに内容を確認できます。セールやキャンペーン用のブランチを必要な期間だけ公開し、終了後に元のテーマへ戻す運用も可能です。
ただし、接続したブランチは1つずつテーマライブラリのテーマとして追加され、テーマライブラリに追加できるテーマは最大20個です（2026年9月時点）。使い終わったブランチのテーマは整理しておきましょう。
Shopify標準の変更履歴・テーマ複製・GitHub連携の違い
Shopifyにはコード実装連携以外に、コードエディタの変更履歴やテーマを複製する機能もあります。
| 項目 | コードエディタの変更履歴 | テーマの複製 | GitHub連携 |
|---|---|---|---|
| 主な用途 | ファイルの変更確認・復元 | テーマのバックアップ | 継続的なバージョン管理 |
| 変更差分の確認 | ファイル単位で可能 | 基本的に不可 | コミット単位で可能 |
| ブランチ管理 | 不可 | 不可 | 可能 |
| 複数人での管理 | 限定的 | 限定的 | チーム運用に向いている |
| 過去の状態への復元 | ファイル単位 | 複製したテーマを利用 | コミット単位で取り消し可能 |
Shopifyのコードエディタには「Timeline」があり、既存ファイルの過去の状態を確認して復元できます。ただし、テーマ全体を一括で戻す機能ではなく、削除したファイルも復元できません。assetsフォルダの画像やCSS、JavaScriptには履歴が残らず、履歴の保存期間にも限りがあります。
画像出典：Shopify
テーマの複製は大きなカスタマイズを始める前のバックアップに利用できます。Shopifyもテーマをカスタマイズする前に複製しておくことを推奨しています。
GitHub連携は変更履歴を継続的に残したいときや、ブランチを使って複数の作業を管理したいときに向いています。それぞれ役割が異なるため、GitHubを利用していても大きな作業前にはテーマを複製しておくとよいでしょう。
Shopify GitHub連携が向いているストア
テーマエディタによる軽微な変更が中心で、テーマコードをほとんど編集しないストアなら、テーマの複製やShopify標準の変更履歴で対応できる場合があります。
一方、次のようなストアにはGitHub連携が向いています。
- 制作会社や複数の担当者がテーマを編集している
- テーマコードを継続的にカスタマイズしている
- 本番用と開発用のテーマを分けたい
- 変更前後のコードを比較したい
- プルリクエストを利用して公開前に変更を確認したい
GitHub連携を導入する場合は、リポジトリの所有者、公開用ブランチ、編集方法、確認手順などもあわせて決めておきましょう。
ShopifyとGitHubを連携するために必要なもの
ShopifyテーマとGitHubを接続するには、主に以下の3つを用意します。
- GitHubアカウント
- Shopifyテーマを保存するGitHubリポジトリ
- Shopify GitHub App
個人のGitHubアカウントを利用する場合、1つの個人GitHubアカウントに同時に接続できるShopifyアカウントは1つです。Shopifyは、個人アカウントではなくGitHub Organizationでの利用を推奨しています。複数人でリポジトリへアクセスしやすく、制作会社からストア運営者へ管理を引き継ぐときにも利用できます。Organizationのリポジトリの場合、外部コラボレーターとして招待されたアカウントはブランチを接続できないため、制作会社の担当者もOrganizationのメンバーとして追加しておきましょう。
また、Shopify管理画面からGitHubのブランチを接続するには、Shopify側とGitHub側の両方で権限が必要です。
Shopifyでは、ストアオーナーに加えて、オンラインストアの「テーマ」権限を持つスタッフやコラボレーターが接続できます。GitHubでは、接続先となるリポジトリへの書き込み権限が必要です。
Shopify GitHub Appでは、すべてのリポジトリではなくテーマ管理に利用するリポジトリにだけアクセスを許可する方法が推奨されています。
ShopifyテーマとGitHubを連携する方法
既存の公開テーマを扱うときは、接続前にテーマを複製しておくと、問題が起きた際に元の状態を残せます。
GitHubにテーマ用リポジトリを用意する
最初にShopifyテーマを保存するGitHubリポジトリを用意します。
Shopify GitHub連携で接続するブランチは、Shopifyテーマの標準的なフォルダ構成に対応している必要があります。主なフォルダは以下のとおりです。
- assets
- blocks
- config
- layout
- locales
- sections
- snippets
- templates
ビルドツールでテーマファイルを変換してから反映する開発環境の場合、変換前のファイルを置くsrcフォルダや変換後のdistフォルダを含むブランチは接続できません。変換後のファイルを標準のフォルダ構成で置いたブランチを別に用意して接続します。標準構成に含まれないフォルダは、同期対象になりません。
Shopify GitHub Appをインストールする
Shopify GitHub AppをGitHubへインストールし、Shopifyからリポジトリへアクセスできる状態にします。
GitHub Organizationを利用している場合は、OrganizationにShopify GitHub Appを追加してください。アクセスを許可するリポジトリを選択できるため、テーマ管理に必要なリポジトリだけを指定します。
対象のリポジトリがShopify管理画面に表示されない場合は、GitHub側でShopify GitHub Appのアクセス設定を確認しましょう。
Shopify管理画面からGitHubに接続する
Shopify管理画面から「オンラインストア」＞「テーマ」へ移動します。テーマライブラリで「テーマを追加」を選択し、「GitHubから接続」へ進んでください。その後、接続するGitHubアカウントまたはOrganizationを選びます。
Shopify GitHub Appのインストールや認証が完了していない場合は、途中でGitHub側の認証画面が表示されます。
画像出典：Shopify
リポジトリとブランチを選択する
GitHubアカウントを選択したら、Shopifyテーマとして利用するリポジトリとブランチを指定します。
接続が完了すると、テーマライブラリにGitHubと連携したテーマが追加されます。テーマカードから、リポジトリ名、接続しているブランチ、最後にコミットされた時刻などを確認できます。
画像出典：Shopify
ShopifyとGitHubの同期を確認する
接続後は正常に同期できるか確認します。まずはShopifyのテーマエディタから告知バーの文章などを変更して保存し、GitHubに新しいコミットが作成されているか確認します。次にGitHub側からも小さな変更をコミットしてブランチへpushし、Shopifyテーマへ反映されるか確認します。
実際のカスタマイズを始める前に双方からテストしておくと、接続や権限の問題を早い段階で把握できます。
GitHubと連携したテーマを公開する
画像出典：Shopify
GitHubと接続したテーマも、通常のテーマと同じようにShopifyのテーマライブラリから公開できます。
未公開テーマを公開しても、GitHubブランチとの接続は維持されます。
ShopifyとGitHubを連携するときの注意点
Shopify GitHub連携は変更履歴の管理に役立ちますが、複数人で利用する場合は、編集方法や公開までの手順を事前に決めておく必要があります。
公開中テーマに接続したブランチへのpushはストアに即反映される
GitHubへpushしても、新しいテーマが自動的に公開されるわけではありません。変更が反映されるのは、そのブランチを接続しているShopifyテーマです。ただし、接続先が公開中のテーマであれば、pushした時点で公開ストアの表示も変わります。
公開用ブランチへ直接pushせず、開発用ブランチと未公開テーマで確認してから統合する流れを徹底しましょう。Shopify CLIを利用している場合は、開発テーマを使ったプレビューも可能です。
テーマエディタの変更と開発用ブランチの統合に注意する
テーマエディタで行ったカスタマイズは、テーマコードの一部である設定ファイルに保存されます。テーマ全体の設定は「config/settings_data.json」、各ページのセクションやブロックの設定はJSONテンプレートやセクショングループのファイルに書き込まれます。
公開中のテーマをEC担当者がテーマエディタで編集すると、これらのファイルの変更は公開用ブランチへ自動的にコミットされますが、開発用ブランチには含まれません。開発用ブランチでも同じファイルを変更していると、統合の際に競合が起きたり、統合の仕方によってはEC担当者が変更したバナーや文言が開発時点の内容に戻ったりすることがあります。
開発用ブランチを統合する前に公開用ブランチの最新の内容を取り込んでおく、プルリクエストでJSONファイルの差分を確認する、といった手順をあらかじめ決めておきましょう。
ShopifyとGitHubで同じファイルを同時に編集しない
Shopify管理画面とGitHubから同じテーマファイルを編集すると、競合や意図しない上書きが発生することがあります。テーマエディタで開いているファイルがGitHubやコードエディタから変更されたときは、保存時に警告が表示されます。
一方、Shopifyのコードエディタでは、ほかの環境で同じファイルが変更されていても警告が表示されません。そのまま保存すると、GitHub側の変更を上書きする場合があります。また、同時に編集するとShopify側のコミットが古い内容と判断され、GitHubへの反映が拒否されることもあります。
Shopify側の変更はGitHubへの自動反映を停止できない
GitHubと接続中のテーマをShopify管理画面から編集すると、変更されたファイルはGitHubへ自動的に反映されます。この自動更新を無効にすることはできません。「GitHubには開発者が承認したコードだけを反映する」といった運用を想定しているときは、Shopify側からテーマを編集する担当者とのルールを決めておく必要があります。
Shopifyに同期させるコードをほかのコードから分けたい場合は、リポジトリやブランチを分ける方法も検討してください。
同期されない場合はログを確認する
GitHubで変更した内容がShopifyへ反映されない場合は、テーマカードの「ログを表示」から最近の同期状況を確認できます。
GitHubの最新コミットがShopifyテーマへ反映されていない場合は、テーマカードの「…」（アクション）メニューから「最新のコミットにリセット」を選択すると、接続中のブランチにある最新の内容をShopify側へ反映できます。
画像出典：Shopify
ただし、Shopify側のテーマがGitHub上の最新コミットの状態に更新されるため、操作前に残しておきたい変更がないか確認してください。
接続を解除したブランチは同じテーマへ再接続できない
ブランチとテーマの接続を解除した後は、同じテーマへブランチを再接続できません。再び接続すると、テーマライブラリに別のテーマとして追加されます。
接続を解除する場合は、対象のテーマやブランチに間違いがないか確認してから操作しましょう。
まとめ
Shopify GitHub連携を利用すると、ShopifyテーマとGitHubリポジトリを接続し、テーマコードや設定の変更履歴を管理できます。Shopify管理画面から保存した変更もGitHubへ記録されるため、制作会社や複数の担当者による変更履歴をまとめて確認できます。
公開テーマに接続したブランチを変更するとストアにも反映されるため、開発用ブランチや未公開テーマを使って確認してから本番へ反映する運用を検討してみてください。
