Horizonテーマのフッターに「ページのトップに戻る」フローティングボタンを、テーマエディタから追加できるブロックとして実装する方法です。プライベートブロックとして実装するためフッター以外のセクションには表示されず、色・サイズ・アイコンの太さ・シャドウ・位置・形状などをエディタから自由に設定できます。
仕組み
新規にプライベートブロック blocks/_back-to-top.liquid を追加し、フッターセクション（sections/footer.liquid）の blocks 配列に登録することでテーマエディタの「ブロックを追加」メニューに表示されるようになります。プライベートブロック（ファイル名先頭の _）はフッター専用となり、他のセクションのブロック追加メニューには現れません。
フッターの .footer-content には contain: content が指定されており、その内部の position: fixed 要素は viewport ではなく .footer-content に固定されてしまいます。これを回避するため、ブロック内のJavaScriptで初期化時にボタンを document.body 直下に移動させ、本来の意図通り画面の固定位置にフローティングさせています。
追加・修正するファイル
| ファイルパス | 操作 |
|---|---|
blocks/_back-to-top.liquid |
新規作成（全248行） |
sections/footer.liquid |
L105〜L107 に追記（schema の blocks 配列） |
locales/ja.schema.json |
names / settings / content の3セクションにキー追加 |
locales/en.default.schema.json |
names / settings / content の3セクションにキー追加 |
※ 行数表記は素のHorizonテーマ（v3.5.1）基準です。
手順
- Shopify管理画面 → テーマ → コードを編集
-
blocks/フォルダに_back-to-top.liquidを新規作成し、購入後のコードを貼り付ける -
sections/footer.liquidを開き、schema内のblocks配列に{"type": "_back-to-top"}を追記 -
locales/ja.schema.jsonとlocales/en.default.schema.jsonにそれぞれ翻訳キーを追加 - テーマエディタを開き、フッターセクションで「ブロックを追加」→「ページのトップに戻る」を選択
- 色・サイズ・アイコンの太さ・シャドウ・位置・形状を調整
追加するファイル: 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ヶ所への追記が必要です。
設定項目（テーマエディタ）
| セクション | 設定項目 | 範囲・デフォルト |
|---|---|---|
| 色 | ボタンの背景色 | #EEEEEE |
| アイコンの色 | #000000 | |
| サイズ | ボタンのサイズ | 30〜100px / 60 |
| アイコンのサイズ | 10〜50px / 30（ボタンサイズと独立） | |
| アイコンの太さ | 1〜10px / 6 | |
| シャドウ | 影の色 | #000000 |
| 影の不透明度 | 0〜100% / 15 | |
| 影のぼかし | 0〜30px / 8 | |
| 影の垂直オフセット | 0〜20px / 2 | |
| 動作 | 表示開始のスクロール量 | 0〜1000px / 100 |
| レイアウト | 位置 | 右下 / 左下 |
| シェイプ | 円 / 正方形 |
注意事項
-
プライベートブロック（先頭が
_）：ファイル名は_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に移動させています。
