[Horizon] Add a Back to Top Block to Your Footer

Add a "Back to top" floating button to your Horizon footer as a theme editor block. It's implemented as a private block scoped to the footer section, so it won't appear in other sections' add-block menus. Color, size, icon thickness, shadow, position, and shape are all configurable from the theme editor.

How it works

You add a new private block blocks/_back-to-top.liquid and register it in the footer section's (sections/footer.liquid) blocks array, which makes it appear in the theme editor's "Add Block" menu. Private blocks (filename prefixed with _) are scoped to the footer only, so they don't appear in other sections.

The footer's .footer-content has contain: content, which makes any position: fixed descendants positioned relative to .footer-content instead of the viewport. To work around this, the block's JavaScript moves the button to document.body on initialization, restoring viewport-relative positioning.

Files to add or modify

Line numbers are based on the vanilla Horizon theme (v3.5.1).

Steps

1. Shopify admin → Themes → Edit code
2. Create _back-to-top.liquid in the blocks/ folder and paste the downloaded code
3. Open sections/footer.liquid and add {"type": "_back-to-top"} to the blocks array in the schema
4. Add the translation keys to locales/ja.schema.json and locales/en.default.schema.json
5. Open the theme editor, go to the footer section, click "Add block" → "Back to top"
6. Customize color, size, icon thickness, shadow, position, and shape

File to add: blocks/_back-to-top.liquid

Paste the entire code as a new file. The first half is the template/style/script, and the second half is the schema definition.

File to modify: sections/footer.liquid

Add _back-to-top to the blocks array in the schema, between @app and button (lines L105–L107).

Files to modify: locales/ja.schema.json / locales/en.default.schema.json

Add the same translation keys to both locale files so the theme editor labels are localized correctly. Three sections need updating: names, settings, and content.

Block settings

Notes

• Private block (filename starts with _): The file must be named _back-to-top.liquid. Without the leading underscore, the type reference {"type": "_back-to-top"} in sections/footer.liquid won't match.
• All four files must be modified: The block file alone won't work. You need to register it in footer.liquid and add the translation keys to both locale files.
• Theme update impact: If sections/footer.liquid or locales/*.schema.json are updated by future Horizon releases, you'll need to re-apply your additions.
• vector-effect: non-scaling-stroke: This SVG attribute makes the stroke width independent of the icon size. So even at icon_size 20px, a thickness of 1px renders as 1 actual pixel.
• JS teleports the button to document.body: Because .footer-content has contain: content, position: fixed would normally be relative to the footer instead of the viewport. The script moves the button out to escape this containment.