Shopify新テーマ「Horizon」を安全にカスタマイズする方法

Shopify新テーマ「Horizon」を安全にカスタマイズする方法

Shopify公式のGrowth Servicesで昨年の11月に公開されたHorizonテーマの安全なカスタマイズガイドでは、アップグレード可能性を維持しながらカスタマイズを行うための体系的なアプローチが紹介されています。

ここでは、そのガイドの要点を整理しつつ、実務でストアテーマを管理・運営する立場としての観点から「どこまでやるべきか」「何を優先すべきか」について個人的な見解を交えながら解説してみたいと思います。

根本にある考え方：「ベンダーファイルを触らない」

公式ガイドが一貫して主張しているのは、テーマのオリジナルファイル（ベンダーファイル）を直接編集しないという原則です。この方針を守ることで、自分のカスタムファイルが影響を受けることなく、最新テーマの機能を反映することができます。

6段階のカスタマイズフェーズ

公式ガイドでは、カスタマイズを6つのフェーズに分けて段階的に進めることを推奨しています。

フェーズ0：準備と基準設定

カスタマイズを始める前に、以下の準備を行います。

  • GitHubとテーマを接続し、upstream/horizon（オリジナル追跡用）とmain（カスタマイズ用）のブランチを構築
  • Theme Checkの設定
  • 変更ログ（docs/changes.md）の作成

ここで提案されている方法はGitHubによるバージョン管理を前提としていますが、一般的なストアでそのような管理をされているところはほとんど無いかと思います。ただ、一度この管理方法に移行すると、その利便性の高さに感動します。よくありがちな、いつ誰が触った問題や不具合発生時に以前の状態にロールバックできる機能など様々な恩恵があります。これを機に、GitHub管理に移行してみるのも良いでしょう。

なお、公式ガイドでは「upstreamブランチを作成する」とだけ書かれていますが、このブランチの作り方を間違えると、後のアップグレード運用が破綻しますので、実際にいくつかの方法を試した結果、以下の方針に落ち着きました。

推奨するブランチ構成

ブランチの作り方にはいくつかパターンがありますが、手法を誤るとマージ時に問題が起きます。そこで実際に運用してみて、upstream/horizon をorphanで1回だけ作成し、以降はこのブランチにコミットを積み重ねる方法が良いと判断しました。

やり方パターン 初回 2回目以降 マージ時の問題
毎回orphanブランチを新規作成 orphan orphan 共通祖先がないため全ファイルが新規追加扱いになり膨大な差分が毎回発生する
mainからブランチを切って中身を入れ替え mainから分岐 mainから分岐 Gitが「custom.*を意図的に削除した」と解釈しカスタムファイルが消えてしまう危険性がある
orphanは初回のみ、以後は同じブランチに積み重ね ✅ orphan 同じブランチに上書きコミット 変更分だけがマージされる（最小差分）

ポイントは3つです。

  • ブランチは upstream/horizon の1つだけ。バージョンごとに毎回新しいブランチは作らない（前述の公式ガイドでは upstream/horizon-vX.Y.Zのようにバージョンごとにブランチを作成するように記載されていますが、そうはせずに常に１つのブランチの中身を更新していきます）
  • バージョンの区別はタグ（upstream/v3.2.1、upstream/v3.3.1）で管理
  • 履歴が繋がっているので、Gitが「v3.2.1 → v3.3.1で何が変わったか」を正しく差分計算でき、mainへのマージも変更分だけになる

フェーズ1：カスタムCSS/JSのグローバル読み込み

snippets/custom.globals.liquid というファイルを作成し、カスタムCSSやJSの読み込みをここに集約します。layout/theme.liquid への変更はこの1行のインクルードだけに留めます。

layout/theme.liquid に追加する1行：

{%- render 'custom.globals' -%}

snippets/custom.globals.liquid の中身：

<link
  href="{{ 'custom.css' | asset_url }}"
  rel="stylesheet"
>
<script
  src="{{ 'custom.js' | asset_url }}"
  type="module"
  fetchpriority="low"
></script>

このスニペットが custom.css と custom.js をアセットから読み込みます。今後カスタムで読み込むファイルが増えても、このスニペットに追記するだけで済みます。

レイアウトファイルへの変更を「1箇所だけ」に絞りつつ、その先のsnippetsファイルの中でcustom.cssやcustom.jsを読み込ませる形となりますので、煩雑にならず対象のファイルを一元管理できます。

フェーズ2：テーマ設定とメタフィールドの活用

ハードコーディングを避け、テーマ設定（settings_schema.json）やメタフィールドで動的にデータを管理します。色・間隔・機能のON/OFFなどはテーマエディタから変更できるようにします。

Horizonを扱う上で可能な限りコードはいじらず、セクションやブロックの設定でカスタマイズを行い、動的な値はメタフィールドの値を参照させる、という方法が強く推奨されています。ただ、該当する設定項目が無かったりする場合もあるので、ここは時と場合によるかなと思われます。

