Xポストログ

2026年6月6日

完全自律型AIエージェントとして話題のManus でも同様に Shopify ストアを試してみました。（こちらも公式の連携機能が提供されています）

構造は Lovable と同じで、フロントエンドは *.manus.space に公開され、チェックアウトは Shopify ネイティブに遷移します。Manus の場合はヒーロー画像・商品画像まで自律的に生成してから実装を進めるのが特徴的でした。LovableよりもさらにShopifyとの統合アシストが充実している感じです。

AIエージェントが Shopify Storefront API を使ってヘッドレスストアを丸ごと組み上げる流れが、複数のツールで定番になってきている印象です。

#Shopify

2026年6月5日

チャットで指示するだけで Web アプリや EC サイトのフロントエンドを生成・公開できる AI ビルダーとして有名なLovable で Shopify ストアを試作してみました。
https://lovable.dev/shopify
（公式に連携機能がリリースされています）

Shopify のテーマファイルが変更されるのではなく、Lovable が Storefront API を使って独自のフロントエンドを *.lovable.app として生成・公開し、チェックアウト画面から先をShopify ネイティブ（*.myshopify.com）に遷移させる構成になっていました。

テーマを触らずにヘッドレスコマースをチャットで組み立てるという位置付けで、デザイン自由度の高い新規 EC を作ることができるのですが、アプリ（レビューやアップセル等）を実装することはできず、料金もShopifyとLovable両方に払い続ける必要があるという点は要注意ですね。

#Shopify

2026年6月4日

Shopify のカスタムセクション＆ブロックを Claude Code に作成させることも増えてきましたが、これまで自分が作ってきたカスタマイズコードを読み込ませているせいか、Liquid の書き方の癖や構成を学習した状態で生成してくれます。

Sidekick と比べてコードが肥大化せず、必要な機能だけに絞ったミニマムな構成になるのが使いやすいところです。Shopify AI Toolkit の shopify-liquid によるコードチェックと組み合わせることで、そのまま使えるコードが安定して出せるようになってきました。

#Shopify

2026年6月3日

Shopifyのテーマ「Horizon」なんですが、どうしてもブロックごとにスタイルを細かく設定したくなってしまい、すべてのブロックにカスタムCSS（PC/SP別）の入力欄を独自追加するようにしてみました。

テーマの公式アップデートを取り込む際に気を付ける必要がありますが、「このブロックだけ余白を変えたい」がエディタ内で完結するようになり、毎回コード編集を開いて修正する手間も省けるようになりました。

#Shopify

2026年6月2日

【X記事】chrome-devtools-mcpを使ってモバイル実機に近い形でAIブラウザテスト

AIにブラウザを操作させてShopifyストアをモバイル確認するとき、Chrome拡張でウィンドウ幅を390pxにリサイズしていました。chrome-devtools-mcpに切り替えてから、User…

https://x.com/i/article/2060647779945586688

2026年6月1日

【X記事】Shopifyテーマ改修後のAIを使ったブラウザ確認のポイント

Shopifyのテーマを改修した後、「どこか壊れていないか」の確認をAIに任せるステップが日常のワークフローに定着してきました。ClaudeやCodexなど主要なAIツールはChrome拡張を通じてブラウザを直接操作できるので、…

https://x.com/i/article/2060902312881889280

2026年5月31日

【Shopify TIPS：Agentic Commerce】
ChatGPT 経由の分析レポートですが、「エージェント型の参照元チャネル」フィルターの方を使うとセッション単位の行動データが確認できます。

直帰率・カート追加率・コンバージョン率などが見えるので、通常のチャネル分析と同様に ChatGPT 経由の訪問者状況を把握することができます。
※画像の数値はサンプル値で実際のものではありません。

スレッドにレポート表示用のURLを貼ってあります。

#Shopify #AgenticCommerce

スレッド

