Headless Storefronts (Hydrogen and Custom)

Add Bird to any storefront (Hydrogen, React, Vue or plain HTML). It uses your Bird settings, so there’s nothing to configure in code.

See it running: live demo storefront.

Install

Step 1: Add the widget

Paste this where the widget should appear, with your store’s *.myshopify.com domain:

<link rel="stylesheet" href="https://cdn.birdchime.com/widget/bird.bundle.css">
<script>window.BirdApp = { config: { shop: 'your-store.myshopify.com' } };</script>
<script src="https://cdn.birdchime.com/widget/bird.bundle.js" defer></script>

<div id="bird-cart"></div>
<script type="module">
  window.bird = await BirdApp.widget.mount(document.getElementById('bird-cart'));
</script>

Step 2: Pass your cart

Give Bird your Storefront API cart, as-is, once the widget is mounted and again every time the cart changes:

BirdApp.sdk?.setCart(cart);

Step 3: Stop checkout until a slot is picked

In your checkout button’s click handler:

if (bird?.reportValidity() === false) event.preventDefault();

That’s it. Everything below is optional.

Configuration

Only shop is required. Your settings, translations and availability rules load automatically.

Optional

Hydrogen / React example

Drop this component where the widget should appear:

function BirdCartWidget({ cart }) {
  const ref = useRef(null);

  useEffect(() => {
    const bird = window.BirdApp?.widget.mount(ref.current);
    return () => bird?.then((b) => b?.destroy());
  }, []);

  useEffect(() => {
    window.BirdApp?.ready?.then((sdk) => sdk?.setCart(cart));
  }, [cart]);

  return <div ref={ref} />;
}

Product page widget

Mount it into any element on your product page:

await BirdApp.widget.mount(el, { type: 'product', item: { variantId } });

Mount it again when the customer switches variants. A choice made on the product page carries into the cart.

Express checkout buttons

Gate Shop Pay, PayPal and Apple Pay buttons with the same line from Step 3.

For reading the customer’s choice and events, see the Widget API Reference.

Related Articles

• Developer Overview
• Widget API Reference