Xポストログ

2026年6月16日

【Shopify TIPS：Sidekick & Flow】
Sidekickは同一Flow内で「Flowの一部分を複製」することも頼めたりします。

「このcondition＋actionのセットを3つに複製して」と伝えるだけで、トリガーから3つに分岐する並列構造をまるごと組んでくれました。Flowエディタで直接操作しようとすると地味に手間のかかる複製作業も、Sidekickにお願いすればサクッと対応してくれるので助かります。

#Shopify

2026年6月15日

【Shopify TIPS：テーマHorizon】
商品ページにバリエーションごとの在庫一覧表を表示する方法

サイズ×カラー×素材…と組み合わせが増えるほど、どれがどれだけ在庫あるのか、ピッカーを切り替えながら1つずつ確認するのは大変です。

商品ページに在庫の一覧表を出しておくと、お客様が一目で在庫状況を把握できます。すべての組み合わせが存在しない変則バリエーションにも対応。Horizon向けの設定例をまとめました。

※詳細はスレッドに掲載

#Shopify

スレッド

【Horizon】商品詳細画面にバリエーションごとの在庫一覧表を表示する方法
https://store-dojo.com/products/2026-06-15

2026年6月14日

【Shopify TIPS：テーマHorizon】
メインメニューから同じ階層を移動できるサブメニューを自動生成する方法

第2・第3階層まであるメニューだと、同じ階層の別カテゴリに移りたいたびにメニューを開き直す必要があり、地味に手間です。

ヘッダー直下に兄弟リンクを横並びで自動表示しておくと、メニューを開き直さずに同一階層を回遊できるようになります。Horizon向けの設定例をまとめました。

※詳細のリンク先はスレッドに記載

#Shopify

スレッド

【Horizon】メインメニューから同一階層を移動できるサブメニューを自動生成する方法
https://store-dojo.com/products/2026-06-14

2026年6月13日

【Shopify TIPS：Sidekick & Flow】
以前「Flowの新規作成はSidekick任せ」とポストしたのですが、作成済みFlowの修正も頼れるのでかなり助かっています。

たとえば既存のメール送信アクションを Klaviyo の Track an Event に置き換える作業。イベント名や顧客プロパティのマッピング、Public API Keyをどこに入れるかの案内まで、地味に面倒で手が止まりがちな部分なのですが、簡単な要件を日本語で伝えるだけで一通りやってくれます。

#Shopify

2026年6月12日

というポストをした直後に、なんと公式からも同様のChrome拡張がリリースされました。

公式拡張はページ全体だけでなく、要素単位でもキャプチャ可能。もちろん、Figma上で編集できるレイヤーとして取り込めます。

ただ、いくつか試したところ、公式拡張では別ドメインから配信されている画像が取得されないケースがありました。

たとえばUNIQLOの場合、ページ本体は http://www.uniqlo.com、画像は http://im.uniqlo.com から配信されています。ブラウザ上では別オリジン扱いになるため、公式拡張はこの制約を守り、画像部分が抜けた状態でキャプチャされました。

一方、Copy to Figmaは「全サイトへのアクセス権」を前提に、画像を直接取得しているようです。

つまり優劣というより設計思想の差で、

・公式拡張 = 最小権限で安全寄り。その分、別オリジン画像は取りこぼすことがある
・Copy to Figma = 広いアクセス権を前提に、より多くの要素を持ってこられる

というトレードオフでした。

まずは公式拡張を使いつつ、画像が抜けるケースではCopy to Figmaを使う、という使い分けになりそうです。

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg?pli=1

2026年6月11日

このChrome拡張、かなり便利で助かりますね。

最近だとAIが生成してくれるプロトタイプに対して修正指示出したい時など、言葉で表現しづらいところは画面をキャプチャして加工したりしていたのですが、これを使えばパーツをその場で組み直しできるので、変更方針などが共有しやすくなりました。

https://coliss.com/articles/build-websites/operation/work/copy-to-figma-chrome-extension.html

スレッド

というポストをした直後に、なんと公式からも同様のChrome拡張がリリースされました。

公式拡張はページ全体だけでなく、要素単位でもキャプチャ可能。もちろん、Figma上で編集できるレイヤーとして取り込めます。

