Developer Settings: Widget Placement, Custom CSS & JavaScript

The Developer Settings page gives you low-level control over how the Bird widget integrates with your Shopify theme — use it when automatic placement fails, when the widget conflicts with a cart drawer, or when you need to apply custom styles or scripts.

This page is intended for developers and technically confident merchants. Most stores never need these settings. If you are still setting up Bird for the first time, start with the full app setup guide instead.

How to Open Developer Settings

1. Open the Bird Pickup & Delivery app from your Shopify admin
2. Click Settings in the left navigation
3. Click the Developer tile

---

Manual Widget Placement

Use this section to anchor the widget to a specific HTML element when Bird’s automatic placement is not working for your theme.

Placement CSS Selector

Enter a CSS selector that targets the element you want to place the widget next to. Leave this blank to let Bird choose placement automatically.

.cart__footer > div:first-child

Widget Position

Choose where the widget appears relative to your selector:

---

Widget Reload / Reinitialize

Use these settings if the Bird widget is not loading reliably in your cart drawer, or if the checkout button remains blocked after the drawer opens. These options let you fine-tune the timing and triggers for widget initialization.

Cart drawer delay (optional)

Sets how long Bird waits before initializing the widget inside a cart drawer. The default (1 second) works for most themes. Increase it only if the checkout button in your cart drawer is blocked and the widget has not appeared yet.

Watch CSS Selector (optional)

Enter a CSS selector for an element Bird should watch for DOM changes. When that element is updated — for example when items are added to a cart drawer — Bird reloads and reinitializes the widget automatically.

#cart-drawer

Cart quantity increment/decrement fix

Enable this only if the cart quantity increment or decrement buttons stop working after Bird loads. Note: the date selection clearing when cart contents change is normal behavior, not a bug.

---

Checkout Button

Checkout button CSS Selector (optional)

Bird blocks the checkout button using a set of built-in CSS selectors that cover most Shopify themes. If your theme’s checkout button is not matched by these defaults — for example, customers can still proceed without selecting a date — enter your theme’s checkout button selector here. This replaces Bird’s default detection entirely.

#checkout-button

Leave this blank unless Bird’s built-in detection is not working.

---

Advanced Scripting

The Advanced scripting section provides a syntax-highlighted JavaScript editor. Use it to run custom code that adjusts widget or theme elements on your cart page.

This field is optional. Common use cases include:

• Auto-populating the postal code from another app on the page
• Running code after the customer completes a date and time selection — see Listen for Widget State Changes with Custom Events

// Run code when the customer selects a delivery date and time
document.addEventListener('birdchime:schedule', function({ detail }) {
  console.log('Selected date:', detail['Delivery Date']);
  console.log('Selected time:', detail['Delivery Time']);
});

---

Advanced Styling

The Advanced styling section provides a syntax-highlighted CSS editor. Use it to override the widget’s default styles to match your theme.

This field is optional. Common use cases include:

• Matching widget fonts and colors to your theme
• Adjusting widget width or spacing
• Hiding specific widget elements

/* Example: match widget font to your theme */
#birdchime-slots-box {
  font-family: var(--font-body-family);
}

---

Saving Changes

Developer Settings uses a contextual save bar — your changes are not applied until you click Save. If you navigate away without saving, your edits will be discarded.

---

Related Articles

• How to Manually Position Your Pickup & Delivery Widget
• How to Fix Widget Loading Issues in Dynamic Carts
• How to Customize Widget Design
• How to Control Widget Width with CSS
• Widget APIs (REST & JavaScript)
• Listen for Widget State Changes with Custom Events