Shopify Horizon v4.4.0 アップデート解説 ― チェックアウト前の数量保存、予測検索の未対応言語、「分割払い」設定の名称変更

Shopify公式テーマ「Horizon」が v4.3.0 から v4.4.0 に進みました。本記事では、公式リリースノートと、コードの差分を突き合わせながら、v4.3.0 から v4.4.0 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。

前回の「v4.3.0 アップデート解説」はカートの個数表示とメモ欄の修正が中心でしたが、今回は修正が約30項目と、近年のアップデートの中でも多めです。目玉は、「チェックアウトに進む」ボタンが数量の保存を待つようになったこと、予測検索に未対応の言語で検索窓が真っ白になる不具合の修正、そして「分割払い」設定の名称変更の3つです。

変更サマリー ― 「118ファイル変更」の中身

差分は 118ファイル変更 でした。ただし、そのうち 83ファイルは言語ファイル（locales/） で、新しく13言語のファイルが追加されたことと、既存の言語の文言の追加によるものです。テーマの動作に関わるのは、残りの35ファイル（JavaScript 14、Liquid 20、CSS 1、設定 1）です。

ストア運営者が気にすべき変更は、大きく次の通りです。

順に解説します。

変更点① ― 「チェックアウトに進む」が、数量の保存を待つようになった

カートの数量欄は、入力してから少し待って、Ajax（ページを読み込み直さない通信）で保存される作りです。このとき、保存の完了前に「チェックアウトに進む」を押すと、フォームの送信と保存の通信が同時に走ります。リリースノートには、「Check out now waits for a pending quantity save, so a rejected quantity shows its message in place of a silent failure.」（チェックアウトは、保存待ちの数量の保存を待つようになり、数量が拒否されたときは、無言で失敗する代わりに、メッセージが表示される）と書かれています。

コード内のコメントによると、数量の保存の通信と、フォームの送信が同時にあると、iOSのSafariが保存の通信を取り消し、ストア側は、ページもメッセージも返さずに、送信に応答してしまうことがあったようです。今回、assets/component-cart-items.js に、送信を一度止めて、保存の完了を待ち、問題がなければ送信をやり直す処理が加わりました。

// assets/component-cart-items.js に新設
holdCheckoutForQuantitySave = async (event) => {
  // ...数量を編集中の欄が2行以上あるときは、待たずに送信（全部の入力値を送るため）
  blurred?.blur();
  this.#debouncedOnChange.flush();   // 保存待ちを、いますぐ実行する

  let pending = CartItemsComponent.pendingQuantityUpdates;
  if (!pending.length) return;
  event.preventDefault();            // 送信を止める
  // ...保存の完了を待つ
  if (rejected) { /* 数量が拒否された: 行にエラーを出し、カートに留まる */ return; }
  button?.click();                   // 問題がなければ、送信をやり直す
};

カートのフォーム（snippets/cart-products.liquid）に、送信時にこの処理を呼ぶ指定（on:submit="/holdCheckoutForQuantitySave"）が加わり、assets/utilities.js の debounce には、待っている処理を今すぐ実行する .flush() が追加されています。

変更点② ― 予測検索に未対応の言語で、検索窓が空白になる不具合の修正

予測検索（入力中に候補が出る機能）には、対応している言語の一覧があり、一覧にない言語では、候補を取得する通信が、HTTP 417のエラーで返ります。リリースノートには、アラビア語とヘブライ語が例に挙げられていますが、日本語も、この一覧に載っていません。実際に、日本語を主言語にしている検証用ストアで、候補の取得を試したところ、417のエラーが返りました（2026年11月）。

これまでは、そのエラーのとき、検索窓の中が空白になり、入力中の表示が真っ白になる動きでした。今回、assets/predictive-search.js で、417を受け取ったら、その言語は未対応とみなして、以降は候補を取得せず、検索窓の既定の表示を保つようになりました。Enterを押せば、通常の検索結果のページが開きます。

// assets/predictive-search.js
const UNSUPPORTED_LOCALE_STATUS = 417;

fetch(url).then((response) => {
  if (response.status === UNSUPPORTED_LOCALE_STATUS) {
    this.#predictiveSearchSupported = false;   // 以降は取得しない
    return '';
  }
  // ...
});

