ShopifyテーマをGitHubで管理する ─ AI時代の安全なデザイン・開発フロー ─【AI時代の実務設計シリーズ】

ShopifyテーマをClaude CodeやAntigravityなどのAIでカスタマイズする場面は、 ここ1年でかなり増えてきました。

しかし実際には、

• AIでコード生成
• テーマエディタに貼り付け
• 保存して確認

という作業を繰り返している人も多いと思います。

これでは、AIを使っていても開発フロー自体はあまり効率化されません。

そこでおすすめなのが

ShopifyテーマをGitHubで管理する方法

です。

テーマ編集のよくある問題

Shopifyのテーマを直接編集していると、次のような問題が起こりやすくなります。

• ちょっとした修正でレイアウトが崩れる
• 誰が何を変更したか分からない
• 以前の状態に戻せない

GitHubでテーマを管理すれば、変更履歴が残るため

• 過去の状態に戻せる
• 変更内容をレビューできる
• チーム開発がしやすくなる

といったメリットがあります。

ShopifyとGitHubを接続する

ShopifyとGitHubの連携はとてもシンプルです。

1. GitHubでテーマ用のリポジトリを作る
2. テーマファイルをpushする
3. Shopify管理画面 → テーマ → 「GitHubから接続する」
4. リポジトリとブランチを選択して接続

これでテーマライブラリに GitHub連携されたテーマが追加されます。

本番とstagingを分けるメリット

GitHubでテーマを管理する場合、

• main（本番）
• staging（検証）

というブランチ構成にするのが一般的です。

main → 本番テーマ
staging → 検証テーマ

このように分けることで

• 本番テーマを直接触らなくて済む
• 検証環境で動作確認できる
• クライアントにプレビューURLを共有できる

といったメリットがあります。

Shopify GitHub連携の注意点

ShopifyのGitHub連携には 双方向同期という特徴があります。

つまり

• GitHubにpush → Shopifyテーマに反映
• テーマエディタ変更 → GitHubに自動コミット

という仕組みになっています。

この挙動を理解していないと、

• マーチャントが編集した内容
• 開発者の変更

が上書きされてしまう可能性があります。

開発からリリースまでの流れ

安全に開発するための基本フローは次の通りです。

1. mainをpullして最新化
2. mainをstagingにマージ
3. stagingで開発
4. プレビューURLで確認
5. staging → mainへPR
6. 本番テーマが更新

Backport（逆マージ）の重要性

Shopify開発で特に重要なのが Backport（逆マージ）です。

これは

main → staging

のマージを先に行うことです。

理由はシンプルで、

• Shopify管理画面の変更
• 設定変更
• テキスト更新

が settings_data.json に保存されているからです。

Backportをしないと、 これらの変更を古いstagingで上書きしてしまう可能性があります。

まとめ

ShopifyテーマをGitHubで管理すると、 開発フローが大きく改善します。

• GitHubでテーマを管理する
• main / staging を分ける
• Backportを徹底する

AIを使ったテーマカスタマイズが増えている今こそ、 安全な開発フローを整備することが重要です。