Firebase-Backed Wishlist in Hydrogen: A Developer’s Guide

Introduction

Merchants love wishlists — but most Shopify wishlist apps are built for Liquid themes and rely on DOM injection. In Hydrogen, the better approach is to build a custom wishlist microservice.

This guide shows how to implement a wishlist using Shopify’s Customer Account API + Firebase Functions + Oxygen JWT signing.

Why Build Instead of Buy?

• ❌ Many wishlist apps break in Hydrogen (DOM assumptions).
• ❌ Monthly fees ($300–$500/mo for enterprise plans).
• ✅ Custom build = API-first, secure, edge-safe.
• ✅ Extensible → can tie into loyalty, email, or personalization.

👉 Building with Firebase is faster and cheaper long-term.

Architecture

1. Customer Identity → Shopify Customer Account API.
2. Wishlist CRUD → Firebase Functions (add/remove items).
3. Secure Bridge → JWT signed in Oxygen worker.
4. Data Store → Firestore (real-time sync).
5. UI → React components in Hydrogen (add/remove buttons).

Implementation Steps

1. Authenticate Users

• Use Shopify Customer Account API for identity.
• Session verified via JWT signed in Oxygen (edge-safe).

2. Build Firebase Functions

exports.addToWishlist = functions.https.onCall((data, context) => { const { customerId, productId } = data; return db.collection('wishlists').doc(customerId).set( { items: admin.firestore.FieldValue.arrayUnion(productId) }, { merge: true } ); });

3. Connect to Hydrogen UI

• Add “Add to Wishlist” button.
• Call Firebase Functions with JWT.
• Update UI state with Firestore real-time listener.

4. QA & Testing

• Prefill SSR with wishlist state for logged-in users.
• Use Playwright to test add/remove flows across browsers.

Case Example: DTC Brand

• Swapped $500/mo wishlist app for Firebase-backed microservice.
• Added SSR prefill → wishlists appear instantly on login.
• QA with Playwright ensured stability across devices.
• Outcome: saved $6K/year, faster page loads, zero app conflicts.

Guardrails

• ✅ Always sign JWTs in Oxygen (not client).
• ✅ Cache wishlist data in Firestore with expiration.
• ✅ SSR wishlist state → avoid client-only fetches.
• ✅ Maintain automated tests (Playwright) to avoid regressions.

Conclusion

In Hydrogen, the best wishlist isn’t an app — it’s a microservice. Using Shopify’s Customer API + Firebase, developers can build secure, scalable wishlists that integrate directly into modern storefronts.

Stop hacking widgets. Start building microservices.