ChatGPT経由の訪問レポートを表示するURL
（/store/の後ろにある{store-handle} 部分を確認したいストアのものに変えてください）

https://admin.shopify.com/store/{store-handle}/analytics/reports/explore?ql=FROM+sessions%0A++SHOW+sessions%2C+bounce_rate%2C+pageviews%2C+added_to_cart_rate%2C%0A++++reached_checkout_rate%2C+completed_checkout_rate%2C+conversion_rate%0A++WHERE+agentic_referring_channel+%3D+%27ChatGPT%27%0A++TIMESERIES+day+WITH+TOTALS%0A++SINCE+startOfDay%28-90d%29+UNTIL+today%0A++ORDER+BY+day+ASC%0AVISUALIZE+sessions

2026年5月30日

【Shopify TIPS：Agentic Commerce】
Shopify の Agentic Storefronts 画面がまだ有効になっていないストアでも、ChatGPT 経由の売上を確認できる分析レポートのリンクはすでに有効になっています。（どのAIエージェント経由で売上が発生しているか確認できる「エージェント型の販売チャネル」というディメンションが使えるようになっています）

スレッドの URLは {store-handle} 部分を確認したいストアのものに変えるだけですぐに使えるものになります。

#Shopify #AgenticCommerce

スレッド

ChatGPT経由の売上レポートを表示（/store/の後ろにある{store-handle} 部分を確認したいストアのものに変えてください）

https://admin.shopify.com/store/{store-handle}/analytics/reports/explore?ql=FROM+sales%0A++SHOW+total_sales%0A++WHERE+agentic_sales_channel+%3D+%27ChatGPT%27%0A++++OR+agentic_referring_channel+%3D+%27ChatGPT%27%0A++TIMESERIES+day+WITH+TOTALS%2C+ANY_CLICK_ATTRIBUTION%2C+PERCENT_CHANGE%0A++SINCE+startOfDay%28-30d%29+UNTIL+today%0A++COMPARE+TO+previous_period%0AVISUALIZE+total_sales__any_click+TYPE+line

2026年5月29日

Shopify テーマエディターで最近、商品プレビューの切り替え時に検索フォームが表示されないことがあります。リストから一度選ばないと検索欄が出てこない状態です。

ちなみに目的の商品に直接飛びたいときは、エディターの URL 末尾の previewPath を `/products/商品のhandle` に書き換えると検索を使わずに表示できます。

#Shopify

2026年5月28日

【Shopify TIPS】
Horizon の商品ページに、その商品が属するコレクションへのリンクをピル形式で表示する実装例を公開しました。

カスタム Liquid ブロックにコードを貼るだけで設置できます。「all」「frontpage」は自動除外。コレクション間の回遊導線を商品ページから作りたいときに使えます。

#Shopify

スレッド

【Horizon】商品ページにその商品が属するコレクションのリンクを表示する
https://store-dojo.com/products/2026-05-28

2026年5月27日

「FlowはSidekick任せ」とポストしましたが、実はそこにClaudeをもう一枚重ねて使うこともあります。

Sidekickへの指示は日本語でざっくり伝えるだけでもある程度動きます。ただ、GID形式の変換など技術的な落とし穴を含む要件では、プロンプトの精度がかなり重要になってきます。

そこで、過去に実装したさまざまなFlowの仕様を事前に学ばせたClaudeのskillを使うことで、簡単な依頼を投げるだけでSidekick向けの具体的なプロンプトに変換できるようにもしています。

さらに、生成された.flowファイルをそのままClaudeに渡せば、トリガー・条件分岐・アクションの中身を検証し、最初に伝えた要件を満たしているかどうかまでチェックしてくれるので助かります。

#Shopify #Claude

2026年5月26日

Shopify Flowの作成についてはすっかりSidekick任せになってしまいました。

Sidekick に日本語で要件を伝えるだけで、Run Code アクションを使った実装や、会員ランクに応じたタグの追加・削除など、実用に耐えるFlowを生成してくれるので助かりますね。

