Shopify TIPS Blog

horizon-ui-kit-store-build-example_en
Horizon UI Kit の使い方 ― 要件定義からFigmaデザイン、ストア構築まで
この記事は、以前公開したHorizon テーマの UI デザインキット（Horizon UI Kit）を使って、架空のアパレルストアを要件定義 → Figma で画面デザイン → 実際の Shopify ストア構築まで、実際に通しで作ってみたサンプル事例です。要件定義が済んでいれば、そこから先は約2時間で一気に作成できます。 UI Kit にはこういう使い方がある、という一例として、どんな順番で何を決め、Figma で何をして、ストアにどう反映したのか。実際の画面を見ながら順に紹介します。この流れの中で、人がやったのは「何を作るか」を決めることと、できたものの確認だけです。決めた内容をもとに Figma 上に画面デザインのテンプレートを組んだのも、その Figma を読み取ってテーマファイルを作ったのも AI です。今回は Claude Code（Claude や Codex のような、パソコン上のファイルやツールを操作できる AI のコーディングエージェント）に任せました。... Read more...
Shopify Horizon v4.2.0 アップデート ― RTL言語への対応・カート不具合の修正 (EN)
Shopify Horizon v4.2.0 アップデート解説 ― RTL対応とカート「戻る」ボタン不具合の修正
Shopify公式テーマ「Horizon」が v4.1.5 から v4.2.0 に進みました。本記事では、コードの差分を読み解きながら、v4.1.5 から v4.2.0 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。 前回の「v4.1.5 アップデート解説」ではセーフエリア対応を取り上げましたが、今回の目玉はRTL（右から左に書く言語）対応です。加えて、カートの「戻る」ボタン周りの実用的なバグ修正も入っています。 変更サマリー ― 「181ファイル変更」の中身 差分は 181ファイル変更、+1,590行 / −712行。新規・削除ファイルは無く、既存ファイルへの変更のみです。 ストア運営者が気にすべき変更は、大きく次の通りです。 変更 影響範囲 対応の要否 ① RTL（右から左に書く言語）対応 アラビア語・ヘブライ語等での多言語展開 該当言語で展開しているストアのみ確認。それ以外は不要（自動で適用） ② カートの「戻る」ボタンで古い内容が表示される不具合の修正 カートドロワー・カートページの表示の正確性 不要（自動で適用） ③... Read more...
shopify-webmcp-checkout_en.png
ShopifyのチェックアウトがWebMCPに対応。日本のストアでAIエージェントに注文確定まで任せてみた
2026年9月28日、Shopify のチェックアウトが WebMCP に対応しました。8月から商品検索やカート操作は WebMCP で公開されていましたが、これで「商品を探す」から「注文を確定する」までが、ブラウザで動く AI エージェントから操作できるようになります。この記事では、日本のストア（1ページのチェックアウト・日本語）で、エージェントに実際に注文確定まで進めてもらった結果をまとめます。 検証は自社の検証用ストアで、決済をテストモードにして行いました。図版の画面はすべて再現図で、ストア名・商品・氏名・住所はサンプルです。 先に結論・日本のストアでも、エージェントが注文確定まで進められました。ゲストの場合、連絡先・住所の入力から注文確定までをツールで操作でき、人が操作したのはカード番号の入力だけです。・Shop Pay にログインしている購入者なら、画面の操作はゼロでした。保存済みのカードと住所が使われ、エージェントがチェックアウトへの移動と注文確定を呼ぶだけで、購入者は承認するだけです。・ただし 普段使いの Chrome では、チェックアウトのツールはまだ現れません。WebMCP を有効にしたブラウザ（試験機能をオンにした Chrome など）が必要でした。・チェックアウトのツールが返す中身は、UCP のチェックアウトそのものでした。WebMCP は、UCP をブラウザの中から使うための経路という位置づけです。・日本語のストアでは、WebMCP の商品検索が0件になる状態が続いています。コレクションをたどれば商品にはたどり着けます。 WebMCP のおさらい WebMCP（Web Model Context Protocol）は、ブラウザで開いているページが、自分の機能を AI エージェント向けの「ツール」（呼び出せる関数）として登録しておく仕組みです。エージェントは画面のボタンを探してクリックする代わりに、ページが用意したツールを呼んで操作します。仕組みの全体像は以前の記事にまとめています。... Read more...
Sidekickにステップメールをおまかせで作らせる｜Flow作成からメール本文までの実装例とプロンプト (EN)
Sidekickにステップメールをおまかせで作らせる｜Flow作成からメール本文までの実装例とプロンプト
Shopify の Sidekick に、新規購読者向けのステップメール（3通）をおまかせで作らせた実装例です。Flow のワークフロー作成からメール本文・写真の入力まで、実際のやり取りと使ったプロンプトを紹介します。 Read more...
Shopifyのストアフロントが最大29%高速化 ― Liquidテーマ開発者が気をつけるべき3点
Shopifyのストアフロントが最大29%高速化 ― Liquidテーマ開発者が気をつけるべき3点
2026年9月22日、Shopifyのパフォーマンス専門ブログ「Performance @ Shopify」に「Liquid storefronts now start loading 29% faster」という記事が公開されました。 結論から言うと、マーチャント側の作業は一切不要で、対象のページは自動的に速くなっています。ただしテーマのコードを触る人（テーマ開発者・カスタマイズ担当者）は、書き方次第でこの恩恵を丸ごと逃す、あるいは既存のスクリプトが壊れる可能性があります。この記事では、何が変わったのか・対象範囲・気をつけるべき点を整理します。 何が変わったか ― TTFB最大29%高速化の仕組み まず数字から。全ストアフロントのページビューを対象に測定した結果、中央値ストアのTTFB（Time to First Byte／サーバーが最初の1バイトを返すまでの時間）が、p75で約29%、p90で21%短縮されました。より重要な指標であるFCP（First Contentful Paint／最初のコンテンツが描画されるまでの時間）とLCP（Largest Contentful Paint／最大コンテンツの描画完了までの時間）も、2〜6%改善しています。「より重要」とShopify自身が書いているのは、TTFBは技術者向けの指標だが、FCP・LCPは購入者が実際に体感する速さだからです。 仕組みはシンプルです。Liquidのページは大きく2つの部分でできています。 <head> ― meta タグ・スタイルシートのリンク・フォントのプリロード・少数のスクリプトなど、ほぼ静的なマークアップ。レンダリングに数ミリ秒しかかからない テンプレート内のセクション群 ― 処理時間の大部分がここで消費される これまでは、両方のレンダリングが完了してから初めてブラウザに送信されていました。ブラウザは<head>が届くまで何もできず、届いて初めてスタイルシートやスクリプトの存在に気づき、ダウンロードを開始していたのです。... Read more...
新しくなった Shopify Rollouts ― ローンチ・イベント・実験の使い分け
新しくなった Shopify Rollouts ― ローンチ・イベント・実験の使い分け
2026年9月22日、ShopifyのRollouts（ロールアウト）の設定画面がリニューアルされました。changelogでの分類は「Feature（新機能）」ではなく「Improvement（改善）」。告知文も5行ほどの短いもので、一見すると見逃してよさそうなアップデートです。 ただ、実際に管理画面を触ってみると印象が変わります。「テーマの切り替え」「期間限定の差し替え」「A/Bテスト」という別物だった3つが、同じ画面に同居していて区別がつかない——これがリニューアル前の状態でした。今回のアップデートはそこを整理したもので、結果としてRolloutsは「触ってみて何となく分かる」機能になっています。 この記事では、①何がアップデートされたか → ②それによって何が変わったか → ③具体的にどう使うかの順に、実際の管理画面の画像とともに解説します。検証はGrowプランのテストストアで実施しました。 何がアップデートされたか 前提：Rollouts とは Rollouts は、ストアの変更を「いつ・誰に・どれだけ」出すかを制御するShopify標準の仕組みです。管理画面の マーケット > ロールアウト にあります。2026年6月5日に、テーマとチェックアウト／顧客アカウント設定のスケジュール公開・段階公開・A/Bテストに対応しました。 対象にできる変更は2領域です。 領域 対象になるもの オンラインストア メインテーマ（現在のテーマへの編集、または別テーマへの置き換え） チェックアウトとアカウント チェックアウト構成（チェックアウト／サンキュー／注文状況／お客様アカウントの各ページ設定） 一覧画面はこのようになっています。作成したロールアウトが、ステータス・期間・対象オーディエンス・変更内容・トラフィック割り当てとともに並びます。 ステータスは 下書き → スケジュール済み → アクティブ... Read more...
Shopify Horizon v4.1.5 アップデート解説 ― セーフエリア対応とカート数量入力の不具合修正
Shopify Horizon v4.1.5 アップデート解説 ― セーフエリア対応とカート数量入力の不具合修正
Shopify公式テーマ「Horizon」が v4.1.4 から v4.1.5 に進みました。本記事では、コードの差分を読み解きながら、v4.1.4 から v4.1.5 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。 前回の「v4.1.4 アップデート解説」では複数ファイルで使うCSSの共通化を取り上げましたが、今回は毛色が違います。iPhoneのノッチ・ホームインジケーターに配慮した「セーフエリア」対応が横断的に入ったほか、カート数量入力の実用バグ修正など、体験に直結する改善が中心です。 変更サマリー ― 「54ファイル変更」の中身 差分は 54ファイル変更（新規1・削除1・変更52）。前回・前々回と比べると規模は小さいですが、1つの技術的な仕込み（セーフエリア対応）が十数ファイルに波及した点は同じ構造です。 ストア運営者が気にすべき変更は、大きく次の通りです。 変更 影響範囲 対応の要否 ① セーフエリア（ノッチ・ホームインジケーター）対応 ドロワー・モーダル・カート・商品ギャラリー等のiPhone表示 不要（自動で適用） ② カート数量入力の値が消える不具合の修正 カート内での数量編集の正確性 不要（自動で適用） ③ ブログ記事カードの画像読み込み最適化 ブログ一覧ページの表示速度（LCP）... Read more...
Judge.me Emailを触ってみた
Judge.me Emailを触ってみた
プロダクトレビューアプリとしてよく紹介しているJudge.meが、メールマーケティングアプリ「Judge.me Email」をリリースしていました。Shopifyアプリストアでのレビューはまだ5件と少ないものの、すべて星5・平均評価5.0という結果だったので気になり、実際にdevストアへインストールして一通り触ってみました。この記事は、そのときに確認できた機能の洗い出しです。 全体像 実際に管理画面を開いてみると、左メニューに Subscribers / Campaigns / Popups / Flows / Templates / Settings の6項目が並んでいました。実際に一通り触ってみると、購読者管理・セグメント配信・ポップアップ設置・自動化フロー・テンプレート編集・配信の詳細設定まで、CRMツールとして現場で必要とされる機能がひと通り網羅されているという印象です。順番に見ていきます。 Subscribers（購読者管理） Subscribers はShopify側の顧客データからそのまま同期される仕組みで、Judge.me側での直接編集や、CSVでのインポート・エクスポートには対応していませんでした。追加・削除はあくまでShopify管理画面側（顧客の購読設定）で行う形です。 Campaigns（キャンペーン配信） キャンペーン作成は「Audience → Content → Review & send」の3ステップです。ここで一番驚いたのが、Audience（配信先）の選択肢の広さでした。 Audience選択画面。Shopify標準セグメントとJudge.me独自のエンゲージメントセグメントを横断選択できる（画面はサンプル） 選択肢は大きく2種類に分かれています。 Shopify... Read more...
Shopify Horizon v4.1.4 アップデート解説
Shopify Horizon v4.1.4 アップデート解説
Shopify公式テーマ「Horizon」が v4.1.1 から v4.1.4 に進みました。本記事では、コードの差分を読み解きながら、v4.1.1 から v4.1.4 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。 前回の「v4.1.1 アップデート解説」ではカラーシステムの全面刷新を取り上げましたが、今回はその続きです。v4.1.1 から最新の v4.1.4 までの3リリース分（v4.1.2 は公式リリースノートが存在せず、実質 v4.1.1 → v4.1.3 → v4.1.4 の流れ）で何が変わったのかを整理します。 変更サマリー ― 「168ファイル変更」の中身 差分は 168ファイル変更（新規32・変更136）、+9,083行 / −4,237行。前回のカラーシステム刷新（322ファイル）よりは小規模ですが、これも中身を見ると「複数のファイルで使うCSSを共通化した」という1つの設計変更が全体に波及した結果でした。 その証拠に、新規追加された32ファイルのうち20個が「〇〇-styles.liquid」という名前のスニペットです。ボタン・チェックボックス・スウォッチ・数量セレクター・ダイアログ・カート文字組など、これまで特定のファイルの中に埋め込まれていたCSSが、独立したファイルに切り出されました。 ストア運営者が気にすべき変更は、大きく次の通りです。 変更... Read more...
ShopifyのユーザーをCSVで一括作成する ― Admin/POSの違いと実践パターン集
ShopifyのユーザーをCSVで一括作成する ― Admin/POSの違いと実践パターン集
2026年8月21日、Shopifyのchangelogで、ユーザーアカウントをCSVで一括作成・停止・再開できる機能が公開されました。季節雇用やイベント出店で人の入れ替わりが多いストアには特に効きます。ただ、実際に触ってみると「Adminユーザーとは何を指すのか」「POSユーザーはどう認証されるのか」といった、CSVの列だけでは分からない前提知識が必要でした。この記事では、その前提整理と、公式サンプルCSVを使った実践パターンをまとめてみました。 そもそも、ユーザーには2種類ある CSVには user_type という列があり、値は Admin か Point of sale の2択です。ここが最初につまずきやすいポイントでした。 「Admin」という名前ですが、権限の広さとは関係ありません。「カスタマーサポート業務だけ」「商品登録だけ」のような、権限を絞ったロールのスタッフであっても、メールアドレスとパスワードでShopify管理画面にログインする以上は Admin に分類されます。分岐点は権限の広さではなく、「管理画面にログインするかどうか」です。 一方の Point of sale は、レジ端末（POSアプリ）だけを使うスタッフ専用のカテゴリです。管理画面にはログインできず、メールアドレスも不要。4〜6桁のPINだけで認証します。 Admin Point of sale ログイン先 Shopify管理画面 POSアプリのみ 認証方法 メールアドレス＋パスワード 4〜6桁のPIN 権限が絞られたスタッフ... Read more...
AI検索とオーガニック検索は、トラフィックを奪い合っていない ― 同じ商品データが両方を支えている
AI検索とオーガニック検索は、トラフィックを奪い合っていない ― 同じ商品データが両方を支えている
2026年8月11日、Shopify が AI検索とオーガニック検索の役割の違いについての記事を公開しました。2026年Q2の自社データをもとにした内容です。読んでみると「AIが検索のトラフィックを奪う」という話ではなく、両方が同時に伸びていて、買い手が用途で使い分けているという整理でした。そして両者は、同じ商品データを参照して動いています。 記事の内容を追いながら、実際に手を動かして確かめてみて、記事だけでは分からなかった部分を補って整理してみました。 前提：どちらも伸びている まず数字の確認です。 AI経由のセッションは前年同期比197%増（約3倍）。注文数も3倍 一方でオーガニック検索のセッションも12%増。こちらは母数がはるかに大きい AI経由のコンバージョン率は、オーガニック経由より約80%高い AI経由は新規顧客をオーガニックの1.3倍の割合で連れてくる AI経由が増えたぶんオーガニックが減った、という関係にはなっていないとのことです。絶対量ではAI経由はまだまだオーガニックに遠く及ばないという但し書きも付いており、伸び率だけを見て即座にAIに全振り、みたいな判断はしないほうがよさそうです。 AIは「調べてから買う」カテゴリに集中している カテゴリ別に見ると差がはっきり出ています。記事は2種類に分けています。 仕様重視のカテゴリでは、AI経由のコンバージョン率がオーガニックの約2倍。腕時計は2.4倍、ネックレスは2.3倍、アパレル全体でも1.6倍という数字が挙げられています。仕様・互換性・使用例・レビュー・トレードオフを購入前に比較検討するようなカテゴリです。「自分の条件に合う商品を探す」という作業に、AIの強みが噛み合っています。 対して嗜好主導のカテゴリ、つまりブランドやスタイルを自分で決めていて、買い物体験そのものを自分でコントロールしたい場合は、発見・回遊のフェーズで今もオーガニック検索が広く使われているようです。ただし「自分のニーズに合致するかを確認する必要がない」場面では、知らないブランドと出会う手段としてAIが機能する、とも書かれています。 ジャーニーの圧縮が起きている AI経由のコンバージョン率が高い理由は、着地の仕方にあります。 In Q2, 50% of AI-referred sessions landed directly on product pages. AI経由のセッションの半分が、いきなり商品詳細ページに着地しているということです。AI検索が発見と検討を1つのプロセスに統合した結果、購買意欲が高い状態の人が、ファネルの深い段階からブランドに接触してくる。これがコンバージョン率と平均注文額の高さにつながっています。 実務上の意味は明確で、商品ページがトップページの代わりに「最初のブランド接点」になるということです。商品の説明だけでなく、ブランドとして何者かも、その1ページで伝わる必要が出てきます。記事も、明確な説明・仕様・使用例・互換性の詳細・レビュー・配送と返品の情報・FAQ・比較しやすい情報を揃えるべきだと挙げています。... Read more...
Shopifyに新たに搭載されたWebMCPを調べてみた
Shopifyに新たに搭載されたWebMCPを調べてみた
2026年8月5日、Shopify が Liquid / Hydrogen の全ストアフロントに WebMCP を自動搭載したという告知がありました。設定は不要で、対応済みのストアなら今日この瞬間から動いています。実際に自分のストアと、無関係の大手ストアで動かしてみたので、その記録です。特に結論はありません。調べてみた内容をそのまま書きます。 WebMCPとは何か WebMCP（Web Model Context Protocol）は、Webページがブラウザに対して「この操作ができます」という道具（ツール）を登録できる、策定中のWeb標準です。ページ側が document.modelContext.registerTool() を呼ぶと、その場でブラウザに道具が生まれます。ブラウザ内のAIエージェントは、そのページのHTMLを読んでクリックを再現する代わりに、道具を直接呼び出せます。 Shopify側の公式ドキュメントには、対応済みストアで自動搭載される10種の道具が挙げられています。 search_catalog / browse_store / get_product / show_variant — 検索・閲覧・商品詳細 get_cart / update_cart / cancel_cart... Read more...
Shopifyの新タグ {% partial %} で、Horizonの描画コードを削減
Shopifyの新タグ {% partial %} で、Horizonの描画コードを削減
2026年7月、Shopifyの developer preview（Liquid July '26）で、テーマの新しいタグが試せるようになりました。その中の {% partial %} は、ページの一部だけをサーバー側で再描画できるタグです。 触っているうちに気になったのが、「これでテーマのコードが大幅に削減できる」という話でした。Horizonのように高機能なテーマは、動きを実現するためにかなりの量のJavaScriptを抱えています。それが本当に減るのか——実際に同じ機能を書き直して、行数を比べてみました。 結果は、ページャーと並び替えが 537行 → 27行、バリアント切替が 866行 → 27行。なぜここまで変わるのか、実装したコードとあわせて整理します。 まず、Horizonが抱えているJavaScriptの量 比較の出発点として、Horizon 4.1.3 の assets/ にあるJSファイルを数えてみました。 項目 実測値 JSファイル数 81ファイル 総行数 22,610行 高機能なテーマなので、量が多いのは当然です。ただ中を見ていくと、「Liquidで書いた表示ルールを、JavaScriptでもう一度実装している」箇所が繰り返し出てきます。これが今回の主題です。... Read more...
Shopifyテーマの「自由と制約」は、AIでどう変わるか ― Liquidへの原点回帰が示す過渡期
Shopifyテーマの「自由と制約」は、AIでどう変わるか ― Liquidへの原点回帰が示す過渡期
2026年7月、Shopifyの Online Store 担当プロダクトディレクター Ben Sehl 氏が「Liquid: Back to the Future」という一文を公開しました。要点はシンプルで、テーマのページ構造を、JSONテンプレートから“読めるLiquidコード”へ戻すという方向性の宣言です。あわせて developer preview（Liquid July '26）が公開され、新しい {% block %} や {% partial %} といったタグを実際に触れるようになりました。 この動き、機能の話として読むこともできますが、日々Shopifyテーマを触っている立場からすると、もっと大きな「テーマ設計の思想の揺り戻し」に見えます。この記事では、公式が示す未来像を紹介しつつ、実際に構築の現場でコードと格闘してきた視点から、「これは何を変えるのか／変えないのか」を考えてみます。 Shopifyテーマは「自由と制約」の綱引きで進化してきた Shopifyテーマの歴史は、マーチャントの自由度とコードの可読性という、しばしば相反する2つのバランスを取り直し続けてきた歴史でもあります。ざっくり3つの時代に分けられます。 時代 マーチャントの自由度 コードの可読性 テーマ設定のみ（〜2016頃）... Read more...
Shopifyの商品データ設計：バリアント／メタフィールド／プロパティの使い分け（AI時代の発見性まで）
Shopifyの商品データ設計：バリアント／メタフィールド／プロパティの使い分け（AI時代の発見性まで）
Shopifyでストアを作るとき、意外と後回しにされがちなのが「商品の情報を、どこに・どう持たせるか」という設計です。色やサイズはバリアント、素材やケア方法はメタフィールド、名入れやギフトメッセージはラインアイテムプロパティ——同じ「商品ページに載る情報」でも、適した“入れ物”はそれぞれ違います。 ここを最初に間違えると、バリアントが爆発して管理不能になったり、本来「表示するだけ」でよい情報を購入時に選べてしまったり、といった事故につながります。しかも最近は、AIエージェント（ChatGPTやShopのAI）が商品を発見・購入する時代に入り、商品データの構造そのものが「AIに見つけてもらえるか」を左右し始めています。 この記事では、「〇〇をするにはこのメタフィールド」という個別レシピではなく、「こういう種類のデータだから、これで持つ」という判断の原則を、アパレルの具体例と公式ドキュメントをもとに整理します。例外は多々ありますが、まずは“標準の考え方”として押さえておくと、設計の迷いが大きく減ります。 商品情報の「入れ方」は大きく3種類 Shopifyで商品に情報を持たせる方法は、性格の異なる次の3つに分けて考えると整理しやすくなります。 バリアント（オプションで作る）：色・サイズなど「買う対象そのもの」を分ける値。在庫・価格・SKU・画像をそれぞれ独立して持つ メタフィールド：素材・原産国・スペックなど「商品を説明する」付加情報。表示専用で、購入では選ばせない ラインアイテムプロパティ：名入れ・ギフトメッセージなど「お客様がその場で入力する」値。注文単位で保持される それぞれの性格の違いを1枚にまとめると、次のようになります。同じ商品ページの中でも、要素ごとに“持たせる場所”が違うのがポイントです。 同じ商品ページ上の ①②③ が、3種のデータにそのまま対応する 判断の原則：「在庫・価格・SKUが変わるか」で切り分ける 迷ったときの基準はシンプルです（例外はありますが、まずはこの原則で）。 問い 使うもの アパレルTの例 在庫・価格・SKUが変わる？（別の購入単位） バリアント カラー（黒/白）× サイズ（S/M/L） 表示するだけの付加情報？ メタフィールド 素材・原産国・ケア方法／サイズ別の実寸 購入時に指定するが在庫管理は不要？ ラインアイテムプロパティ 名入れ・ギフトメッセージ・ラッピング やりがちなNG：「素材」や「実寸」をオプション（＝バリアントの軸）にすると、色 × サイズ... Read more...
Shopifyコレクションが多ソース対応——バリアント＆ネストも可能に
Shopifyコレクションが多ソース対応——バリアント＆ネストも可能に
2026年7月16日、Shopifyのコレクション機能に大型アップデートが入りました。これまでコレクションは「自動（smart collection）か手動（custom collection）か、どちらか一方」を選ぶ排他的な仕組みでしたが、今回のアップデートで1つのコレクションの中に複数の「ソース（商品の供給元）」を混在させられるようになりました。さらに、商品単位だけでなくバリアント単位でコレクションを組めるようになり、コレクションの中に別のコレクションを入れる（ネストする）こともできます。 「コレクション制御のためだけのタグ」を大量に運用してきたストアほど恩恵が大きいアップデートです。この記事では、公式チェンジログとヘルプドキュメントをもとに、何ができるようになったのか・設計時に効いてくる上限や注意点を具体的に解説してみたいと思います。 従来モデルの制約：自動か手動かの二者択一 従来のコレクションは、作成時に2択でした。 自動コレクション（smart collection）：「タグが organic」「価格が5,000円以下」などの条件にマッチした商品が自動で入る。ただし、条件に合わない商品を後から手動で1個だけ足すことはできない 手動コレクション（custom collection）：商品を1つずつ手作業で選ぶ。条件による自動追加は使えない そのため実務では「基本は自動条件で回したいが、条件に合わない商品を数点だけ足したい／外したい」というニーズに応えられず、コレクション制御専用のタグを商品に付けて条件側を無理やり合わせる、という運用回避が定番でした。今回のアップデートは、まさにこの制約を解消するものです。 新モデル：4種類のソースを1つのコレクションに混在できる 新モデルでは、1つのコレクションに以下4種類のソースを同時に追加できます。まず、新しいコレクション追加画面を見てみましょう。右側のパネルが「ソース」で、下の「＋」枠から2つ目以降のソースを追加していく構成です。 新しいコレクション追加画面。右側が「ソース」パネルで、点線の「＋」から複数のソースを追加できる ソース 内容 Products（商品） 自動条件 または 手動選択で「商品」を追加 Variants（バリエーション） 自動条件 または 手動選択で「バリアント」を追加 Collection（コレクション） 既存の別コレクションを丸ごとソースとして追加（＝ネストコレクション） App（アプリ） アプリが提供する商品セットを追加 ソースの種類はプルダウンで切り替える。「商品・バリエーション・コレクション・アプリ」の4択... Read more...
Horizon カラーパレット徹底解剖 ― 1色決めると何が自動導出され、どのパーツに適用されるのか
Horizon カラーパレット徹底解剖 ― 1色決めると何が自動導出され、どのパーツに適用されるのか
Shopify公式テーマ「Horizon」の v4系では、配色の仕組みがカラースキーム方式からカラーパレット方式へ全面刷新されました。旧方式は6つの固定スキームに対して約50項目の色を1つずつ手で指定するものでしたが、新方式は「パレット」を1つ決めるだけで、各UI要素の色が自動的に導出されます。 この記事では、その「1色決めると、何が自動で設定され、どのパーツに適用されるのか」という波及構造を、3つの層に分けて解剖します。（v4.1.1全体の変更点は「v4.1.1 アップデート解説」をご覧ください。） まずは要点を1枚で。「パレットとは何か」「変更すると何が影響を受けるか」「自動で設定される色の正体」「旧方式から何が一番変わったか」「メリット・デメリット」の5つの疑問に沿って整理しました。 ▲ カラーパレットの早わかり。この5点を頭に入れてから、以下で仕組みを層ごとに見ていきます。 全体像 ― 3層のカスケード カラーパレットは、上流から下流へ3段階で色が流れていきます。 ① あなたが設定する層 ― カラーパレット（背景・メインカラー＋任意の色）。ここだけを触る ② 自動で導出される層 ― 各要素の色を「パレット参照」で割り当て ＋ color-palette.liquid が計算（コントラスト・ホバー色など）→ CSS変数に展開 ③ 適用されるUIパーツ ― ボタン・入力欄・バリアント・カートなど。各コンポーネントはCSS変数を参照するだけ ▲ ①パレット（狭い＝少数）から、②導出・③パーツ（広い＝多数）へと波及していくピラミッド構造。 層①... Read more...
Shopify Horizon v4.1.1 アップデート解説 ― メジャーアップの目玉は「カラーシステムの刷新」
Shopify Horizon v4.1.1 アップデート解説 ― メジャーアップの目玉は「カラーシステムの刷新」
Shopify公式テーマ「Horizon」が、ついに v4系（メジャーバージョン） に到達しました。本記事では、コードの差分を読み解きながら、v3.5.1 から v4.1.1 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。 前回の「v3.5.1 アップデート解説」に続く内容です。今回は、前回取り上げた v3.5.1 から最新の v4.1.1 までで何が変わったのかを整理し、アップデートを取り込む際の判断材料をお伝えします。 変更サマリー ― 「322ファイル変更」の正体 差分は 322ファイル変更（新規32・削除2・変更288）、+14,056行 / −8,074行。数字だけ見ると非常に大きなアップデートに見えます。 しかし中身を精査すると、変更の大半は「ある1つの設計変更」がテーマ全体に波及した結果でした。その設計変更とは、カラーシステムの全面刷新です。 その証拠に、テーマ設定（settings_schema.json）で 追加された31項目はすべて色関連、削除された47項目もほぼすべて旧カラースキーム関連でした。ボタン・バリアント・入力欄・カート・ポップオーバーなど、色を扱うほぼ全コンポーネントが新方式に書き換わったため、変更ファイル数が膨らんでいます。 ストア運営者が気にすべき変更は、大きく次の通りです。 変更 影響範囲 対応の要否 ① カラーシステムの刷新（color_schemes → color_palette）... Read more...
Shopify Editions Spring ’26 開発者
Shopify Editions Spring ’26 開発者
← Shopify Editions Spring ’26 全まとめ CATEGORY 10 / 開発者 開発者カテゴリーは 全54項目で全10カテゴリー中いちばん多い更新群です。一本に貫く流れは 「開発そのものをAIエージェント前提に作り直す」こと。お気に入りのAIコーディングエージェントから Shopify を正確に扱える AI Toolkit、フレームワークを選ばない 新しい Hydrogen、テーマとアプリ・AIが確実につながる 標準ストアフロントイベント——いずれも「人が手で書く／AIが書く」のどちらでも壊れにくい土台づくりに向いています。開発者向けAPI・ツールが中心のため、ごく一部（Shop 消費者アプリ・WhatsApp 依存の項目）を除き、原則すべて日本でも使えます。 検証ステータスについて：本カテゴリーは 公式ドキュメント（shopify.dev／changelog）ベースで整理しています。Developer Preview（先行公開）や 2026-07 以降提供の項目を含み、実機での挙動確認は限定的です。数値・正式な提供時期は出典先で最新をご確認ください。日本可否は「開発者向けAPIは原則グローバル提供」という前提に基づく判断です。 HIGHLIGHT 見どころ：開発が「エージェントファースト」に作り直された 54項目を並べると、個々の機能改善の奥に一貫した設計思想が見えます。それは「AIエージェントが... Read more...
Shopify Editions Spring ’26 財務
Shopify Editions Spring ’26 財務
← Shopify Editions Spring ’26 全まとめ CATEGORY 09 / 財務 財務カテゴリーは Shopify Balance（事業用口座）・Shopify Capital（資金調達）・Shopify Tax（税計算） まわりの更新で、全7項目が日本では基本的に使えません（提供地域＝米国5・カナダ1・フランス1）。理由はバラバラの地域ロックではなく、土台となる Balance・Capital が日本未提供／今回の Tax 拡大はカナダ向けだから。日本のストアがそのまま導入できる項目はありません。とはいえ、読み取るべきは個々の機能より、Shopify が決済の外（入金・送金・融資・税務）まで取り込む“金融プラットフォーム化”の方向性です。 検証ステータスについて：本カテゴリーは公式ヘルプ（help.shopify.com）が bot ブロック（403／429）されやすく、公式 Editions の記述および一般知識ベースで整理しています。還元率・手数料などの数値は出典未取得のため断定しません。いずれも日本未提供で、実機確認は対象外です。 HIGHLIGHT 見どころ：Shopify の「金融プラットフォーム化」 7項目はバラバラの小機能に見えて一本の線でつながっています。Shopify... Read more...
Shopify Editions Spring ’26 決済
Shopify Editions Spring ’26 決済
← Shopify Editions Spring ’26 全まとめ CATEGORY 08 / 決済 決済カテゴリーは、地味だが効く「不正対策・チェックアウト最適化」と、地域・通貨ごとの拡大が混在しています。読み解いていくと、日本のストアにそのまま即効で効くもの（カードテスト攻撃の自動ブロック、チェックアウト改善、住所オートコンプリート等）と、地域が限定されて日本には直接関係しないもの（メキシコの分割払い、UAE 展開、USDC 決済など）の温度差がはっきり出ています。この記事では、その「日本で使えるか」の見極めを各項目に添えながら整理しました。 検証ステータスについて：このカテゴリーは、各機能の公式ヘルプ／Editions ページ（多くは日本語版）を取得してドキュメントベースで整理しています（一部を除き実機での挙動確認は行っていません）。そのため断定を避け、公式記述に基づく箇所は「公式によると」「〜とされています」と明記しています。「日本可否」も出典記述からの判断で、実機での提供開始時期・表示の細部は別途確認が要る前提です。 SECTION 不正・リスク対策：このカテゴリーの目玉 #13 カードテスト攻撃に対する不正注文防止の強化 機械学習が取引リスクをスコアリングし、攻撃を自動ブロック（公式によると約90%）。 + 日本：即効で使える　このカテゴリーで唯一の重要度S。カードテスト攻撃（Card Testing Attack）とは、攻撃者が不正入手した大量のカード番号が「まだ使えるか」を確かめるため、チェックアウトで少額決済を高速・大量に試す行為です。ストアが「カードの生死判定機」として悪用され、被害は決済額そのものより手数料の積み上がり・チャージバック急増・チャージバック率の悪化といった付随コストが重くなります。 今回、Shopify は教師あり機械学習モデル（正解ラベル付きデータで学習させた予測モデル）でチェックアウト時の取引リスクをリアルタイムにスコアリングし、攻撃と判定したものを自動ブロックします。判定には ①行動パターン（試行の速度・タイミング・操作の癖）②ネットワークレベルのシグナル（マーチャント横断・決済代行横断の活動、デバイスフィンガープリント）③取引コンテキスト（決済方法・業種・購入履歴）の3系統を使うとされています。 ▲ ML が3系統のシグナルでリスクをスコアリングし攻撃を自動ブロック（公式記述に基づく概念図）... Read more...
Shopify Editions Spring ’26 Shopアプリ
Shopify Editions Spring ’26 Shopアプリ
← Shopify Editions Spring ’26 全まとめ CATEGORY 07 / Shopアプリ Shopify が運営する消費者向けの買い物アプリ（Shop）関連のアップデートです。マーチャントが自分で持つストアフロント（テーマ）とは別に、巨大な Shop アカウントと Shop Pay（保存済みの住所・クレジットカード情報）をベースに、全世界のShopifyストアを跨いで購入できるチャネルです。この記事では、実際に Shop を使い、買い手AIエージェントでの自律購入まで実機で確認しながら、解説しています。 SECTION 発見：探し方が変わる #01 買い物客の視点で設計された検索 会話で見つけ・比較・検討。好みとShop履歴でパーソナライズ。 + キーワードを正確に打ち込む「お店の都合の検索」ではなく、「会話を通じて商品を見つけ、比較し、検討する」買い物客視点の検索です。Ask anything… に話しかけると、AIが意図をくんで商品群と解説を返し、好みや Shop での履歴に基づいておすすめがパーソナライズされます。 実際に試すと、日本語で「日本で購入できるものある？」と尋ねるだけで、AIが「日本に配送できるショップ（配送対象国にJPが含まれる）」まで判定し、商品群＋解説＋絞り込み候補（浅煎り／深煎り／エスプレッソ向け等）まで返してきました。ただしこの会話検索モードは現状アメリカ先行で、日本の... Read more...
Shopify Editions Spring ’26 オペレーション
Shopify Editions Spring ’26 オペレーション
← Shopify Editions Spring ’26 全まとめ CATEGORY 06 / オペレーション オペレーションは、ストア運営の裏側——分析・自動化・在庫・注文・配送、そしてAI連携——を支える50項目です。この記事では、日本のストアで実際に使えて効く機能を実機で確認しながら深掘りし、在庫まわりは公式動画・ドキュメントに基づく紹介、Shopify Shipping や Managed Markets など日本対象外のグローバル機能は末尾に出典リンクのみでまとめています。画面図は実機を確認したうえでの概念図（ダミーデータ）です。 SECTION AIと自動化の入口 #01 より多くのバイブコーディングパートナー Lovable・Manus 等のAIツールでフロントを生成し、裏側はShopify。 + 「バイブコーディング」＝作りたいものを自然言語でAIに伝えて生成する開発スタイルです。Lovable・Manus・V0・Replit などでストアフロント（見た目）だけを生成し、商品・在庫・カート・決済といった商取引基盤は Shopify が Storefront API 経由で担う——いわゆるヘッドレスコマースの連携先が増えました。... Read more...
Shopify Editions Spring ’26 マーケティング
Shopify Editions Spring ’26 マーケティング
← Shopify Editions Spring ’26 全まとめ CATEGORY 05 / マーケティング 「マーケティング」は、集客と販促をAIで底上げするアップデート集です。広告運用をAIが継続的に学習・最適化する Campaign Autopilot、メール・SMS・WhatsApp を束ねる Shopify Messaging、そして計測・同意まわりの整備が柱になっています。※本カテゴリは、検証ストアで実機確認できた項目（各項目に「実機確認」と明記）と、公式情報（Editions 発表・changelog・ヘルプ）に基づく項目が混在します。日本では使えない項目（Shop Campaigns・WhatsApp・SMS 等）はその旨を明記しています。 日本で使える6項目（実機確認）を本編に掲載 ／ 日本対象外の6項目は末尾にまとめて紹介 GROUP 1 / AIマーケティングと配信 AIが広告を回し、メール配信を最適化（2項目） #01Campaign Autopilot AIが広告キャンペーンを継続的に学習・最適化し、チャネルをまたいで運用。... Read more...
Shopify Editions Spring ’26 小売(POS)
Shopify Editions Spring ’26 小売(POS)
← Shopify Editions Spring ’26 全まとめ CATEGORY 04 / 小売(POS) 小売(POS)カテゴリーは、実店舗での販売を支える Shopify POS（Point of Sale／店頭レジ）まわりの強化が中心です。なお、POS Pro / Shopify Plus / 特定地域に限定され、こちらで実機確認できなかった機能は、不正確な説明を避けるため末尾に割愛理由とともにまとめて掲載しています（各公式ドキュメントへのリンク付き）。 実機・公式動画で確認できた6項目 / 開いて詳細を表示 史上最速のPOS（V11） 常時表示カートで会計を短縮し、1分以上の時間を節約。 + 正式名称：Shopify POS version... Read more...
Shopify Editions Spring ’26 オンライン
Shopify Editions Spring ’26 オンライン
← Shopify Editions Spring ’26 全まとめ CATEGORY 03 / オンライン 「オンライン」は、あなたのオンラインストアそのものに関わるアップデート集です。接客・検索・テーマ編集・お客様アカウント・海外販売（マーケット）・B2B（企業間取引）・Shopify Collective（ストア間の仕入れ）まで、全25項目と幅広いのが特徴です。全体を貫くのは ①AIが店を賢くする ②世界中・どんな相手にも売りやすくする という2つの流れです。本記事では25項目を6つのテーマに整理し、出典つきで一つずつ解説してみました。 全25項目 / 6テーマ / 開いて詳細を表示 GROUP 1 / AIがストアを賢くする 接客・分析・検索・価格づけをAIが底上げする（4項目） #01 AI販売スタッフ（Shopify Inbox） 近日公開・要アップグレード チャット接客のShopify... Read more...
Shopify Editions Spring ’26 Sidekick
Shopify Editions Spring '26: Sidekick (All 9 Items)
← Back to the Editions category hub CATEGORY 02 / Sidekick Sidekick is the AI assistant built into the Shopify admin from the start. In this Editions, Sidekick has evolved... Read more...
Shopify Editions Spring ’26 エージェンティック｜AIコマース基盤の開放
Shopify Editions Spring '26: Agentic | Opening Up the AI Commerce Foundation (All 11 Items)
← Back to the Editions all-categories index (hub) CATEGORY 01 / AGENTIC The central theme of this Editions release is the "Agentic" category. Products are discovered and recommended within conversations... Read more...
Shopify Editions Spring ’26 全まとめ
Shopify Editions Spring '26: The Complete Roundup
Shopify officially bills this semiannual roundup of updates as "150+," but counting from the English-language page as of June 18, 2026, it comes to 10 categories and 218 items—a substantial... Read more...
Shopifyストアの agents.md.liquid でAI向け情報をカスタマイズ
Customizing AI-Facing Info on Your Shopify Store with agents.md.liquid
On May 29, 2026, Shopify released the ability to customize /agents.md, /llms.txt, and /llms-full.txt. These files act as an "instruction sheet" that AI agents (ChatGPT, Claude, Copilot, and so on)... Read more...
chrome-devtools-mcpを使ってモバイル実機に近い形でAIブラウザテスト
AI Browser Testing Close to a Real Mobile Device with chrome-devtools-mcp
When I had AI drive the browser to check a Shopify store on mobile, I used to resize the window to 390px wide with a Chrome extension. After switching to... Read more...
Shopifyテーマ改修後のAIを使ったブラウザ確認のポイント
Key Points for AI-Powered Browser Checks After a Shopify Theme Change
After making changes to a Shopify theme, you can hand off the "is anything broken?" check to AI. Major AI tools like Claude and Codex can operate the browser directly... Read more...
Shopify が公開した UCP CLI と Global Catalog ── AI エージェント向け商品検索インフラを試してみた
Shopify's New UCP CLI and Global Catalog ── Trying Out the Product Search Infrastructure for AI Agents
On May 19, 2026, Shopify's official developer account announced that a new mechanism for AI agents had gone fully live. Specifically, it was the release of a command-line tool called... Read more...
Google公式 AI検索ガイドが示す、ECサイトがやるべきこと・やめていいこと
What Google's Official AI Search Guide Means for E-Commerce: What to Keep Doing and What You Can Stop
Google has published an official guide titled "Optimizing your website for generative AI features on Google Search." In it, Google explains directly what you should do to appear in generative... Read more...
Shopifyが全ストアに自動配備していたAI Commerce対応エンドポイント — llms.txt / agents.md / UCP / MCP の中身
The AI Commerce Endpoints Shopify Auto-Deployed to Every Store — Inside llms.txt / agents.md / UCP / MCP
It all started when I looked at the https://mudminnowclothing.com/llms.txt of an overseas Shopify store (Mudminnow Clothing). It is a new standard format that delivers a "self-introduction of the site" to... Read more...
AIエージェントは商品ページの何を見ているのか — Shopify Agentic Readinessから読み解く11項目
What AI Agents Actually See on Your Product Pages — 11 Signals from Shopify's Agentic Readiness
Shopify has released a verification tool called Agentic Readiness. It checks how correctly an e-commerce site's product pages are recognized as products by AI agents. According to ShopifyJP's announcement post,... Read more...
【Horizon】カラムレイアウトブロックで幅比率を自由に設定する独自ブロック
[Horizon] A custom block for freely setting column width ratios
When building out pages with the Horizon theme, you'll inevitably hit moments where you want "a sidebar layout here" or "three columns of products side by side." Horizon has a... Read more...
Shopify AI Toolkitを本番ストアで使う前に整えておきたいこと
What to Set Up Before Using the Shopify AI Toolkit on a Production Store
The officially released Shopify AI Toolkit is a plugin that lets AI tools like Claude Code and Cursor operate your Shopify store directly. Adding products, adjusting inventory, creating discounts—much of... Read more...
【Horizon】ドロワーメニューにバナー画像を表示するカスタマイズ
[Horizon] Adding a Banner Image to the Drawer Menu
"I want to show a campaign banner in the drawer menu." When a visitor opens the mobile hamburger menu, displaying a banner image below the navigation is an effective way... Read more...
AIが商品を選ぶ時代に備える ― Shopify Agentic Commerce対応について
Preparing for the AI Shopping Era — What to Do for Shopify Agentic Commerce
Shopify has launched "Agentic Storefronts" — a system that enables AI agents like ChatGPT, Google Gemini, Microsoft Copilot, and Perplexity to directly discover, recommend, and purchase products from Shopify stores.... Read more...
Horizon UIデザインキットからShopifyテンプレートJSONを自動生成する
Auto-Generating Shopify Template JSON from the Horizon UI Design Kit
The recently released Horizon theme UI design kit has another purpose beyond design validation. By mapping Figma component names 1:1 with the section and block names available in the theme... Read more...
Shopifyテーマ「Horizon」のUIデザインキット for Figmaを公開しました
Releasing a Figma UI Design Kit for Shopify Theme "Horizon"
I created a UI design kit for Shopify's latest theme "Horizon" in Figma. The goal is to enable design validation based on the actual theme structure when planning theme customizations... Read more...
Google Stitchで作成したデザインをShopifyページに一気に実装するskillを試してみました
Building a Skill to Implement Google Stitch Designs as Shopify Pages End-to-End
Google's AI design tool "Stitch" announced a major update in March. AI-native canvas, a design agent that remembers the entire project, voice control, instant prototyping, and DESIGN.md for portable design... Read more...
Shopifyテーマの新入力設定「article_list」の特徴と使い分け ― blog.articlesとの違いを整理
Shopify Theme New Input Setting "article_list": Features and When to Use It vs. blog.articles
In January 2026, a new input setting type article_list was added to Shopify themes. Unlike the existing article (single article selection), a picker that allows selecting multiple articles at once... Read more...
【Horizon】商品カードのバッジ表示をカスタマイズする ― ファイル追跡から設定項目の追加まで
[Horizon] Customizing Product Card Badge Display — From File Tracing to Code Changes
"I want to display discount rates on product card badges in the featured collection" We sometimes receive requests to display specific discount rates or amounts like "20% OFF" on sale... Read more...
Prestige開発者のHorizonテーマブロック対応方針から考える、テーマアーキテクチャの選択
Theme Architecture Choices: Insights from the Prestige Developer's Horizon Theme Block Adoption Strategy
Prestige Developer Comments on Theme Block Architecture Adoption Strategy With the release of Shopify's "Horizon" theme, theme architecture has changed significantly with features like multi-level nested theme blocks and AI... Read more...
Horizonテーマのセクション＆ブロック構造を俯瞰できるツール
A Tool for Overviewing Horizon Theme Section & Block Structure
Horizon is a theme that fully adopts the Theme Blocks architecture promoted by Shopify. The structure that was previously self-contained at the section level has been broken down into block-level... Read more...
Horizon全39セクションを解析して整理した呼び出しパターン3分類
Three call patterns organized by analyzing all 39 sections of Horizon
What's changed in Horizon? "Horizon" is a new theme released in Shopify's Summer '25 Edition. Not only is its appearance different, but the internal structure of the theme - in... Read more...
Horizon v3.4.0アップデート解説 ― アカウント管理の刷新と単一バリアント表示の改善
Horizon v3.4.0 Update Guide - Account Management Revamp and Single Variant Display Improvements
On February 18th, v3.4.0 of the official Shopify theme "Horizon" was released. In the previous article, " How to safely customize Shopify's new theme 'Horizon' ," we explained how to... Read more...
Shopify新テーマ「Horizon」を安全にカスタマイズする方法
How to safely customize Shopify's new theme, "Horizon"
The Horizon Theme Safe Customization Guide , published by Shopify's official Growth Services last November, introduces a systematic approach to customization while maintaining upgradability. Here, I would like to summarize... Read more...