ただ、いくつか試したところ、公式拡張では別ドメインから配信されている画像が取得されないケースがありました。

たとえばUNIQLOの場合、ページ本体は http://uniqlo.com、画像は http://im.uniqlo.com から配信されています。ブラウザ上では別オリジン扱いになるため、公式拡張はこの制約を守り、画像部分が抜けた状態でキャプチャされました。

一方、Copy to Figmaは「全サイトへのアクセス権」を前提に、画像を直接取得しているようです。

つまり優劣というより設計思想の差で、

・公式拡張 = 最小権限で安全寄り。その分、別オリジン画像は取りこぼすことがある
・Copy to Figma = 広いアクセス権を前提に、より多くの要素を持ってこられる

というトレードオフでした。

まずは公式拡張を使いつつ、画像が抜けるケースではCopy to Figmaを使う、という使い分けになりそうです。

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg?pli=1

2026年6月10日

さっそく複数の案件で使わせてもらっています。

「新しいお客様アカウント」では従来の会員登録フォームが使えなくなり、誕生日や電話番号などの顧客情報収集が課題でした。

このアプリは初回ログイン直後にフォームを自動表示してくれるので入力を促しやすく、購入完了画面など複数画面にまたがってフォームを出す際も、入力済みの項目は自動で非表示になるなど、UXがよく考えられていて大変助かっています！

2026年6月10日

【Shopify TIPS：Horizonのモバイルドロワーメニュー改善】

Horizonのスマホ用ドロワーメニューは開くたびにトップからたどり直す形なので、階層が深いメニューでは同じカテゴリをクロールしたい時など、地味にストレスになりがちです。

そこで、開いた瞬間に“今いるページの階層”を自動で展開しつつ、現在表示しているメニューをグレーでハイライトする設定例です。テーマエディタ上でカスタムLiquidセクションを追加してコードを貼り付けるタイプなので、テーマファイルのコード編集は不要です。

※詳細はスレッドに記載しています。

#Shopify #Horizon

スレッド

【Horizon】ドロワーメニューを開いた時に現在ページの階層を自動展開し、選択中メニューを強調する方法
https://store-dojo.com/products/2026-06-10

2026年6月9日

Shopify Rollouts でABテストをする際、標準の分析レポートも便利ですが、GA4で詳細を分析したいケースもあるので、ユーザープロパティを使う方法を試してみました。

① GA4でカスタム定義（ユーザープロパティ）を追加
② テーマファイルにGA4にユーザープロパティを送信するスクリプトを追加し、ABテストするテーマごとに値を設定
③ DebugViewでセットされていることを確認

※Google&Youtubeアプリで計測しているストアで使える計測コード（ユーザープロパティは次のイベント送信時に付与されるため、ダミーイベントを一緒に発火させます。G-XXXXXXXXXのところに計測プロパティIDをセットします。）
window.addEventListener('load', function() {
if (window.gtag) {
gtag('set', 'user_properties', {
rollout_variant: 'default' // または 'test'
});
gtag('event', 'rollout_check', {
send_to: 'G-XXXXXXXXX'
}

GA4の探索レポートでABテストするテーマごとにCVRやセッション数を比較できるようになります。

#Shopify

2026年6月8日

【X記事】Shopifyストアの agents.md.liquid でAI向け情報をカスタマイズ

Shopify は /agents.md、/llms.txt、/llms-full.txt のカスタマイズ機能をリリースしました。もともと、何もしなくても Shopify が自動生成してくれていたのですが、テーマの Liquid…

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

2026年6月7日

ロールアウト機能がアップデートされ、チェックアウトとお客様アカウント設定のスケジュール公開＆A/Bテストができるようになりました。

テーマのようにセクション単位で変更するのではなく、チェックアウト設定の下書きを別途用意して丸ごと切り替える仕組みのようです。配信割合と開始・終了日時を指定してテストできます。

テーマのセクション変更に加えて、チェックアウトページまで検証できるようになったのはありがたいですね。

https://changelog.shopify.com/posts/schedule-publish-and-a-b-test-new-themes-and-checkout-and-customer-account-configurations

#Shopify

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