Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【Shopify TIPS】
Horizon の商品ページに、その商品が属するコレクションへのリンクをピル形式で表示する実装例を公開しました。カスタム Liquid ブロックにコードを貼るだけで設置できます。「all」「frontpage」は自動除外。コレクション間の回遊導線を商品ページから作りたいときに使えます。
スレッド
【Horizon】商品ページにその商品が属するコレクションのリンクを表示する
https://store-dojo.com/products/2026-05-28 -
「FlowはSidekick任せ」とポストしましたが、実はそこにClaudeをもう一枚重ねて使うこともあります。
Sidekickへの指示は日本語でざっくり伝えるだけでもある程度動きます。ただ、GID形式の変換など技術的な落とし穴を含む要件では、プロンプトの精度がかなり重要になってきます。
そこで、過去に実装したさまざまなFlowの仕様を事前に学ばせたClaudeのskillを使うことで、簡単な依頼を投げるだけでSidekick向けの具体的なプロンプトに変換できるようにもしています。
さらに、生成された.flowファイルをそのままClaudeに渡せば、トリガー・条件分岐・アクションの中身を検証し、最初に伝えた要件を満たしているかどうかまでチェックしてくれるので助かります。
-
【Shopify TIPS】
Horizon のコレクションページで、サイズや素材などテキスト系のバリアントオプションを商品カードにタグ形式で表示するブロックの実装例です。デフォルトの「見本」（カラースウォッチ）ブロックは色表示には対応していますが、テキスト系オプションはカードに表示できません。新規ファイル1つ＋既存ファイルへの1行追記で対応できます。
スレッド
【Horizon】コレクションページの商品カードにバリアントオプションをタグ表示するブロック
https://store-dojo.com/products/2026-05-25 -
【Shopify TIPS】
Shopifyのアナリティクス（ストア分析）は標準機能でも十分高機能です。ただ、「素材別」「産地別」など独自の属性でもう一歩踏み込んで見たいときは、メタフィールドが使えます。メタフィールドの設定項目にある「ストア分析でデータを絞り込む」オプションを有効にするだけで、標準レポートのディメンションやフィルタ条件として使えるようになります。
-
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
スレッド
-
@OKAYAMA_TARO_ すいません。Shopifyが公式発表する前にあれこれ勝手に調査した内容なので、ぜひ公式のアナウンスの方をご参照ください。こちらで解説されてます。
https://t.co/Co54sJrRnx -
【Shopify TIPS : Sidekickアプリ】
Shopify 管理画面の在庫ページはコレクション単位での絞り込みができません。コレクション別に全バリアントの在庫数を一覧で確認できる、Sidekick 製の管理画面カスタムアプリを作成するためのプロンプトです。
Sidekick の「アプリを生成」に貼るだけでここで紹介しているものと同じ機能を持つアプリが自動生成されます。
スレッド
【Sidekick】コレクション別のSKU在庫数をまとめて確認できる管理画面カスタムアプリの実装例
https://store-dojo.com/products/2026-05-21 -
Sidekickを使うと、Shopify管理画面の中でストア運営に必要な小さな管理アプリをその場で作れます。しかも、まだない機能をゼロから追加するだけが使い道ではありません。今ある管理画面の機能を、運用に合わせてもっと使いやすくするために活用するのもおすすめです。
例えばこちらは、標準の在庫管理メニューでは絞り込みできない「特定のコレクションに絞った在庫確認」をするためのアプリです。タイムセールや新作販売など、短時間で在庫が動く場面で、対象商品だけを一覧でウォッチしたいときなどに使えます（リアルタイムでは更新してくれませんが、絞り込んだ条件のまま在庫状況を更新できるボタンもつけています）。
独自アプリを作成することで、現場の見たい粒度に合わせて管理画面を拡張していけるのが便利ですね。
-
2026年5月19日、Shopify が UCP CLI と Global Catalog を公開しました。
▼ 何が公開されたのか
ひとつは UCP CLI。Universal Commerce Protocol（AI エージェントが EC ストアと対話するための共通プロトコル）のリファレンス実装としてのコマンドラインツールです。
もうひとつは Global Catalog。Shopify が運営する中央集権的な商品インデックスで、全世界の Shopify マーチャントの商品を集約して、AI エージェントから横断検索できるようにしたものです。
▼ これは何のための仕組み？
これまで AI に「キーボードが欲しい」と頼むと、ウェブから情報を集めておすすめの商品を整理してくれるところまでが守備範囲でした。実際に商品を比較・カートに入れる・決済するというところまでは、ユーザー自身がブラウザに切り替えて操作する必要があります。
今回の発表で、その状況が大きく変わります。Global Catalog があることで、AI エージェントは「全世界の Shopify ストアの商品を、1 つの窓口に問い合わせるだけで横断的に検索できる」状態になりました。クロールやスクレイピングは必要ありません。価格や在庫もリアルタイムです。
続きはこちら ↓
https://x.com/sh_sakamoto/status/2056675750103937056 -
【Shopify TIPS】
テーマ「Horizon」でコレクションページのデスクトップ列数を固定する方法デフォルトではブラウザ幅に応じて自動で列数が変わりますが、これを「1〜8列の列数で固定」できるようにテーマエディタで切り替えられるようにします。
どのディスプレイサイズでも一律で特定の列数で見せたいときに便利です。Horizon 3.5.1 で検証しています。
詳細はスレッドに掲載
スレッド
【Horizon】コレクションページでデスクトップ列数を固定する方法
https://store-dojo.com/products/2026-05-18 -
@syrinx_tokyo root（/)直下に、/llms.txtファイルをShopifyが自動で配置するようにしてしまったので、ここはいじれないようです。いずれ編集できるようになるのかもしれませんが、sitemap.xmlも手を加えられないファイルなので、同様に編集不可かもしれません。
-
今回、Google公式がAI機能に向けた最適化の考え方を明確にしてくれたのは、とてもありがたいですね。
ちなみに、「Google検索のAI機能向け」の最適化と、「ECサイトの商品を検索・購入するAIエージェント向け」の最適化は、前提が少し異なります。
llms.txt は Google検索のAI機能では不要とされる一方で、Shopify ではすでに全ストアへ自動配備されています。これは検索エンジン向けというより、AIエージェントがストアの商品情報を読み取り、購買行動に関与する Agentic Commerce に備えた対応です。
このあたりを記事にまとめてみました。
→ https://x.com/sh_sakamoto/status/2055852443007893709 -
【Shopify TIPS】
テーマ「Horizon」のコレクションページに、N件目の商品の後にバナー画像を差し込む設定例です。ページャー・無限スクロールどちらにも対応。ページごとに1つ表示され、最大３つのバナー画像を指定することができ、設定枚数に応じて自動ループします。
専用のコレクションファイルを新規追加する形になるので、ベンダーファイルへの変更不要です。
スレッド
【Horizon】コレクションページの途中にバナー画像を表示する設定例
https://store-dojo.com/products/2026-05-16 -
【Shopify x AI運用】
AI Tool や Shopify CLI を使って Shopify Flow を作成・編集できれば便利なのですが、残念ながらそれはできません。ただ、別の形でAIを活用することができます。というわけで、最近は、作成した Flow の設定確認に Claude を使っています。
Shopify Flow で作成した各Flowは「.flow」ファイルとしてエクスポートできます。そのファイルを Claude に渡すと、トリガー・日付条件・条件分岐・アクションなどを項目ごとにチェックしてくれます。
特に、複数の Flow でロジックが少しずつ異なるケース、たとえばチャネル別・購入回数別・キャンペーン別などでは、それぞれの差分を読み取った上で、修正が必要な箇所や具体的な修正内容まで整理してくれます。
目視では見落としやすい設定ミスにも気づけるので、キャンペーン開始前のチェック工程としてかなり重宝しています。
※ .flow ファイルは、あくまで共有・バックアップ用のエクスポートファイルです。ローカルで直接編集すると、内部ID・アクション定義・参照関係・JSON構造などが崩れて、Shopify Flow 側でインポート時に検証エラーになってしまいます。そのため、Claude には「ファイルを編集してもらう」のではなく、「修正すべき箇所を洗い出してもらう」使い方に留め、実際の修正は Shopify Flow の管理画面上で行うのが安全です。
-
この件が気になって、自分のShopifyストアでも調べてみました。
すると、AI 対応のエンドポイントが何も設定していないのに全部応答する状態でした。
/llms.txt や /agents.md だけでなく、UCP（Universal Commerce Protocol）の入口まですでに用意されていました。ストアドメイン直下で各ファイルのURLにアクセスすればブラウザでも確認できます。というわけで「Shopifyを使っていれば AI Commerce の最低要件は自動で満たされる」状態にすでになっていました。
まとめた記事 → https://x.com/sh_sakamoto/status/2054127899956084878
