BackToTop

Purpose

BackToTop is a theme-level floating button that appears after the user scrolls down the page, and smoothly scrolls the viewport back to the top when clicked.

It’s rendered globally from the main layout, so it’s available on all pages using Structure/LayoutA.liquid.

Where it's rendered

In Structure/LayoutA.liquid:

{% render 'Reusables\\BackToTop\\Default' %}

Inputs (Liquid render parameters)

BackToTop is rendered without parameters.

Model shape (storefront example)

Not applicable (this reusable doesn’t receive a model object and has no Liquid parameters).

Required fields

None.

Optional fields

None.

Template behavior (Liquid + Alpine)

Source: Reusables/BackToTop/Default.liquid.

Uses an Alpine data object:

<div x-data="backtotopreusabledefault">

Renders a fixed-position button at the bottom-right.

Button is shown/hidden via Alpine:

x-show="visible"

x-transition

Click handler:

@click="scrollToTop()"

Text + aria-label come from translations:

Reusables.BackToTop.Translations.BackToTopAriaLabel

Reusables.BackToTop.Translations.BackToTopText

Data contract (JS runtime)

The Alpine object is defined as backtotopreusabledefault in Reusables/BackToTop/Default.js.

State:

showAfter (number | null)

Scroll threshold (in pixels) after which the button becomes visible.

visible (boolean)

Bound to x-show.

JavaScript

Source: Reusables/BackToTop/Default.js.

`init()`

Computes a default threshold if showAfter is not set:

this.showAfter = window.innerHeight / 3;

Registers a passive scroll listener that toggles visibility:

this.visible = window.scrollY > this.showAfter;

`scrollToTop()`

Smoothly scrolls to the top of the page:

window.scrollTo({ top: 0, behavior: "smooth" });

Global Alpine stores

None.

Services / API calls

None.

Dependencies

Reusables/BackToTop/Default.liquid

Reusables/BackToTop/Default.js

Reusables/BackToTop/Default.json (translations)

Structure/LayoutA.liquid (render site)

Notes

Because it is rendered from LayoutA, it’s present across the entire storefront (unless the layout changes).

If you need the button to appear earlier/later, the JS supports adjusting showAfter (it’s a property on the Alpine object). Currently there’s no Liquid parameter that sets it.

Examples

Global render (Layout):

{% render 'Reusables\\BackToTop\\Default' %}

BackToTop

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

JavaScript#

init()#

scrollToTop()#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#

Purpose

Where it's rendered

Inputs (Liquid render parameters)

Model shape (storefront example)

Required fields

Optional fields

Template behavior (Liquid + Alpine)

Data contract (JS runtime)

JavaScript

`init()`

`scrollToTop()`

Global Alpine stores

Services / API calls

Dependencies

Notes

Examples