なお、候補の取得も、これまでのセクション再描画の仕組み（sectionRenderer）から、fetch に変わっています。日本語のストアでHorizonを使っている場合、これまでは、検索窓に入力しても、候補が出ない（または空白になる）状態だった可能性があります。更新後に、検索窓の見え方を確認しておくとよいでしょう。

変更点③ ― 「分割払い」設定の名称変更

価格ブロックと、カート周りのテーマ設定にあった「分割払い」（installments）の設定が、「Shop Payの決済オプションを表示する」（英語は「Show Shop Pay payment options」）に名前が変わり、説明文も加わりました。説明は、「利用可能な場合、Shop Payの分割払いおよび HSA/FSA バッジを表示します。」です。

// blocks/price.liquid / config/settings_schema.json
-  "label": "t:settings.installments",
+  "label": "t:settings.shop_pay_payment_options",
+  "info": "t:info.shop_pay_payment_options",

設定のIDは show_installments のままなので、保存済みの値は引き継がれます。ただし、名前が変わるため、設定画面で、探すときに戸惑う可能性があります。日本のストアでは、HSA/FSAは対象外ですが、設定の名前は共通です。

変更点④ ― 手数料（Fees）を、税・送料の案内文に含められるように

カートの「税込み。送料はチェックアウト時に計算されます」のような案内文（snippets/tax-info.liquid）に、手数料（Fees）を含める文言が加わりました。手数料の機能（アーリーアクセス）が有効なストア（cart.checkout_fees_enabled が true）では、「ディスカウント、手数料、送料はチェックアウト時に計算されます」のような文言に切り替わります。文言は、日本語を含む各言語のファイルに追加されています。

手数料の機能を使っていないストアには、影響はありません。

変更点⑤ ― モバイルのメニュードロワーに「区切り線の色」の設定

ヘッダーメニューのブロック（blocks/_header-menu.liquid）に、drawer_divider_color の設定が加わりました。「区切り線」をオンにしたときだけ表示され、モバイルのメニュードロワーの区切り線の色を変えられます。未設定のときは、これまでどおり、テーマの枠線の色になります。

変更点⑥ ― ブログ記事の画像が引き伸ばされる不具合の修正

テーマ全体のCSSで、画像（img）に width: 100% が指定されていたため、ブログ記事の本文に貼った画像が、設定した大きさや元の大きさではなく、本文の横幅いっぱいに引き伸ばされていました。今回、assets/base.css で、ブログ記事の本文の中の画像だけを、この指定から外しています。

/* assets/base.css */
img {
  height: auto;            /* width: 100% を、ここから外した */
}
img:where(:not(.blog-post-content img)) {
  width: 100%;             /* ブログ記事の本文の画像以外は、これまでどおり */
}

ブログ記事に、小さな画像を貼っているストアでは、更新後に、見え方が変わる可能性があります。

その他の変更

リリースノートの項目と、差分で確認できたコードの対応は、次のとおりです。

言語ファイルでは、新しく 13言語（ベンガル語、カタルーニャ語、エストニア語、バスク語、ガリシア語、グジャラート語、ジョージア語、ラトビア語、マラーティー語、セルビア語、タミル語、テルグ語、ウクライナ語）のファイルが追加されています。このうち、タミル語、テルグ語、ウクライナ語は、今回の差分では中身が空でした。

アップデート手順

安全カスタマイズ記事で構築した upstream/horizon ブランチ運用を使っている場合は、これまでと同じ手順です。管理画面の対象テーマから「コードを編集 → ダウンロード」で最新版のファイル一式を取得し、このブランチにまるごと反映して、horizon-v4.4.0 のタグを打って管理します。

まとめ

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

• カートの数量入力 → すぐチェックアウト：在庫を超える数量などで、行にエラーが出て、カートに留まること。
• 検索窓：予測検索に未対応の言語（日本語を含む）で、検索窓が空白にならないこと。
• テーマ設定の「分割払い」：名前が「Shop Payの決済オプションを表示する」に変わっていること（値は引き継がれる）。

今回のアップデートは、予測検索の未対応言語、右から左へ読む言語（RTL）のスライドショー、AndroidのBackボタンなど、日本以外の言語・環境への対応が目立ちました。一方で、日本語のストアでも、検索窓の空白のように、実は影響を受けていた不具合が含まれています。リリースノートを読むときは、自分のストアの言語や環境で、起きていた現象に当てはまるかを、確認する目線が役に立ちます。

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