registry-button

How it works

The shopper clicks the button on your product page. A small Birch window opens on top of your store.
They confirm the item. The title, photo, price and variant come from your page. If they aren't signed in to Birch, they sign in or create a registry first and land right back on the same item.
It's saved to their registry with a link to your product page. They can check it right there, change the quantity, priority, note or photo, or undo the add. Then the window closes and they keep shopping on your site.

1. Add the script

Paste this once on every page that shows the button, just before </body>. It loads asynchronously (about 6 KB compressed) and does nothing until the button is clicked, so it won't slow your page down. Replace yourstore.com with your own domain.

<script>window._birch = { partner: 'yourstore.com' };</script>
<script async src="https://birch-registry.api.birchstore.com/button.js"></script>

2. Add the button

Choose the option that fits your site.

Put this wherever the button should appear, usually under your Add to Cart button. With no attributes, it reads the product from your page's schema.org Product data or Open Graph tags.

<a class="birch-registry-button" data-birch-registry target="_blank" rel="noopener"
   href="https://www.birchstore.com/pages/registry-add?url=https%3A%2F%2Fyourstore.com%2Fproducts%2Fmuslin-swaddle">
  Add to Birch Registry
</a>

Put the address of the product page after ?url=, URL-encoded. It's a backup: when the script is running, it handles the click. If the script can't load (an ad blocker, a strict security policy, a network hiccup), the link still opens Birch with your product.

To set the details yourself, add any of these attributes. Anything you set takes priority over the page.

<a class="birch-registry-button" data-birch-registry target="_blank" rel="noopener"
  href="https://www.birchstore.com/pages/registry-add?url=https%3A%2F%2Fyourstore.com%2Fproducts%2Fmuslin-swaddle%3Fvariant%3D123"
  data-title="Organic Muslin Swaddle"
  data-variant="Sage / 47 x 47 in"
  data-url="https://yourstore.com/products/muslin-swaddle?variant=123"
  data-images="https://yourstore.com/img/swaddle-1.jpg,https://yourstore.com/img/swaddle-2.jpg"
  data-price="24.00"
  data-currency="USD"
  data-brand="Your Brand"
  data-sku="MS-SAGE"
  data-gtin="0123456789012">
  Add to Birch Registry
</a>

Attributes are read when the button is clicked. If your variant picker updates them, the shopper's current selection is always what gets saved.

On Shopify, the button picks up the product, the selected variant, its price, SKU and your vendor name by itself. You don't need any extra variant JavaScript.

In Shopify admin, go to Online Store → Themes → … → Edit code and open layout/theme.liquid.
Paste the script from step 1 just before </body>.
Open your product section (often sections/main-product.liquid) and paste the button below your Add to Cart button. In Online Store 2.0 themes, you can also add a Custom Liquid block to the product page in the theme editor and paste it there.

<a class="birch-registry-button" data-birch-registry target="_blank" rel="noopener"
   href="https://www.birchstore.com/pages/registry-add?url={{ shop.url | append: product.url | url_encode }}&title={{ product.title | url_encode }}&image={{ product.featured_image | image_url: width: 1200 | prepend: 'https:' | url_encode }}&price={{ product.price | divided_by: 100.0 }}">
  Add to Birch Registry
</a>

The link already carries the product, so it still works if the script is blocked. When the script runs, it also picks up the variant the shopper has selected.

For headless or single-page storefronts, call birch.addToRegistry() from your own click handler. Call it directly in the click, not after an await, or the browser may block the window.

myButton.addEventListener('click', function () {
  birch.addToRegistry({
    title: 'Organic Muslin Swaddle',
    variant: 'Sage / 47 x 47 in',
    url: 'https://yourstore.com/products/muslin-swaddle?variant=123',
    images: ['https://yourstore.com/img/swaddle-1.jpg'],
    price: '24.00',
    currency: 'USD',
    brand: 'Your Brand',
    sku: 'MS-SAGE',
    gtin: '0123456789012'
  });
});

Already have an "Add to Babylist" button? The same object works here as is: images, price, title, url and scraped_data (gtin, sku, brand) are all read.

Product fields

Field	Attribute	What to send
`title`	`data-title`	Product name.
`variant`	`data-variant`	Selected color, size and so on, e.g. "Sage / Newborn".
`url`	`data-url`	The page where gift givers buy this exact variant. Defaults to the current page.
`images`	`data-images`	One or more image URLs (comma-separated in the attribute). Shoppers pick one. Up to 6 are used.
`price`	`data-price`	Your current price in dollars, e.g. "24.00".
`currency`	`data-currency`	ISO code. Defaults to USD.
`brand`	`data-brand`	Brand name as you write it.
`sku`	`data-sku`	Your SKU (optional).
`gtin`	`data-gtin`	UPC / EAN / GTIN (optional, but it helps us match your product).

Anything you leave out is read from your page: Shopify product data, then schema.org Product JSON-LD, then Open Graph tags.

Styling

The birch-registry-button class gives you a ready-made Birch-styled button. To use your own design instead, drop that class and keep data-birch-registry on any element. Please keep the label "Add to Birch Registry" so shoppers know where the item is going.

Know when an item was added (optional)

When a shopper saves an item, the script fires a birch:registry event on document:

document.addEventListener('birch:registry', function (e) {
  if (e.detail.type === 'added') {
    // e.g. send it to your analytics
    console.log('Saved to Birch Registry:', e.detail.item);
  }
});

Content Security Policy

If your site sends a Content-Security-Policy header, allow the script host in script-src, and in connect-src for the button's error reports:

script-src 'self' https://birch-registry.api.birchstore.com;
connect-src 'self' https://birch-registry.api.birchstore.com;

Nothing is embedded in your page in a frame. The Birch window is a regular popup on www.birchstore.com, so you don't need frame-src changes. If connect-src isn't allowed, the button still works; we just can't see when something goes wrong on your site.

Questions

Do shoppers need a browser extension or the Birch app?

No. The button works in any modern browser, on desktop and mobile.

What if the shopper doesn't have a Birch registry yet?

They can create a Birch account from the same window. If they don't have a registry yet, adding the item starts one for them, and they can add their due date and the rest of the details later.

What if they add the same item twice?

The same product and variant isn't listed twice. The quantity goes up instead, and the window says so. "Undo" puts the quantity back.

What if the browser blocks the popup?

The same Birch page opens in the current tab instead. When the item is saved, it links the shopper back to your product.

What about Instagram, Facebook and other in-app browsers?

Popups often don't show in apps' built-in browsers, so there the Birch page opens in the same tab instead and links back to your product when the shopper is done. On any browser, if the Birch window doesn't appear within a few seconds, a small "Continue on Birch" link shows under the button.

What if the script can't load on our page?

The button is a plain link to Birch with your product page's address, so shoppers still get to the same Birch window. We fill in the details from your product page and let you know so you can check your setup.

What if Birch has a hiccup while the shopper is saving?

The window retries by itself. A retried save never adds the item twice. If it still can't save, the shopper sees a clear message and can try again, and the failure is logged for our team.

What does the button record?

Counts of pages showing the button and clicks, and any problems: a blocked popup, a page where no product could be read, or an error. It sets no cookies and records nothing about the shopper on your site. We use it to keep the button working and to tell you if something on your page needs fixing.

Does the shopper's data go to our site?

No. Signing in and saving both happen on Birch. Your page only receives the optional birch:registry event with the item it already sent.

Your cart is empty

Add to Birch Registry button