AI×ECブログ

ShopifyをCodex / Claude Codeから触れるようにする設定方法

公開日
ShopifyをCodex / Claude Codeから触れるようにする設定方法のアイキャッチ

ShopifyをCodexやClaude Codeから触れるようにすると、テーマ修正、Liquidの調整、商品情報の確認、Admin APIの検証、公開前チェックの一部をAIエージェントと一緒に進めやすくなります。

ただし、最初に分けて考えるべきことがあります。Shopifyを触る、とひとことで言っても、実際には次の2つは別物です。

  • Shopifyテーマをローカルで編集し、プレビューや未公開テーマへの反映を行う
  • Admin APIを使って、商品、コレクション、注文、メタフィールドなどのデータを読む、または更新する

この記事では、EC運用者や開発担当者がまず使いやすい順に、Shopify CLI、Admin API、Codex、Claude Codeの設定を整理します。目標は、AIエージェントに何でも自由に操作させることではありません。人間が確認すべき公開操作や権限を残したまま、日々の修正と確認を軽くすることです。

このページで確認できること:

  • Codex / Claude CodeからShopifyテーマを扱う基本構成
  • GitHubでShopify用リポジトリを作り、cloneしてAIエージェントで開く流れ
  • Shopify CLIでテーマ編集を行うための認証方法
  • Admin APIをAIエージェントから安全に使うためのトークン設計
  • CodexとClaude Codeで気をつける承認、ネットワーク、環境変数の考え方
  • 公開操作を任せる前に決めておきたい安全ルール

結論

ShopifyをCodex / Claude Codeから触れるようにするなら、最初は次の構成が扱いやすいです。

目的 使うもの AIエージェントに任せやすい作業 人間確認を残す作業
作業場所の準備 GitHub / Git リポジトリ作成、clone、差分管理、baseline commit private/public判断、ブランチ保護
テーマ修正 Shopify CLI Liquid、CSS、JSONテンプレートの修正、theme check、プレビュー確認 本番テーマへのpublish
ストアデータ確認 Admin API 商品、コレクション、メタフィールドなどの読み取り、GraphQLクエリ作成 書き込み系mutation、権限追加
作業制御 Codex / Claude Code コマンド実行、ファイル編集、差分説明、検証手順の実行 秘密情報投入、外部書き込み、公開判断

最初からMCPサーバーを作る必要はありません。テーマ作業なら、まずShopify CLIをAIエージェントが実行できる状態にするだけで十分です。Admin APIを使う場合は、読み取り用と書き込み用のトークンを分け、最小権限で始めるのが安全です。

Shopifyテーマ用GitHubリポジトリからCodex / Claude Code、Shopify CLI、Admin API、人間承認までの全体構成
Shopifyテーマ用GitHubリポジトリからCodex / Claude Code、Shopify CLI、Admin API、人間承認までの全体構成

事前に決めること

設定に入る前に、AIエージェントに触らせたい範囲を決めます。

決めること 推奨
対象ストア 本番ストアではなく、まず開発ストアか未公開テーマで試す
テーマ操作 theme dev、theme pull、theme pushまで。theme publishは人間承認にする
API操作 最初は読み取り権限だけにする
トークン管理 リポジトリに入れず、環境変数かローカルの秘密情報管理に置く
AIへの指示 変更前に作業計画、変更後に差分と確認コマンドを出させる
ログ どのコマンドを実行したか、どのテーマやAPIに接続したかを残す

特に重要なのは、本番公開に直結する操作を自動化しすぎないことです。AIエージェントは修正案を作るのは得意ですが、公開可否の判断は売上、在庫、キャンペーン、ブランド表現にも関わります。公開操作は、人間の確認を挟む前提にしておく方が運用しやすくなります。

手順1. GitHubでShopify用のリポジトリを作る

AIエージェントにShopifyテーマを触らせる前に、まずGitHub上に作業用リポジトリを作ります。理由はシンプルです。AIが編集した差分をGitで確認できるようにするためです。

Shopifyテーマは、Liquid、JSON template、CSS、JavaScript、画像、localeなど複数のファイルが関係します。リポジトリなしでAIに触らせると、どこが変わったのか、どこまで戻せるのかが見えにくくなります。

最初はprivate repositoryがおすすめです。テーマコードには、ブランド固有の導線、キャンペーン、計測タグ、アプリ連携、社内向けコメントが含まれることがあります。公開してよいと確認できるまでは、privateにしておく方が安全です。

GitHub CLIを使う場合は、次のように作れます。

