ShopifyテーマをGitHub + CLIで管理する方法｜アップデート時の完全ガイド

Shopifyのテーマをカスタマイズしている場合、テーマのアップデートが来るたびに「カスタム変更が消えてしまうのでは？」と不安になる方も多いでしょう。この記事では、GitHub + Shopify CLIを使って、テーマのアップデートを安全に管理する方法を解説します。

なぜGitHub + Shopify CLIを使うのか

Shopifyのテーマを直接編集すると、アップデート時にカスタム変更が上書きされるリスクがあります。GitHub + Shopify CLIを使うことで、以下のメリットが得られます。

• カスタム変更の履歴を完全に追跡できる
• アップデートと自分の変更を安全にマージできる
• チームで作業する場合もコードレビューが可能
• ローカルでプレビューしながら安全に開発できる

事前準備

必要なもの

• GitHubアカウント（プライベートリポジトリを使用すること）
• Node.js（最新のLTS版推奨）
• Shopify CLI

Shopify CLIのインストール

npm install -g @shopify/cli @shopify/theme

ストアにログイン

shopify theme dev --store [your-store].myshopify.com

現在のテーマをローカルにダウンロード

shopify theme pull

GitHubにプッシュ

git init
git add .
git commit -m "初期テーマ"
git remote add origin https://github.com/[your-repo]
git push -u origin main

⚠️ 注意： テーマストアで購入したテーマのコードは、必ずプライベートリポジトリで管理してください。

ブランチ戦略

GitHub連携では、1つのブランチ = 1つのShopifyテーマという対応になります。

GitHubブランチ          Shopifyテーマ
─────────────────────────────────────
main          →    本番テーマ（公開中）
dev       →    開発テーマ（確認用）

devブランチを作成

git checkout -b dev
git push -u origin dev

GitHubと連携

1. [オンラインストア][テーマ][テーマをインポートする][GitHubから連携する]を選択

origin/mainブランチを割り当ててこれを現在のテーマにする。

通常更新時の手順

1. devブランチに切り替える

git checkout dev

2. 最新のmainを取り込む

git pull origin main

3. ファイルを編集する

ローカルプレビューしながら作業する場合は先に以下を実行しておくと便利です。

shopify theme dev

4. 変更をコミットしてプッシュ

git add .
git commit -m "変更内容を簡潔に書く"
git push origin dev

5. 動作確認

Shopifyの管理画面でdevブランチに対応するドラフトテーマをプレビューして確認する。

6. mainにマージして本番反映

git checkout main
git merge dev
git push

テーマアップデート時の手順

1：管理画面で新バージョンをドラフトに追加

Shopify管理画面の オンラインストア → テーマ でアップデート通知をクリックし、「ドラフトテーマに追加」を選択します。

2：新バージョンをローカルにダウンロード

# テーマ一覧でIDを確認
shopify theme list

# 出力例：
# [ライブ]    ID: 123456789  現在のテーマ v1.0
# [ドラフト]  ID: 987654321  Updated copy of 現在のテーマ v2.0

# 新バージョンをダウンロード
shopify theme pull --theme 987654321 --path ./theme-new

3：GitHubでアップデート用ブランチを作成

git checkout -b dev
cp -r ./theme-new/* .
git add .
git commit -m "テーマv2.0にアップデート"

4：差分（競合）を確認・解決

ここが最も重要な作業です。

# mainブランチとマージ
git merge main

競合が発生した場合は、以下のように表示されます。

<<<<<<< HEAD
（新テーマのコード）
=======
（自分のカスタムコード）
>>>>>>> main

競合箇所を1つずつ確認し、新テーマのコードに自分のカスタム変更を手動で組み込みます。カスタム変更箇所に事前にコメントを入れておくと、この作業がスムーズになります。

{%- comment -%} カスタム修正: スライド画像全体リンク化 2026-04-22 {%- endcomment -%}

5：ローカルでプレビュー確認

# ドラフトテーマにpush
shopify theme push --theme 987654321

# ローカルでプレビュー
shopify theme dev --theme 987654321

6：本番に公開

git checkout main
git merge dev
git push origin main

# CLIで公開
shopify theme publish --theme 987654321

GitHub Actionsで自動化する（上級者向け）

pushからドラフト反映まで自動化することも可能です。

# .github/workflows/deploy.yml
on:
  push:
    branches: [main]
jobs:
  deploy:
    steps:
      - shopify theme push  # Shopifyのドラフトテーマに自動反映

⚠️ 本番への自動公開はリスクがあるため、最終的な公開は手動で行うことを推奨します。

まとめ：全体の流れ

管理画面：新バージョンをドラフトに追加
        ↓
CLI：新バージョンをローカルにpull
        ↓
GitHub：updateブランチ作成 → mainとマージ
        ↓
競合解決（カスタム変更を手動で組み込む）
        ↓
CLI：ドラフトテーマにpushしてプレビュー確認
        ↓
CLI or 管理画面：本番公開

カスタム変更は最小限・コメントありにしておくことで、アップデート時の作業が大幅に楽になります。ぜひ参考にしてみてください。