Building a Smooth Blurry Loading Effect for Images in Shopify Hydrogen

Let's build a smooth blurry loading effect for images in Shopify Hydrogen! This creates a nice blur-to-sharp transition while images load, making your store feel more polished.

You can see this effect in action in all pages at pilot.weaverse.dev.

Setting Up the Base Component

We'll extend Shopify Hydrogen's built-in Image component to leverage the types. Here's the basic structure:

This interface extends the standard img props while adding Shopify-specific options. The crop prop lets you control how images are cropped, and srcSetOptions helps with responsive images.

Managing Loading State

The key is tracking when the image finishes loading:

In details:

• hydrogenImageRef - Direct access to the actual img element inside Hydrogen's Image component
• loaded state - Tracks whether our image has finished loading
• useEffect - Handles cases where the image is already cached and loads instantly
• onLoad handler - Updates the state and calls any parent onLoad handler

Creating the Visual Effect

Here I'm leveraging Tailwind CSS's blur filer utility to create the loading effect, and the transition for smooth transitions.

Using Your New Component

Here's how you'd use this in your Hydrogen store:

The image data should come from your storefront API, typically it should include width, height, altText and url properties.

Wrapping Up

And that's it! You now have a smooth, professional image loading experience that will make your Shopify Hydrogen store feel more polished.

Here's the complete component code for reference:

Check out the live example at pilot.weaverse.dev to see how it all comes together!

Happy coding!