Horizon v3.4.0アップデート解説 ― アカウント管理の刷新と単一バリアント表示の改善
2月18日、Shopify公式テーマ「Horizon」のv3.4.0がリリースされました。
前回の記事「Shopify新テーマ『Horizon』を安全にカスタマイズする方法」では、テーマアップデートに備えた仕組みづくり ― upstream/horizonブランチによるバージョン管理 ― について解説しました。
今回は、その仕組みを実際に扱う実践編です。v3.4.0で何が変わったのかを解説しつつ、アップデートを取り込む際の判断材料をお伝えします。
v3.4.0の変更サマリー
94ファイルが変更され、差分は +1,828行 / -1,364行。数字だけ見ると大きな変更に見えますが、その多くはロケールファイル（翻訳）の更新や、ヘッダーの内部的なCSS最適化です。
今回のアップデートでストア運営者が気にすべき変更点は、大きく分けて下記の2つかなと思われます。
| 変更 | 影響範囲 | 設定変更 |
|---|---|---|
| アカウント管理方式の刷新 | アカウントのログイン・サインインUI全体 | 不要（自動で切り替わる） |
| 単一バリアント商品の表示変更 | バリアントが1つしかない商品のバリアントピッカー | 不要（自動で切り替わる） |
どちらも設定変更なしで自動的に適用されます。つまり、アップデートするだけで恩恵を受けられます。
変更点① ― アカウント管理方式の刷新
これがv3.4.0最大の変更です。
何が変わったのか
v3.3.1まで、ヘッダーのアカウントボタンをクリックすると、テーマ側で独自に実装されたポップオーバー（デスクトップ）やドロワー（モバイル）が表示されていました。「Sign in with Shop」ボタン、「Other sign in options」リンク、そして「Orders」「Profile」へのナビゲーションリンクが並ぶUIです。
v3.4.0では、これらの自前UIがすべて削除され、Shopifyが提供する <shopify-account> というWeb Componentに置き換えられました。
具体的に何が消えて、何が生まれたのか
削除されたファイル:
-
snippets/account-actions.liquid― アカウントメニューの中身（223行） -
snippets/account-button.liquid― アカウントボタン（92行） -
assets/account-login-actions.js― ログインボタンのJS（37行）
合計352行のコードが削除され、代わりに <shopify-account> タグ1つに集約されました。
何が嬉しいのか
テーマ側で認証UIを管理する必要がなくなったということは、Shopifyプラットフォーム側でアカウント周りの改善が入った際に、テーマのアップデートを待たずに自動で反映されるということです。テーマ開発者にとっても、ストア運営者にとっても、メンテナンスの負担が減ります。
<shopify-account> はShopifyが提供するWeb Componentとのことで、テーマのカラースキームやフォント設定をCSSカスタムプロパティ経由で引き継ぎます。つまり見た目の統一感は保たれたまま、実装はプラットフォーム側に移ったということになります。
カスタマイズへの影響
アカウントUIをカスタムCSS等でスタイリングしていた場合、セレクタが変わっているため確認が必要です。ただし、<shopify-account> はShadow DOMの内部で描画されるるそうなので、外部からのCSS干渉はほとんど起きません。もしアカウントポップオーバーのスタイルをカスタマイズしていた場合は、そのカスタムCSSは不要になる可能性が高いです。
変更点② ― 単一バリアント商品の表示変更
こちらは見た目に影響する変更です。
何が変わったのか
v3.3.1まで、バリアントが1つしかない商品（例：サイズがフリーサイズのみ）でも、バリアントピッカーはドロップダウン形式で表示されていました。選択肢が1つしかないのにドロップダウンUIが表示されるので、訪問者からすると選択できるように見えて、何も選択できないという違和感のある見た目になってしまっています。
v3.4.0では、バリアントが1つしかない場合、ドロップダウンの代わりにテキスト表示に切り替わります。オプション名と値がシンプルなテキストで並ぶだけの表示です。
技術的な変更内容
snippets/variant-main-picker.liquid に新しい条件分岐が追加されました:
{%- if product_option.values.size == 1 and variant_style != 'swatch' -%}
<div class="variant-option" data-testid="variant-option-single">
{{ product_option.name | escape }}
<span class="variant-option__swatch-value">
{{ product_option.selected_value }}
</span>
</div>product_option.values.size == 1（選択肢が1つだけ）の場合に、ドロップダウンのfieldsetではなくプレーンなdivでテキスト表示する、というシンプルな分岐です。
ただし、スウォッチ表示（variant_style == 'swatch'）の場合は従来通りスウォッチが表示されるとのこと。色のスウォッチは値が1つでも視覚的な情報（色見本）を伝える意味があるからだと思われます。
カスタマイズへの影響
バリアントピッカーのスタイルをカスタマイズしている場合、新しい .variant-option[data-testid="variant-option-single"] セレクタに対するスタイル調整が必要になる可能性があります。ただし、デフォルトの見た目で問題なければ対応不要です。
その他の変更
上記2つが主要な変更ですが、他にも細かな改善が含まれています:
| 変更 | 概要 |
|---|---|
| ヘッダーアクションのテキスト表示対応 | アイコン表示に加えて「テキスト」表示を選択できる新設定が追加。検索・アカウント・カートをテキストラベルで表示可能に |
| ヘッダーの透過背景の改善 | 上段・下段それぞれの透過制御が細分化。より正確なカラースキーム切替が可能に |
| プロダクトカードのサイズ設定 | 商品カードブロックに幅の設定（fit-content / fill / custom）が追加 |
| カート内商品表示の改善 |
snippets/cart-products.liquid の大幅リファクタリング |
| フッターのセマンティクス改善 |
<footer> タグで適切にラップされるように |
アップデート手順
前回の記事で構築した upstream/horizon ブランチ運用を使っている場合、手順は以下の通りです:
1. upstream/horizonブランチを更新
# 作業ブランチに移動
git checkout main
# Shopifyからv3.4.0のテーマをダウンロード
# （Shopify CLIまたは管理画面からエクスポート）
# upstream/horizonブランチに切り替えて上書き
git checkout upstream/horizon
# ダウンロードしたファイルで上書き後:
git add -A
git commit -m "Update upstream Horizon theme to v3.4.0"
git tag v3.4.02. mainブランチにマージ
git checkout main
git merge upstream/horizon3. コンフリクトを確認
カスタムファイル（custom.css, custom.js 等）で分離していれば、コンフリクトはほとんど発生しないはずです。もしコンフリクトが出た場合は、テーマ本体のファイルを直接編集していた箇所です。v3.4.0側の変更を採用し、カスタマイズはカスタムファイルに移行することをお勧めします。
4. 動作確認
特にアカウントボタンの挙動を確認してください。<shopify-account> はShopify側のコンポーネントなので、開発テーマ（shopify theme dev）でも正常に動作します。
まとめ
v3.4.0はアップデート推奨です。
大きな破壊的変更はなく、アカウント管理のプラットフォーム化という前向きな変更が含まれています。単一バリアントのテキスト表示も、ストアのUXを改善する地味ながら嬉しい変更です。
いずれも設定変更なしで恩恵を受けられるため、アップデートのハードルは低いと言えます。
今回のように、UIコンポーネントの置き換えといった大きめの改善もテーマアップデートに含まれてきます。運用中のストアでも、いつでもアップデートを取り込める状態にしておくと、こうした恩恵をスムーズに受けられます。
まだアップデートの仕組みを整えていない方は、前回の記事「Shopify新テーマ『Horizon』を安全にカスタマイズする方法」を参考に、まずはバージョン管理の仕組みづくりから始めてみてください。