Loading overlay

The loading overlay is a UI component designed to visually indicate that something is loading or in progress on the page - such as the content being fetched, a page transition, or a background process. In this implementation, it’s a reusable block that can:

• Display a custom loading image defined in the theme settings.

• Fall back to a simple animated placeholder if no image is provided.

• Be conditionally shown or hidden based on a setting loading appearance.

This loading overlay is built using Liquid (Shopify's templating language) and rendered in HTML.

Overview

Settings	Type	Description
Image	image_picker	Upload or select an image to show in the loading overlay (e.g., logo, spinner).
Image width	range	Controls the width of the loading image.
Background	color	Choose the background color for the overlay.
Appearance	select	Controls when the loading overlay appears. Options: First load, Always, Never.