Loading overlay
Last updated
Last updated
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.
The following values come from your theme settings:
Image: A custom image used as the loader.
Image width: Sets the display width of the image.
Appearance: Controls when or whether the loader should appear.
