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
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.
Last updated