#Shopify

2026年5月25日

【Shopify TIPS】
Horizon のコレクションページで、サイズや素材などテキスト系のバリアントオプションを商品カードにタグ形式で表示するブロックの実装例です。

デフォルトの「見本」（カラースウォッチ）ブロックは色表示には対応していますが、テキスト系オプションはカードに表示できません。新規ファイル1つ＋既存ファイルへの1行追記で対応できます。

#Shopify

スレッド

【Horizon】コレクションページの商品カードにバリアントオプションをタグ表示するブロック
https://store-dojo.com/products/2026-05-25

2026年5月24日

【Shopify TIPS】
Shopifyのアナリティクス（ストア分析）は標準機能でも十分高機能です。ただ、「素材別」「産地別」など独自の属性でもう一歩踏み込んで見たいときは、メタフィールドが使えます。

メタフィールドの設定項目にある「ストア分析でデータを絞り込む」オプションを有効にするだけで、標準レポートのディメンションやフィルタ条件として使えるようになります。

2026年5月23日

AIエージェント向け「Chrome DevTools for agents 1.0」の安定版がGoogleからリリースされました。

Claude Codeからも使えます。LighthouseによるアクセシビリティやSEOの評価、デバイスエミュレーション、メモリリーク検出など、ブラウザ操作に関わる品質チェックをエージェントに任せられるようになります。

試しにShopifyのストアフロント検証をさせてみましたが、Claude in chromeを使うよりもスピーディーに検証結果が返ってきたので便利ですね。
結構苦労しがちな、テーマカスタマイズやアプリのエラー検出とその対応に活躍してくれそうです。

https://forest.watch.impress.co.jp/docs/news/2110721.html

スレッド

https://developer.chrome.com/docs/devtools/agents?hl=ja

2026年5月22日

Shopify のカスタマーアカウント改善プレビューを開発環境で確認してみました。

デザインのリフレッシュということで、シングルカラムレイアウトへの変更、ナビゲーションの整理、UI 拡張機能の視認性向上といった内容で、見た目をブランドに合わせやすくなったそうです。

#Shopify

2026年5月21日

@OKAYAMA_TARO_ すいません。Shopifyが公式発表する前にあれこれ勝手に調査した内容なので、ぜひ公式のアナウンスの方をご参照ください。こちらで解説されてます。
https://t.co/Co54sJrRnx

2026年5月21日

【Shopify TIPS : Sidekickアプリ】
Shopify 管理画面の在庫ページはコレクション単位での絞り込みができません。

コレクション別に全バリアントの在庫数を一覧で確認できる、Sidekick 製の管理画面カスタムアプリを作成するためのプロンプトです。

Sidekick の「アプリを生成」に貼るだけでここで紹介しているものと同じ機能を持つアプリが自動生成されます。

#Shopify #Sidekick

スレッド

【Sidekick】コレクション別のSKU在庫数をまとめて確認できる管理画面カスタムアプリの実装例
https://store-dojo.com/products/2026-05-21

2026年5月20日

Sidekickを使うと、Shopify管理画面の中でストア運営に必要な小さな管理アプリをその場で作れます。しかも、まだない機能をゼロから追加するだけが使い道ではありません。今ある管理画面の機能を、運用に合わせてもっと使いやすくするために活用するのもおすすめです。

例えばこちらは、標準の在庫管理メニューでは絞り込みできない「特定のコレクションに絞った在庫確認」をするためのアプリです。タイムセールや新作販売など、短時間で在庫が動く場面で、対象商品だけを一覧でウォッチしたいときなどに使えます（リアルタイムでは更新してくれませんが、絞り込んだ条件のまま在庫状況を更新できるボタンもつけています）。

独自アプリを作成することで、現場の見たい粒度に合わせて管理画面を拡張していけるのが便利ですね。

#Shopify #Sidekick