【Horizon】フッターに「ページのトップに戻る」ボタンを追加するブロック

Horizonテーマのフッターに「ページのトップに戻る」フローティングボタンを、テーマエディタから追加できるブロックとして実装する方法です。プライベートブロックとして実装するためフッター以外のセクションには表示されず、色・サイズ・アイコンの太さ・シャドウ・位置・形状などをエディタから自由に設定できます。

仕組み

新規にプライベートブロック blocks/_back-to-top.liquid を追加し、フッターセクション（sections/footer.liquid）の blocks 配列に登録することでテーマエディタの「ブロックを追加」メニューに表示されるようになります。プライベートブロック（ファイル名先頭の _）はフッター専用となり、他のセクションのブロック追加メニューには現れません。

フッターの .footer-content には contain: content が指定されており、その内部の position: fixed 要素は viewport ではなく .footer-content に固定されてしまいます。これを回避するため、ブロック内のJavaScriptで初期化時にボタンを document.body 直下に移動させ、本来の意図通り画面の固定位置にフローティングさせています。

追加・修正するファイル

※ 行数表記は素のHorizonテーマ（v3.5.1）基準です。

手順

1. Shopify管理画面 → テーマ → コードを編集
2. blocks/ フォルダに _back-to-top.liquid を新規作成し、購入後のコードを貼り付ける
3. sections/footer.liquid を開き、schema 内の blocks 配列に {"type": "_back-to-top"} を追記
4. locales/ja.schema.json と locales/en.default.schema.json にそれぞれ翻訳キーを追加
5. テーマエディタを開き、フッターセクションで「ブロックを追加」→「ページのトップに戻る」を選択
6. 色・サイズ・アイコンの太さ・シャドウ・位置・形状を調整

追加するファイル: blocks/_back-to-top.liquid

新規ファイルとして全コードを貼り付けます。前半がテンプレート・スタイル・スクリプト、後半がschema定義です。

修正するファイル: sections/footer.liquid

schema の blocks 配列に _back-to-top を追加します。@app と button の間（L105〜L107）に3行を挿入してください。

修正するファイル: locales/ja.schema.json / locales/en.default.schema.json

テーマエディタのラベルを翻訳するため、両ロケールファイルに同じキーを追加します。names セクション、settings セクション、content セクションの3ヶ所への追記が必要です。

設定項目（テーマエディタ）

注意事項

• プライベートブロック（先頭が _）：ファイル名は _back-to-top.liquid です。先頭のアンダースコアを忘れると sections/footer.liquid の {"type": "_back-to-top"} と一致せず認識されません。
• 4ファイルすべての修正が必要：ブロックファイル単体では動作しません。footer.liquid への登録と、ロケールファイルへのキー追加（2言語分）まで完了させてください。
• テーマアップデートの影響：将来的に sections/footer.liquid や locales/*.schema.json がアップデートされた場合、追記した行を再適用する必要があります。
• vector-effect: non-scaling-stroke：アイコンの太さがアイコンサイズに影響されないよう、SVGに vector-effect="non-scaling-stroke" を指定しています。これによりアイコンサイズを 20px に縮めても太さ 1px が画面上で 1px として描画されます。
• JS で document.body に移動：フッターの .footer-content が contain: content を持つため、position: fixed が viewport に対してではなくフッターに対して効いてしまいます。これを回避するためボタンをbodyに移動させています。