Shopify×AIコーディングで管理画面設定まで進める｜Shopify CLIとAdmin GraphQL APIの実践

Shopifyのサイトリニューアルでは、テーマを実装するだけでなく、管理画面でページを作成し、URLやメニューを設定する作業も発生します。

ページ数が増えると、ページ名やURLを一件ずつ入力し、メニューへリンクを登録するだけでも時間がかかります。テーマ側で決めた情報を管理画面へ繰り返し入力するため、入力間違いや設定漏れも起きやすくなります。

そこで、管理画面作業を減らす方法として、CLI実行権限を持つAIコーディングエージェントとShopify CLIを組み合わせました。AIにテーマコードを書かせるだけでなく、ページの作成とメニューの更新まで実行させています。

テーマ実装とストア設定に同じページ情報を使うことで、管理画面への再入力を減らせました。実際の作業では、リンク間違いや設定漏れも発生していません。

この記事では、AIコーディングエージェントとShopify CLIを使って、テーマ開発と管理画面設定を連携した方法と、その効果を紹介します。

先に結論：AIとAPIでテーマ開発と管理画面設定をつないだ

ページ構成とURL設計は人が先に決め、AIコーディングエージェントが同じページ定義からテーマファイルとGraphQLの入力を作成しました。そのうえで、Shopify CLIからAdmin GraphQL APIを実行し、ストア側の設定へ反映しています。

実施した内容は、次の4点です。

1. pageCreateで複数のページを作成
2. menusで既存メニューを取得し、menuUpdateでナビゲーションを更新
3. 各ページに対応するJSONテンプレートを作成
4. メタオブジェクトとメタフィールドをLiquidから動的に参照

ポイントは、ページタイトル、ハンドル、テンプレートサフィックス、メニュー項目のリンク先を一つのページ定義で管理したことです。AIはその定義を使い、テーマファイルとGraphQLの入力を作成しました。

これにより、管理画面を何度も行き来して同じ情報を入力する作業が減り、ローカルの実装とストア上の設定を合わせやすくなりました。

使用したShopifyの構成と開発環境

対象となった環境は次のとおりです。

Shopify公式ドキュメントでは、Online Store 2.0の多くの機能がJSONテンプレートを利用し、各ページでセクションを追加・削除・並べ替えられる仕組みになっています。実装では、ページごとのJSONテンプレートと管理画面上のページを対応させる構成を採用しました。

参考：Online Store 2.0｜Shopify公式ドキュメント

ページが増えるほど管理画面設定に時間がかかった

Shopifyでは、ローカルのテーマ開発とストア管理画面の設定が分かれています。LiquidやJSONテンプレートを実装しても、管理画面上のページやナビゲーションメニューは自動では作成されません。

管理画面側では、ページごとに次の作業が必要です。

• Shopify管理画面でページを作成する
• ページタイトルとハンドルを入力する
• ページへJSONテンプレートを割り当てる
• ナビゲーションメニューへリンクを追加する
• メタオブジェクトやメタフィールドへ表示データを登録する

一方、テーマ側ではページ用のセクションとJSONテンプレートを実装し、Liquidからメタオブジェクトやメタフィールドを参照します。管理画面側の設定とテーマ側の実装を照合しながら進める必要がありました。

たとえば、ローカルでpage.service-a.jsonを作成しても、管理画面側のページハンドルがservice-bになっていれば、想定したURLとテンプレートの関係は崩れます。メニューのURLを手入力すれば、タイプミスや古いハンドルも残ります。

ページ数が増えるほど、管理画面での入力と、テーマコードとの照合作業に時間がかかります。

そこで、ページタイトル、ハンドル、テンプレートサフィックス、メニュー項目を構造化し、その情報をもとにAIがテーマファイルとGraphQLの入力を組み立てる形にしました。

Shopify CLIからAdmin GraphQL APIを実行した

2026年8月時点で、Shopify CLIのstore executeコマンドは、認証済みのストアに対してAdmin GraphQL APIのクエリとミューテーションを実行できます。公式仕様では、先にshopify store authで認証し、ストアを書き換える場合は--allow-mutationsを明示します。

参考：store execute｜Shopify CLI公式ドキュメント

Admin GraphQL APIの実行では、AIコーディングエージェントがGraphQLと変数を組み立て、Shopify CLIから実行しました。コマンドの形を単純化すると、次のようになります。

shopify store execute \
  --store your-store.myshopify.com \
  --query-file ./operations/page-create.graphql \
  --variable-file ./operations/page.json \
  --allow-mutations

