Shopify Horizon v4.3.0〜v4.5.0 アップデートまとめ ― 実店舗の在庫表示、チェックアウト前の数量保存、カートメモ欄の修正

Shopify公式テーマ「Horizon」が v4.5.0 に進みました。v4.2.0 から数えると、約1か月の間に v4.3.0、v4.4.0、v4.5.0 と3回の更新が続いています。本記事では、この3つのバージョンの変更をまとめて、v4.2.0 から一度に上げる場合に、何を確認すればよいかを整理します。

v4.3.0 と v4.4.0 には、それぞれ個別の解説記事があります（v4.3.0 アップデート解説／v4.4.0 アップデート解説）。本記事では、新しく出た v4.5.0 を詳しく解説し、v4.3.0 と v4.4.0 は要点だけを振り返ります。あわせて、v4.3.0 の記事を書いた時点では未公開だった、公式リリースノートで新たに分かったことも補足します。

3つのバージョンのリリース日と目玉

公開日は、Shopify公式のGitHubミラー（github.com/Shopify/horizon）に各バージョンが反映された日時を、日本時間に直したものです。

v4.2.0 から上げるときに、確認したいこと（一覧）

3つのバージョンの変更のうち、ストア運営者が気にすべきものを、対応の要否で並べました。v4.5.0 の「実店舗の在庫表示」は、初期設定でオンですが、2026年11月12日に試した時点では、設定をすべてオンにしても、商品ページに表示されませんでした（詳しくは後述）。

v4.5.0 の変更点① ― 在庫のある実店舗を、商品ページに表示する

v4.5.0 の唯一の機能追加です。商品ページの「購入ボタン」ブロック（blocks/buy-buttons.liquid）には、これまで「店舗受取」に対応した店舗だけを、受取の可否とあわせて表示する欄がありました。v4.5.0 では、ここに受取には対応していないが、その商品の在庫があり、店頭で販売している実店舗も表示できるようになりました。

リリースノートには、「The option is on by default, so after updating, product pages can list these stores without any setting changes.」（このオプションは初期設定でオンのため、更新後は、設定を変えなくても、商品ページにこうした店舗が表示されうる）と書かれています。

購入ボタンのブロックに、次の設定が加わりました。

// blocks/buy-buttons.liquid の schema に追加
{
  "type": "checkbox",
  "id": "show_physical_stores",
  "label": "t:settings.show_physical_stores",      // 実店舗を表示
  "info": "t:info.show_physical_stores_help",
  "default": true
}

日本語の設定画面では「実店舗を表示」となり、説明文は「受取に対応していない場合でも、商品の在庫があり、実店舗のストアフロントとしてマークされているロケーションも表示します。」です。

どの店舗が表示されるのか

Liquid では、店舗ごとの在庫を store_availabilities（バリエーションの、ロケーションごとの在庫の一覧）で受け取ります。v4.5.0 は、この一覧を次の条件で絞り込んでいます。

{%- comment -%} blocks/buy-buttons.liquid（v4.5.0） {%- endcomment -%}
assign in_store_availabilities = store_availabilities
  | where: 'physical_storefront'           # 店頭で販売する実店舗
  | where: 'available_without_transfer'    # 在庫の移動なしで、その店に在庫がある
if show_pickup_availability
  assign in_store_availabilities = in_store_availabilities | reject: 'pick_up_enabled'
endif

• physical_storefront は、Shopifyの開発者向けドキュメントで「ロケーションが、対面で販売する実店舗であれば true」と説明されている値です。
• available_without_transfer は、コード内のコメントによると、available（受取のために在庫を移動して用意できる分も含む）と違い、移動なしで、その店に在庫があることを表します。なお、この値は、2026年11月時点で、Liquid の公式ドキュメントの store_availability の項目には載っていません。コメントには、値が返らない環境では、何も表示しない作りにしてある、と書かれています。
• 受取の表示（「店舗受取の可否を表示」）もオンのときは、受取に対応した店舗は、これまでどおり受取の行として表示し、実店舗の行とは重ねません。

表示される文言

表示させるには、2か所の設定が必要

実店舗の在庫を商品ページに表示するには、テーマ側と、管理画面のロケーション側の、両方の設定をオンにする必要があります。テーマ側の「実店舗を表示」は初期設定でオンですが、ロケーション側の「実店舗」は初期設定でオフです。

設定1：テーマエディタの「購入ボタン」ブロック

テーマエディタで商品ページのテンプレートを開き、左のメニューの「商品情報」→「詳細」→「購入ボタン」を選びます。設定の「店舗受取」の見出しの下に、2つのスイッチがあります。

• 店舗受取の出品状況を表示：店舗受取に対応した店舗を表示する、従来からある設定です。
• 実店舗を表示：v4.5.0 で追加された設定です。受取に対応していなくても、在庫があり、「実店舗」とされている店舗を表示します。

設定2：管理画面の「設定」→「ロケーション」

管理画面の「設定」→「ロケーション」で店舗を選び、「実店舗」のスイッチをオンにします。テーマの「実店舗を表示」が対象にするのは、このスイッチがオンの店舗だけです。あわせて、商品のバリエーションの「在庫」の欄で、その店舗を在庫のロケーションに追加し、数量を入れておきます。

