Developer Settings

Fine-tune how the Bird widget fits your theme. Most stores never need these settings.

To open them, go to Bird Pickup & Delivery > Settings > Developer. Click Save to apply changes.

Widget placement

Use this when the widget doesn’t appear where you want it.

• Placement CSS Selector: the element to place the widget next to, for example .cart__footer. Leave blank for automatic placement.
• Widget Position: before, after, or inside (first or last) that element.

Step-by-step guide: Widget Placement: Manual (CSS).

Checkout button

If customers can check out without picking a date, enter your theme’s checkout button selector in Checkout button CSS Selector, for example #checkout-button. This replaces Bird’s built-in detection, so leave it blank unless that isn’t working.

Restrict Schedule Widget

Check Load the widget on the cart page only to stop it loading on other pages. Leave it off if your store uses a cart drawer.

Line Item Property

Shown only when you use Bird Rates with CCS. Check Attach line item property to all the cart items if another app can remove or replace the first cart item.

Advanced Scripting

Custom JavaScript that runs on your storefront. For example, to run code when the customer completes their choice:

window.addEventListener('bird:selection:complete', ({ detail }) => {
  console.log(detail.method, detail.date, detail.time);
});

More events: Widget API Reference.

Advanced Styling

Custom CSS for the widget:

#birdchime-slots-box {
  font-family: var(--font-body-family);
}

For colors, fonts and buttons without code, use Widget Design.

Related Articles

• Widget Placement: Manual (CSS)
• Widget Design
• Widget API Reference