認証情報や実際のストアドメインはコマンドや原稿へ直接書かず、AIには対象ストアと実行する操作を限定して渡します。更新前に現在のデータを取得し、更新後にレスポンスとストア上の状態を再取得する流れにすると、AIが何を変更したのかを確認できます。

pageCreateでページをまとめて作成した

最初に、各ページのタイトル、ハンドル、対応するカスタムテンプレートのサフィックスを決めました。その一覧をもとに、AIがpageCreateミューテーションを実行し、Shopify上へページを作成しています。

pageCreateは、Shopifyのページ（Page）を作成するAdmin GraphQL APIです。タイトルとハンドルに加え、本文、公開状態、カスタムテンプレートのサフィックスも入力できます。

参考：pageCreate｜Shopify Admin GraphQL API

構造を単純化したGraphQLは次のようになります。

mutation CreatePage($page: PageCreateInput!) {
  pageCreate(page: $page) {
    page {
      id
      title
      handle
      templateSuffix
    }
    userErrors {
      code
      field
      message
    }
  }
}

複数ページ分の入力データを用意し、各ページに対してpageCreateを実行しました。ここでいう「まとめて作成」は、AIがページ一覧から複数回の作成処理を進めたという意味で、ShopifyのBulk Operationsを使った一括ミューテーションではありません。

APIのレスポンスからページID、タイトル、ハンドル、userErrorsを確認できるため、管理画面を開いて一件ずつ登録するよりも、作成結果を構造化されたデータとして追いやすくなりました。

menusで現在の構造を取得し、menuUpdateで更新した

ページを作成したあと、menusクエリでストアに登録されているナビゲーションメニューを取得しました。その結果をもとに、menuUpdateでリンク構造を更新しています。

menusではメニューのID、ハンドル、タイトル、階層化されたメニュー項目を取得できます。menuUpdateは、メニューのタイトルと項目構造を更新するミューテーションです。

参考：menus｜Shopify Admin GraphQL API / menuUpdate｜Shopify Admin GraphQL API

メニューの更新では、いきなり新しい構造を書き込まず、最初に現在のメニューを読み取りました。そのうえで、pageCreateの実行後に返された情報と、コード側で決めたリンク構造を組み合わせて更新しています。

この順番にしたことで、既存項目を確認したうえで、追加・変更する内容を整理できました。ページハンドルとメニューURLを別々に手入力していないため、コード側で定義したハンドルとナビゲーションのリンク先が直接一致します。

JSONテンプレートも同じページ定義から作成した

ShopifyのJSONテンプレートは、表示するセクションと、その設定値を保持するデータファイルです。テーマエディタでは、JSONテンプレートに定義されたセクションをもとに並べ替えや設定変更を行えます。

参考：JSON templates｜Shopify公式ドキュメント

ページの一覧と対応させながら、各ページ用のJSONテンプレートも自動作成しました。テンプレート内には、ページの初期表示に必要なセクションとブロック、設定値を入れています。

作業の流れは次のとおりです。

1. ページタイトルとハンドルを決める
2. 対応するテンプレートサフィックスを決める
3. AIがテンプレートファイルを作成する
4. pageCreateでページを作成する
5. ページとテンプレートの対応を確認する
6. 作成したページ情報を使ってメニューを更新する

テーマ側と管理画面側で同じページ定義を使うため、「テンプレートはあるがページがない」「ページはあるがメニューから到達できない」といった状態を防ぎやすくなりました。

メタオブジェクトとメタフィールドをLiquidから動的に参照した

ページに表示するデータをテンプレート内へ直接書くと、内容を変更するたびにテーマコードの修正が必要になります。そこで、データをメタオブジェクトとメタフィールドで管理し、Liquid側で対象データを動的に解決して表示するロジックを実装しました。

メタフィールドは、商品やページなどのShopifyリソースへ追加できるカスタムフィールドです。複数の関連フィールドを持つ独立したデータは、メタオブジェクトとして定義できます。Liquidでは、メタオブジェクトのタイプとハンドルを使って対象エントリーを参照できます。

参考：About metafields｜Shopify公式ドキュメント / metaobject Liquid object｜Shopify公式ドキュメント

Liquid側では、表示対象となるメタオブジェクトのエントリーやメタフィールド値を自動解決する形にしました。ページごとに同じマークアップを複製せず、共通のセクションから該当データを表示できます。

メタオブジェクト連携では、メタオブジェクトやメタフィールド自体の作成ではなく、登録済みのデータをテーマ側で動的に参照し、ページごとの表示へ連動させる部分を検証しました。

実際に感じた3つの効果

管理画面を行き来する時間が減った

