Bird Now Works on Shopify Hydrogen and Headless Storefronts
Explore with AI
Get AI-powered insights from this article
Bird Pickup & Delivery now works on Shopify Hydrogen and other headless Shopify storefronts, including React, Next.js, Vue, Remix, Astro, and custom JavaScript builds. One script and one mount call put the full pickup and delivery scheduler in front of your customers. And Bird is the first Shopify pickup and delivery scheduling app to offer a dedicated headless widget for Hydrogen and custom storefronts instead of relying on theme app embeds. It already powers scheduling for 7,000+ Shopify merchants in 60+ countries; now the same scheduler runs where Liquid theme apps can't.
That matters because until now, going headless meant losing pickup and delivery scheduling. The pickup and delivery date picker inside the Shopify theme had nowhere to load. Checkout still worked. Customers could buy, but they couldn't choose a pickup date or delivery time anymore. Here's what changed.
The One-Script Headless Setup
Bird brings Shopify pickup and delivery scheduling to any headless Shopify storefront in three steps.
- Install Bird from the Shopify App Store and configure your locations, schedules, and delivery zones.
- Add one script and one mount call to your storefront code.
- Your rules load automatically. Dates, time slots, translations, and availability sync from your store.
What is a headless Shopify storefront, and why do brands build on Hydrogen?
A headless build separates the storefront your customers see from the Shopify backend that runs your products, inventory, and checkout. Instead of a theme, your team builds the front end as its own application and pulls data from Shopify through the Storefront API and other Shopify APIs. Hydrogen is Shopify's React framework for this, and many brands build headless with React, Vue, Next.js, Remix, or Astro instead. Whether your storefront uses Shopify's Storefront API with GraphQL or a custom backend, Bird's headless widget works independently of your frontend framework.
Brands adopt headless commerce for speed, design control, and better frontend performance. The trade-off: apps built for Shopify themes stop working, because there is no theme anymore.
Why does pickup and delivery scheduling break on headless Shopify builds?
Nearly every scheduling app on Shopify ships its widget as a theme app embed. Shopify Hydrogen storefronts don't support theme app embeds, so the widget never loads. That works fine on a standard store; on a headless Shopify storefront, there is nothing for the embed to attach to, and the scheduler simply never renders.
After working with thousands of merchants on their scheduling setups, we know exactly where this story goes: teams discover it late in a headless Shopify migration, and every option hurts. Hand-build a date picker and recreate every rule in code. Drop scheduled fulfillment from the new storefront. Or keep a stripped-down theme running just to host one widget.
Hand-building looks manageable until you list what a scheduler enforces: order cutoffs, preparation times, blockout dates, per-slot order limits, timezones, translations. Recreate all of that and every rule lives twice, once in your scheduling app and once in your codebase. They drift. Customers book slots you can't fulfill. This is what makes Bird so useful during a Shopify Hydrogen migration: scheduling comes back without rebuilding any fulfillment logic from scratch.
How does Bird run pickup and delivery scheduling on Hydrogen, React, and Vue?
Bird loads its Shopify pickup and delivery scheduler through a lightweight JavaScript headless widget instead of a Shopify theme app embed. You add one script, bird.bundle.js, and call one mount function where you want the scheduler to appear. That's the whole integration. The same date and time picker your customers would see on a themed store renders inside your headless build.
The part that saves engineering time isn't the mount call. It's the sync. Your scheduling rules, delivery settings, translations, and availability load directly from your store. Nothing is configured twice. Your business rules stay in one place instead of being duplicated across your app and your custom storefront. Change a schedule, a blockout date, or a rate in the Bird app and your storefront updates without a code change or a deploy. Inventory and checkout stay with Shopify, scheduling stays with Bird, and your storefront pulls both from the systems your team already manages.
For teams that want deeper control, a full JavaScript SDK is baked into the widget, documented at picdel.birdchime.com/api-docs. The widget script covers the standard case; the SDK lets developers wire Bird into custom checkout flows, business logic, and headless commerce architectures while the scheduling rules stay managed inside Bird.
You don't have to take any of this on faith. Bird hosts a live demo of the headless widget that shows the scheduler mounted on a plain page, the same way it would sit inside your Hydrogen or React build. Open it, pick a date, switch between pickup and delivery, and watch the time slots update. You're looking at exactly what your customers would see. And when you start wiring the widget into your own storefront, keep that page open next to your editor: it doubles as a working reference for the integration.
Which headless storefronts does Bird support?
Bird's headless scheduler works anywhere you can load a JavaScript file and mount a component.
- Shopify Hydrogen
- React
- Next.js
- Vue
- Remix
- Astro
- Vanilla JavaScript
- Custom storefronts
Whether you're migrating from a Shopify theme or building a new headless commerce experience from scratch, the same scheduling logic works across every supported frontend, and multi-location setups behave the same way they do on a themed store. Here's how the pieces map when you move from a theme to a headless build:
| Traditional Shopify theme | Headless Shopify storefront |
|---|---|
| Theme app embed | JavaScript widget |
| Shopify theme | Hydrogen, React, Vue, Next.js |
| Theme app extension | bird.bundle.js |
| Limited frontend control | Full frontend control |
What stays in sync between Bird and your custom storefront?
| What | How it behaves on your headless build |
|---|---|
| Dates and time slots | Customers see the same available dates, cutoffs, and slots you manage in the Bird app |
| Fulfillment rules | Store pickup, local delivery, and shipping rules apply exactly as they do everywhere else |
| Translations and timezone | The widget loads your store's language and timezone with no extra configuration |
| Future changes | Update a schedule, blockout date, or rate in Bird and the storefront picks it up, no deploy needed |
Your ops team keeps managing schedules in the app they already know, and the storefront stays current on its own. Store pickup, curbside pickup, and local delivery behave exactly as they do on a themed store, and if you already rely on order cutoff times, those carry over untouched. Running at scale? The same widget pairs with Bird's Shopify Plus checkout scheduling.
One schedule for your storefront, your admin, and your POS
The sync doesn't stop at the storefront. We introduced this in the Bird app to make your life easier across the whole operation: the admin backend, the customer's cart, and your POS now show the same scheduling information. The pickup date a customer picks on your headless storefront is the same date your fulfillment team sees in the admin and the same date your counter staff sees at the register.
That sounds small until you've lived the other version. The storefront says Thursday, the packing slip says Friday, and someone at the counter promises "tomorrow" because their screen never got the update. Staff spend the morning cross-checking tools instead of packing orders, and the customer hears three different answers to one question.
With Bird there is one schedule, and every surface reads from it. The developer building your Hydrogen storefront, the manager adjusting cutoffs in the admin, and the person ringing up a pickup at the register all see the same information, so everyone stays aligned and on the same page. For a headless build this matters twice over: you just added a custom surface to your stack, and it stays as consistent as the ones Shopify runs for you.
FAQs
Can pickup and delivery apps work on Shopify Hydrogen?
Most Shopify pickup and delivery apps can't, because they rely on theme app embeds and Hydrogen has no theme. Bird is the first to solve this: its widget runs on Shopify Hydrogen storefronts with one script and one mount call, and your settings, translations, and availability rules load automatically.
Why don't Shopify theme app embeds work on Hydrogen storefronts?
Theme app embeds render inside a Shopify theme. A Hydrogen storefront replaces the theme with a custom front end, so there is nothing for the embed to attach to and the app never loads.
Does Bird require Shopify theme app embeds?
No. Bird's headless widget does not rely on Shopify theme app embeds. It loads through one script with a JavaScript SDK built in, which makes it compatible with Shopify Hydrogen and other custom storefronts.
Do delivery rules stay in sync between Bird and a custom storefront?
Yes. Rules are managed once in the Bird app and load into the headless Shopify storefront automatically. When you change a schedule, blockout date, or rate, the storefront picks it up without a code change.
How do I add pickup and delivery scheduling to a headless Shopify store?
Install Bird from the Shopify App Store, configure your locations and schedules, then add the bird.bundle.js script and one mount call to your storefront code. The scheduler renders with your store's rules, so nothing is duplicated between Shopify and your custom build.
Does Bird support React, Next.js, Vue, Remix, and custom JavaScript storefronts?
Yes. Hydrogen, React, Vue, Next.js, Remix, Astro, and vanilla JavaScript storefronts all work. If your front end can load a script and call a mount function, it can run the scheduler.
Is Bird compatible with Shopify Storefront API?
Yes. Bird works alongside Shopify's Storefront API and Hydrogen storefronts. Products, carts, inventory, and checkout continue using Shopify while Bird provides pickup and delivery scheduling through its JavaScript widget and built-in SDK.
Is there a live demo of the Bird headless widget?
Yes. Bird hosts a demo at cdn.birdchime.com/widget/demo that runs the scheduler outside a Shopify theme. You can test dates, time slots, and fulfillment types there before adding the script to your own build, and use the page as a reference while you integrate.
Does my staff see the same schedule in the admin, cart, and POS?
Yes. Bird shows the same scheduling information across the admin backend, the cart, and POS. Your storefront, your back office, and your counter staff all work from one schedule instead of three copies of it.
Do I need the SDK to use Bird on a headless build?
No. The widget script handles the standard integration on its own. For custom behavior, a full JavaScript SDK is baked into the widget.
Bring scheduling to your headless storefront
Whether you're launching a new Hydrogen storefront or migrating an existing Shopify store to headless commerce, Bird lets you keep the same pickup and delivery scheduling rules without rebuilding them for your frontend. Install Bird Pickup & Delivery, add the script to your storefront, and your delivery date picker is back in front of customers with every rule intact.
The full setup guide walks you through setup in 7 steps. Try Bird free for 14 days.
Ready to streamline your pickup and delivery?
Start your 14-day free trial and see how Bird can transform your Shopify store.
Start Free Trial