gh auth status
gh repo create your-org/shopify-theme --private --add-readme --clone
cd shopify-theme

個人アカウントで作る場合は、your-orgを自分のGitHubユーザー名に置き換えます。GitHub CLIを使わない場合は、GitHubの画面でprivate repositoryを作り、表示されたURLをcloneします。

git clone git@github.com:your-org/shopify-theme.git
cd shopify-theme

既にローカルにShopifyテーマがある場合は、そのディレクトリからGitHub repositoryを作ってpushする方法もあります。

cd path/to/existing-shopify-theme
git init
git add .
git commit -m "Initial Shopify theme baseline"
gh repo create your-org/shopify-theme --private --source . --push

この時点では、まだAIに編集させません。まずは「人間が確認した初期状態」をbaseline commitとして残します。

手順2. cloneしたリポジトリをCodex / Claude Codeで開く

次に、cloneしたShopifyテーマリポジトリをCodexやClaude Codeで開きます。

CLIでCodexを使う場合は、テーマリポジトリに移動してCodexを起動します。

cd shopify-theme
codex

CodexアプリやIDE連携を使う場合は、このshopify-themeフォルダをプロジェクトとして開きます。大事なのは、Codexの作業ディレクトリがShopifyテーマのルートになっていることです。

Claude Codeも同じです。テーマリポジトリに移動して起動します。

cd shopify-theme
claude

開いた直後は、まだファイル編集やShopifyへのpushをさせません。AIエージェントが最初に見るべきことは、コードの修正ではなく、作業場所の確認です。正しいリポジトリ、正しいブランチ、assets、blocks、config、layout、locales、sections、snippets、templatesなどのテーマ構造を確認してから、Shopify CLIやAdmin APIの設定に進みます。

手順3. Shopify CLIを入れる

テーマを触る場合、最初に入れるのはShopify CLIです。Shopify CLIは、テーマやアプリ、カスタムストアフロントの開発に使う公式のコマンドラインツールです。

前提として、Shopify CLIの公式ドキュメントではNode.js 22.12以上、npm / Yarn / pnpmなどのNode.jsパッケージマネージャー、Git 2.28.0以上が必要です。手元の環境でバージョンを確認します。

node -v
git --version

Shopify CLIをインストールします。npmを使う場合は次のように入れます。

npm install -g @shopify/cli@latest

pnpmを使う場合は次の形です。

pnpm install -g @shopify/cli@latest

インストール後、CLIが使えるか確認します。

shopify version
shopify help

ここまで通れば、CodexやClaude CodeからShopify CLIを呼び出す土台ができます。

手順4. テーマ作業用の認証を用意する

Shopify CLIでテーマを操作する認証方法は、主に3つあります。

方法 向いている場面 注意点
Shopifyアカウントでログイン 自社ストアや管理権限のあるストアで作業する 権限が広くなりやすい
Theme Access password クライアントや外部パートナーとしてテーマだけ触る コマンドごとにpassword指定が必要になる場合がある
Custom app access token CIや自動化、権限を分けたい場合 read_themesとwrite_themesなど必要scopeを設計する

Shopify CLIでは、ストアアクセスが必要なコマンドを初めて実行するとログインを求められます。最初に対象ストアを明示しておくと、以後の操作対象が分かりやすくなります。

既存テーマをローカルに取得する場合は、theme pullを使います。初回実行時にログインが必要なら、ブラウザで認証します。

shopify theme pull --store your-store-name

どのストアに接続しているかは、次のコマンドで確認できます。

shopify theme info

theme pullで対象テーマを選ぶと、Shopify上のテーマファイルがローカルに入ります。公式のテーマ構造では、assets、blocks、config、layout、locales、sections、snippets、templatesなどが使われます。取得できたら、まず初期状態をcommitします。

git status
git add .
git commit -m "Pull initial Shopify theme"
git push

このcommitがあると、CodexやClaude Codeが変更した後でも、差分を見れば何が変わったか判断できます。

リポジトリには、秘密情報を入れないようにします。少なくとも、環境変数ファイルやローカル設定ファイルはgitignoreに入れます。

.env
.env.local
.env.*.local

ShopifyのTheme Access password、Admin API access token、private appのcredentialなどは、GitHubにcommitしません。

ローカルで確認する場合は、theme devを使います。Shopify CLIは開発テーマを作り、手元の変更をプレビューできます。

shopify theme dev

変更をストア側に共有する場合は、まず未公開テーマへのpushを基本にします。

shopify theme push --unpublished

本番公開にあたるtheme publishは、AIエージェントに自動実行させない方が安全です。実行する場合も、必ず人間が差分、対象テーマ、公開タイミングを確認してからにします。