なお、「実店舗」のスイッチの説明文は「Shopアプリ、オンラインストア、AI エージェントにこの実店舗のロケーションを表示する」です。オンラインストアのテーマだけでなく、Shop アプリや AI エージェント（UCP の店舗検索）にも店舗を見せる設定である点に、注意が必要です。

実際に試した結果（2026年11月12日）：まだ表示されない

検証用のデモストアで、v4.5.0 のテーマに対し、上の2か所をオンにしました。そのうえで、受取には対応していない実店舗を3つ（渋谷店・梅田店・名古屋店）作り、商品のバリエーション1つに、渋谷店5点、梅田店2点、名古屋店0点の在庫を入れて、商品ページを確認しました。

結果、商品ページには、店舗の在庫の欄が表示されませんでした。原因を確かめるため、同じバリエーションの店舗の在庫を、取得元ごとに確認しました。

テーマが店舗の在庫を受け取る store_availabilities には、この時点では、従来どおり受取に対応した店舗しか含まれていませんでした。受取に対応していない実店舗を含めて返すのは、開発中の unstable 版の API だけです。テーマ（v4.5.0）は対応を済ませていますが、テーマに渡るデータ側の提供が、まだ始まっていないと考えられます。前述のとおり、v4.5.0 のコードは、必要な値が返らないときは何も表示しない作りになっています。

あわせて、バリエーションを切り替えたときの更新処理（assets/local-pickup.js）も見直されています。これまでは、切り替えのたびに、店舗の在庫を取り直す通信をしていましたが、v4.5.0 では、バリエーションの切り替えで描画済みのページから、自分のブロックの欄を探して使い、見つからないときだけ取り直します。同じセクションに購入ボタンのブロックが2つある場合にも、ブロックのID（data-block-id）で、それぞれの欄を区別するようになりました。

v4.5.0 の変更点② ― 商品テンプレートを変えていても、クイック追加が正しく開く

商品一覧の「クイック追加」（商品ページに移らずに、ポップアップでバリエーションを選んでカートに入れる機能）は、これまで、その商品の商品ページを丸ごと取得し、その中の商品情報の部分を、ポップアップに流し込む作りでした。そのため、商品テンプレートで、商品情報のセクションを非表示にしたり、価格・バリエーションの選択・購入ボタンのブロックを外したりしていると、ポップアップが空、または一部が欠けた状態で開いていました。

v4.5.0 では、取得した商品ページに、価格（product-price）、購入ボタン（product-form-component）、バリエーションが複数ある商品ならバリエーションの選択（variant-picker）がそろっているかを確認し、足りない場合は、クイック追加専用の新しいセクション sections/section-rendering-quick-add.liquid を、Section Rendering API（セクション単位でHTMLを取得する仕組み）で取得して使います。

// assets/quick-add.js（v4.5.0）
const QUICK_ADD_SECTION_ID = 'section-rendering-quick-add';

async #fetchProductGrid(productPageUrl) {
  const html = await this.fetchProductPage(productPageUrl);
  const pageGrid = html.querySelector('[data-product-grid-content]');
  if (pageGrid && this.#canFillModal(pageGrid)) return pageGrid.cloneNode(true);  // 商品ページで足りる

  // 足りないときは、専用セクションを取得する
  sectionUrl.searchParams.set('section_id', QUICK_ADD_SECTION_ID);
  // ...
}

専用セクションの中身は、メディア、商品名、価格、バリエーションの選択、購入ボタンを、各ブロックの初期設定で並べたものです。

v4.5.0 の変更点③ ― リンクの読み上げ名、表示速度、レイアウトの修正

ヒーローと画像ブロックのリンクに、読み上げ用の名前

新しいスニペット snippets/link-label.liquid が追加され、リンク先の種類とタイトルから、スクリーンリーダー（画面を音声で読み上げるソフト）向けの名前（aria-label）を作るようになりました。ヒーローセクション（sections/hero.liquid）と、リンクを設定した画像ブロック（blocks/image.liquid）で使われます。

{%- comment -%} snippets/link-label.liquid（抜粋） {%- endcomment -%}
case url.type
  when 'home_link'        → 「ホーム」
  when 'catalog_link'     → 「すべての商品」
  when 'collection_link'  → 「コレクション：{{ title }}」
  when 'product_link'     → 「商品：{{ title }}」
  # ページ、ブログ、記事、ポリシーも同様
endcase

たとえば「春の新作」コレクションへのリンクなら、「コレクション：春の新作」と読み上げられます。外部のURL、メタオブジェクトのページ、削除済みのリソースへのリンクでは、名前を付けません。画像ブロックでは、これまで画像の代替テキスト（alt）で読み上げられていたものが、リンク先の名前に変わります。

コレクションリストとブログ記事のカード画像の遅延読み込み

コレクションリストと、ブログ記事の一覧のカード画像は、これまで常に、すぐに読み込む指定（loading="eager"）でした。v4.5.0 では、ページの4番目以降のセクションにある場合は、画面に近づいてから読み込む指定（loading="lazy"）になります。