ページを一件ずつ作成し、ページタイトルとハンドルを確認しながらメニューへURLを貼り付ける作業が不要になりました。

AIコーディングエージェントがローカルのページ定義を読み取り、そのままGraphQLの入力へ変換するため、テーマを編集する画面とShopify管理画面を何度も往復せずに進められました。

URLとメニューリンクの入力間違いを防げた

コード側で定義したページハンドルを、pageCreateの入力とメニュー項目のリンク先に再利用しました。

人が同じ文字列を複数の場所へ入力する工程を減らしたことで、実際の作業ではリンク間違いや設定漏れが起きませんでした。ページ数が増えるほど、この一致を機械的に保てる効果は大きいと感じています。

AIの役割がコード生成から実行へ広がった

これまでのAIコーディングは、Liquid、JavaScript、CSS、JSONテンプレートなどのファイル生成が中心でした。AIにAdmin GraphQL APIも実行させることで、Shopify側の初期データと設定まで進めています。

AIが作ったコードを人が管理画面へ転記するのではなく、決めた構造をAPI経由でストアへ反映する。ここまでを一つの作業として扱えることに、実務上の価値がありました。

記事制作でも、AIエージェントからCMSの取得・更新までつなげる運用を試しています。詳しくは「AIエージェントとCMSを連携した記事運用」で紹介しています。

安定して進めるために決めておきたいこと

AIからShopifyを操作できるようにする場合、実装方法より先に、変更範囲と確認手順を決めておく必要があります。

テーマ開発と管理画面設定を連携する場合は、次の順番にすると変更内容を追いやすくなります。

1. ページタイトル、ハンドル、テンプレートサフィックスを先に一覧化する
2. 読み取りクエリで現在のストア状態を取得する
3. AIが生成したGraphQLと入力値を確認する
4. 対象を限定してミューテーションを実行する
5. userErrorsと返却されたID・ハンドルを確認する
6. 更新後のデータを再取得する
7. テーマプレビューでページ表示とリンクを確認する

shopify store executeはミューテーションが初期状態で無効になっており、書き込みには--allow-mutationsが必要です。このオプションを使い、読み取りと書き込みを分けて扱います。

また、AIへ渡す権限は、ページやナビゲーションメニューの操作に必要なスコープへ限定します。ストアドメイン、アクセストークン、顧客情報などを、記事、リポジトリ、AIへの不要な入力へ含めないことも前提です。

よくある質問

Shopify CLIだけで管理画面データを更新できますか？

Shopify CLIのstore executeからAdmin GraphQL APIのクエリとミューテーションを実行できます。事前にshopify store authで対象ストアを認証し、必要なアクセススコープを設定します。書き込み時は--allow-mutationsが必要です。

theme pushとstore executeは何が違いますか？

shopify theme pushは、Liquid、JSON、CSS、JavaScriptなどのテーマファイルをストアへ反映するコマンドです。shopify store executeはAdmin GraphQL APIを実行し、ページやナビゲーションメニューなどのストアデータを取得・更新します。テーマ開発とストア設定を一つの流れで進める場合は、役割を分けて使います。

参考：theme push｜Shopify CLI公式ドキュメント

AIにShopifyの更新を任せても問題ありませんか？

AIが実行する対象、アクセススコープ、確認手順を決めたうえで使います。特に、現在データの取得、変更内容の確認、userErrorsの確認、更新後の再取得を一つの流れにします。ページ削除、商品や顧客データの変更、公開テーマへの反映など、影響の大きい操作は別の承認工程に分ける設計が必要です。

ページ数が少なくてもAPI連携する意味はありますか？

数ページだけを一度作る場合は、管理画面での手入力の方が早いこともあります。ページ数が多い、同じ構成を複数ストアへ展開する、ページハンドルとメニューリンクを厳密にそろえたい、設定を再実行できる形で残したい場合は、API連携の効果が大きくなります。

まとめ

AIコーディングエージェントとShopify CLIを使い、テーマ開発とストア管理画面の設定を一つの流れで進めました。

具体的には、pageCreateによるページの作成、menusとmenuUpdateによるナビゲーション更新、ページごとのJSONテンプレート作成、メタオブジェクト・メタフィールドのLiquid連携を行っています。

コード側で定義したページハンドルを、pageCreateの入力とメニュー項目のリンク先へ直接つなげたことで、管理画面での再入力が減り、実際の作業ではリンク間違いや設定漏れも起きませんでした。

AIコーディングの効果は、コードを早く書くことだけではありません。CLIとAPIを安全に実行できる環境を用意すれば、テーマ実装とプラットフォーム側の設定を一つの流れとして進められます。