フェーズ3：カスタムセクションの作成

独自のカスタムセクションを作成する場合、ベンダーのセクションファイルを編集する代わりに、custom. プレフィックス付きのセクションを新規作成します。

  • sections/custom.main-product.liquid … カスタム版を作成
  • templates/product.json … カスタム版を参照するよう変更

ベンダー版はそのまま残しておくことで、いつでも元に戻せるようにしておきます。

この方法は理想的ですが、ベンダー版のセクションをまるごとコピーしてカスタム版を作る場合、結局アップデート時にベンダー版の変更点を自分のカスタム版にも反映する作業が発生します。そのあたりの手間がどれだけ発生するかは、テーマの更新内容次第なのでなんとも言えないところですが、過度にカスタムセクションを作りすぎない方が良い、とは言えそうです。

フェーズ4：計測タグや外部ツールの入れ方

GA4やGoogle広告の計測タグ、チャットツールなど、外部サービスのコードをテーマに追加したいケースは多いと思います。従来は theme.liquid に直接コードを貼り付けるのが一般的でしたが、この方法だとテーマをアップデートするたびに貼り直しが必要になったり、コンフリクトの原因になります。

今のShopifyには、テーマファイルを触らなくても外部サービスを導入できる仕組みがいくつか用意されています。テーマを触らないので、アップデートしても設定が消えることがなく、テーマを切り替えてもそのまま使い続けられます。

導入方法の選び方（上から順に試す）：

  1. 公式の連携アプリがあるならそれを使う ― コードを書く必要がなく、最も安全で簡単な方法です
  2. なければ「カスタムピクセル」でコードを登録する ― Shopify管理画面の「顧客イベント」から設定でき、テーマとは別の安全な場所で動くのでテーマに影響しません
  3. それでもダメなら最終手段として custom.globals に書く ― テーマファイルを使うことになるため、アップデート時に注意が必要です

Googleタグを例にすると：

Googleの計測タグはストアで最も一般的なスクリプトですが、現状の導入方法は以下のように整理できます。

  • Google & YouTubeアプリ ― GA4・Google Adsのタグはこの公式アプリで対応できる（GTMではない）
  • カスタムピクセル ― GTMコンテナをサンドボックス内で動かす方法（Googleとしては公式サポートではないが、広く使われている）
  • theme.liquid への直接埋め込み ― 従来の方法（非推奨化が進んでいる）

なお、Google自身のヘルプページでも、GTMをGoogle & YouTubeアプリ経由で設定することはできないと明記されており、GTMコンテナ内で動かしているGoogleタグはアプリ側に移行するよう案内されています。

GA4やGoogle Adsのタグであれば、まずGoogle & YouTubeアプリで対応するのが最も安全です。GTMを使いたい場合はカスタムピクセルが現実的な選択肢ですが、Google公式のサポート対象ではない点は認識しておく必要があります。いずれにしても、theme.liquidへの直接埋め込みは非推奨とのことなので、従来行っていたテーマファイルに直接GTMのタグを記載する方法は、Horizonでは避けた方が良さそうです。

フェーズ5：スタイリング戦略

  • assets/custom.css にカスタムスタイルを集約
  • ベンダーCSSは直接編集しない
  • CSS変数を活用してスコープを限定

フェーズ6：アクセシビリティとパフォーマンスの確認

  • Lighthouseスコア90以上を目標に
  • キーボード操作・スクリーンリーダーのテスト

LighthouseスコアはSEOに直結します。カスタマイズを加えるたびにスコアを確認し、何か不備あれば即座に元に戻せる様にしておくと良いですね。

まとめ：結局どうするのがいいのか？

ここまでの内容を、できるだけシンプルにまとめてみます。Horizonを安全にカスタマイズしながらアップデートの恩恵も受け続けるために、最低限守るべきルールは3つだけかと思います。

  1. テーマファイルはまるごとGitHubで管理する
    「誰がいつ何を変えたか」が全部記録に残ります。何か問題が起きても、いつでも前の状態に戻せるので安心です。
  2. テーマにもともと入っているファイルは直接いじらない
    デザインや機能を変えたいときは、元のファイルを書き換えるのではなく、自分専用のファイル（custom.css など）を別途作って追加します。こうしておけば、テーマがアップデートされても自分のカスタマイズは壊れません。
  3. 追加したいCSS・JSは1つのファイルでまとめて読み込む
    自分で追加したファイルの読み込みは、custom.globals.liquid という1つのファイルに集約します。管理する場所が1箇所にまとまるので、何を追加したか迷子になりません。

この3つさえ守っておけば、テーマのアップデートが来ても慌てずに済みます。カスタムセクションの作成やテーマ設定の拡張といった、より高度なカスタマイズは本当に必要になってからで十分です。

「テーマは消耗品ではなく、育てていく資産」。最初にちょっとだけ仕組みを整えておくことが、長期的なストア運営の安定につながります。

Back to blog