{%- comment -%} blocks/_collection-card-image.liquid / blocks/_featured-blog-posts-image.liquid {%- endcomment -%}
assign loading = 'eager'
if section.index > 3
  assign loading = 'lazy'
endif

あわせて snippets/resource-image.liquid で、スマートフォンの幅のときに、画像の表示サイズ（sizes）を、列数やカルーセルのカードの大きさに合わせて指定するようになりました。これまでは画面幅いっぱい（100vw）で指定していたため、2列の一覧でも、必要以上に大きな画像を取得していました。

v4.4.0 で直りきっていなかった2つのレイアウト

v4.4.0 のリリースノートに載っていた修正のうち2つは、v4.5.0 で、範囲を広げて改めて修正されています。

v4.4.0 の振り返り

v4.4.0 は修正が約30項目と多めの更新でした。詳しくは v4.4.0 アップデート解説 にまとめていますが、日本のストアで特に関係するのは次の3つです。

• 「チェックアウトに進む」が、数量の保存を待つ：カートの数量を入力してすぐチェックアウトを押すと、iOSのSafariで保存の通信が取り消され、無言で失敗することがありました。v4.4.0 では、保存の完了を待ち、数量が拒否されたら、その行にエラーを表示します。
• 予測検索に未対応の言語で、検索窓が空白になる不具合の修正：リリースノートの例はアラビア語とヘブライ語ですが、日本語も予測検索の対応言語に含まれておらず、検証用ストアで、候補の取得が HTTP 417 のエラーで返ることを確認しました（2026年11月）。v4.4.0 では、417を受け取ったら候補の取得をやめ、検索窓の既定の表示を保ちます。
• 「分割払い」設定の名称変更：価格ブロックとカートの設定の「分割払い」が「Shop Payの決済オプションを表示する」に変わりました。設定のIDは show_installments のままで、保存済みの値は引き継がれます。

このほか、ブログ記事の本文の画像が横幅いっぱいに引き伸ばされる不具合の修正、手数料（Fees、アーリーアクセス）をカートの税・送料の案内文に含める対応、モバイルのメニュードロワーの「区切り線の色」の設定の追加などが含まれます。

v4.3.0 の振り返りと、公式リリースノートで分かったこと

v4.3.0 の記事は、公式リリースノートが v4.2.0 のままだった時点で、コードの差分だけを手がかりに書いたものです。その後、公式リリースノートが公開され、差分だけでは読み取れなかった意図や、記事で取り上げていなかった修正が分かりました。

このほか、iPhoneのカルーセルで、商品カードやクイック追加を2回タップしないと反応しない不具合、モバイルで検索・メニュー・カートを開いている間にスティッキーヘッダーが消える不具合なども、v4.3.0 で修正されています。

v4.3.0 で受取の表示の判定が直り、v4.5.0 で実店舗の在庫表示が加わったことで、商品ページの「店舗の在庫」の欄は、この2回の更新で大きく変わることになります（実店舗の表示は、2026年11月12日時点では、まだ表示されません）。

アップデート手順

安全カスタマイズ記事で構築した upstream/horizon ブランチ運用を使っている場合は、これまでと同じ手順です。管理画面の対象テーマから「コードを編集 → ダウンロード」で最新版のファイル一式を取得し、このブランチにまるごと反映して、horizon-v4.5.0 のタグを打って管理します。v4.2.0 から一度に上げる場合も、手順は同じです。途中のバージョンのタグがなくても、v4.2.0 と v4.5.0 のタグの差分で、3回分の変更をまとめて確認できます。

まとめ

v4.2.0 → v4.5.0 はアップデート推奨です。多くの修正は、ストア側の操作なしで効きます。更新後に見ておきたいのは、次の4点です。

• 商品ページの店舗の在庫の欄：2026年11月12日時点では、実店舗の在庫は表示されない。ただし、ロケーションの「実店舗」をオンにしている店舗があり、店舗の在庫を案内したくない場合は、Shopify 側の提供開始に備えて、購入ボタンのブロックの「実店舗を表示」をオフにしておく（v4.5.0）
• クイック追加：商品テンプレートをカスタマイズしている場合、ポップアップが正しく開き、見え方に問題がないか（v4.5.0）
• カートの数量入力 → すぐチェックアウト：在庫を超える数量などで、行にエラーが出て、カートに留まるか（v4.4.0）
• カートのメモ欄：使っている場合、入力したメモが、注文に反映されるか（v4.3.0）

今回の3回の更新は、カート、受取・店舗の在庫、クイック追加と、購入の直前の部分に修正が集中しました。いずれも、テーマエディタの画面では気づきにくく、実際に操作してみて初めて分かる類の変更です。更新を見送っていたストアは、3回分をまとめて取り込み、上の4点を、プレビューで実際に操作して確認するとよいでしょう。

テーマのファイル構成は、バージョンごとに変わりうるため、「どこを触ったか」を常に把握できるGit管理（upstream/horizon ブランチでのオリジナル追跡）が、こうした更新の積み重ねでも効いてきます。