StagingButton.liquid

Purpose

StagingButton.liquid provides a staging/development helper UI (a β€staging buttonβ€) that is rendered globally by the theme layout.

Its main goal is to help developers or content editors in non-production environments by exposing quick actions or indicators, such as:

identifying that the user is on a staging environment

providing shortcuts to debug tooling

offering fast navigation or toggles used during QA/testing

This is a theme utility and not part of the storefront's core UX.

Where it's used

StagingButton.liquid is rendered near the end of the <body> by the main layout:

Structure/LayoutA.liquid

Example usage:

{% render 'Structure\\StagingButton' with Root as model %}

Because it is included in the layout, the staging button is available across all pages rendered with LayoutA.liquid.

Inputs

The layout passes:

Root as model

So StagingButton.liquid can access any relevant information available on Root (environment flags, user info, page info, etc.) to decide whether to render or hide the button.

Output

The template outputs:

a small piece of UI (button/panel)

optionally associated script hooks (if the staging UI requires client-side behavior)

When it should appear

Typically, a staging helper should appear only in staging/dev environments

Exact rules depend on your platform/environment configuration.

If the staging helper is visible in production, it should be reviewed to ensure it does not expose debug functionality or sensitive information.

Recommendations

Environment gating: ensure the staging UI is properly gated (staging-only or role-based).

No sensitive data: avoid printing secrets or internal URLs to the page.

Keep it lightweight: don't add heavy scripts here; keep it minimal and non-intrusive.

Don't break layout: the staging UI should be positioned safely (e.g. fixed corner) and not affect page flow.

StagingButton.liquid

Purpose#

Where it's used#

Inputs#

Output#