手順5. Admin API用のトークンを用意する

商品情報、コレクション、メタフィールド、注文などをAIエージェントから確認したい場合は、Admin APIを使います。

ShopifyのGraphQL Admin APIでは、リクエストにShopify access tokenが必要です。APIを直接呼ぶ場合は、X-Shopify-Access-Tokenヘッダーにトークンを入れます。

まずは読み取り専用の用途から始めるのがおすすめです。たとえば商品情報の確認ならread_products、テーマ操作ならread_themesやwrite_themesのように、目的に応じてscopeを絞ります。

重要なのは、ひとつの強いトークンで全部やらないことです。

トークン 使い道 権限
読み取り用 商品、コレクション、メタフィールドの確認 read系scopeのみ
テーマ作業用 テーマの取得、プレビュー、未公開テーマ反映 read_themes、必要に応じてwrite_themes
書き込み検証用 商品やメタフィールドの更新検証 必要なwrite系scopeのみ。常用しない

GraphQL Admin APIの疎通確認は、まずshop名を読むだけのクエリにします。

curl -X POST \
  https://your-store.myshopify.com/admin/api/2026-07/graphql.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: $SHOPIFY_ADMIN_API_TOKEN" \
  -d '{"query":"query { shop { name } }"}'

この確認が通れば、CodexやClaude CodeはGraphQLクエリの作成、実行、結果の要約を手伝えます。ただし、mutationを実行する場合は、実行前に必ず対象リソース、変更内容、戻し方を確認します。

手順6. CodexからShopifyを触れるようにする

CodexからShopifyを触る方法は、大きく2つです。

  • Shopify CLIをシェルコマンドとして実行する
  • MCPサーバーや独自スクリプトを経由して、Shopify操作をツール化する

最初はShopify CLIをシェルから実行する形で十分です。テーマリポジトリをCodexで開き、CodexがShopify CLIを実行できる状態にします。

Codex側で確認したいことは次の4つです。

確認項目 見ること
作業ディレクトリ Shopifyテーマのassets、blocks、config、layout、locales、sections、snippets、templatesなどがある場所か
認証 shopify theme infoで対象ストアが確認できるか
ネットワーク Shopify CLIやAdmin APIに接続する作業ではネットワーク許可が必要か
承認 theme push、theme publish、API書き込みなどを自動実行させない設計になっているか

Codexは、ローカル実行時にサンドボックスと承認ポリシーで操作範囲を制御します。標準的には、作業ディレクトリ内のファイル編集は進められますが、ネットワークや外部書き込みを伴う操作では承認が必要になります。

Shopify CLIをCodexに実行させるときは、最初に読み取り系の確認から始めます。

shopify version
shopify theme info

次に、ローカルテーマの検証やプレビューを行います。

shopify theme check
shopify theme dev

公開前の確認まで進めたい場合も、push先は未公開テーマに限定します。theme pushやtheme publishを実行する場合は、対象ストア、対象テーマ、差分、戻し方を人間が確認してからにします。

手順7. Claude CodeからShopifyを触れるようにする

Claude Codeでも、基本は同じです。テーマリポジトリを開き、Shopify CLIと必要な環境変数を使える状態にします。

Claude CodeからShopifyを触る場合も、最初はMCPを必須にしなくて構いません。テーマ編集やCLI実行であれば、Claude Codeがシェルコマンドを実行できる状態で、Shopify CLIを呼び出せれば十分です。

一方で、Shopify操作を特定の安全なツールに閉じ込めたい場合は、MCPサーバーを使う選択肢があります。Claude CodeはMCPに対応しており、ローカルのstdioサーバー、リモートHTTPサーバー、SSE、WebSocketなどを接続できます。SSEはClaude Codeドキュメント上では非推奨なので、新しく作るならHTTPかstdioを優先します。

たとえば、社内でShopify Admin API用の小さな読み取り専用MCPサーバーを用意する場合、Claude Code側ではMCPサーバーを追加して使います。

claude mcp add --transport stdio shopify-readonly -- node path/to/server.js

ただし、最初からMCPサーバーを作るより、まずは次の順番がおすすめです。

  1. Shopify CLIをClaude Codeから実行できるようにする
  2. theme info、theme check、theme devまで確認する
  3. 読み取り専用のAdmin APIクエリを試す
  4. よく使う読み取り操作だけスクリプト化する
  5. 必要になったらMCPサーバー化する

この順番にすると、最初の設定が軽く、かつ権限の広げすぎを避けられます。

手順8. 環境変数と秘密情報を分ける

Shopifyのトークンやパスワードは、リポジトリに入れません。CodexやClaude Codeから使う場合も、環境変数として渡すか、ローカルの秘密情報管理に置きます。

ローカルで試す場合は、次のように環境変数を使います。

export SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
export SHOPIFY_ADMIN_API_TOKEN=shpat_xxxxxxxxxxxxxxxxx

Admin APIを呼ぶスクリプト側では、環境変数から読むようにします。

curl -X POST \
  https://$SHOPIFY_STORE_DOMAIN/admin/api/2026-07/graphql.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: $SHOPIFY_ADMIN_API_TOKEN" \
  -d '{"query":"query { shop { name } }"}'

リポジトリに.env.exampleを置く場合は、値ではなく必要なキー名だけを載せます。

SHOPIFY_STORE_DOMAIN=
SHOPIFY_ADMIN_API_TOKEN=
SHOPIFY_THEME_ACCESS_PASSWORD=

AIエージェントに秘密情報を読ませる場合は、必要な作業の範囲だけにします。読み取り確認だけなら読み取り用トークン、テーマプレビューだけならテーマ作業用の権限、というように分けます。

安全に運用するためのルール

ShopifyをAIエージェントから触れるようにしたら、チーム内で次のルールを決めておくと事故が起きにくくなります。

ルール 理由
theme publishは人間承認なしで実行しない 本番テーマの即時切り替えになるため
APIのmutationは実行前に内容を文章で確認する 商品、価格、在庫、メタフィールドに影響するため
本番テーマではなく未公開テーマで確認する 表示崩れやキャンペーン影響を避けるため
トークンは用途別に分ける 漏洩時や誤操作時の影響範囲を抑えるため
作業前に対象ストアを確認する 別ストアへの誤反映を防ぐため
変更後にtheme checkと差分確認を行う LiquidやJSONの単純ミスを減らすため

動作確認チェックリスト

設定が終わったら、次の順番で確認します。

確認 コマンドまたは操作 OKの目安
GitHub repository gh repo view、またはGitHub画面 private repositoryが作られている
clone git remote -v 正しいGitHub repositoryを向いている
baseline commit git log Shopifyテーマ取得直後のcommitがある
Shopify CLI shopify version バージョンが表示される
対象ストア shopify theme info 正しいストアが表示される
テーマ構造 assets、blocks、config、layout、locales、sections、snippets、templatesを確認 Shopifyテーマとして認識できる
ローカル検証 shopify theme check 重大なエラーがない
プレビュー shopify theme dev ローカルプレビューが開ける
Admin API shop nameを読むGraphQLクエリ shop名が返る
AI操作 Codex / Claude Codeで読み取り系コマンドを実行 意図しない書き込みがない

最初の成功条件は、本番反映ではありません。AIエージェントが、正しいストア、正しいテーマ、正しい権限で、読み取りとローカル検証までできることです。

FAQ

Shopifyを触るなら、CodexやClaude CodeにMCPは必須ですか？

必須ではありません。テーマ編集なら、Shopify CLIをAIエージェントが実行できる状態にするだけで始められます。MCPは、Shopify操作を専用ツールとして切り出したい、読み取り操作を標準化したい、複数人で同じ操作を使いたい段階で検討するとよいです。

本番テーマに直接pushしてもいいですか？

避けた方が安全です。まずtheme devや未公開テーマで確認し、差分、表示、スマホ、主要ページの表示を確認してから本番反映します。theme publishは、AIエージェントに自動実行させず、人間の承認を残すのがおすすめです。

Admin APIの書き込みもAIに任せられますか？

技術的にはできますが、最初は読み取りから始めるべきです。商品、価格、在庫、メタフィールド、注文などに関わるmutationは影響が大きいため、対象、変更内容、戻し方、実行タイミングを人間が確認してからにします。

まとめ

ShopifyをCodex / Claude Codeから触れるようにする設定は、最初から大きな自動化を作る必要はありません。

まずはShopify CLIでテーマを扱える状態にし、AIエージェントには読み取り、ファイル修正、theme check、プレビュー確認までを任せます。Admin APIを使う場合は、読み取り用トークンから始め、書き込み権限は用途ごとに分けます。

大事なのは、AIに作業を渡す範囲と、人間が承認する範囲を分けることです。そこを決めておけば、Shopify運用の細かな確認、テーマ修正、API調査を、CodexやClaude Codeとかなりスムーズに進められます。

参考にした公式ドキュメント

ブログに戻る