Bird Pickup & Delivery Bird Pickup & Delivery
Help What's New Roadmap Book Status
Back to Widget and Design
Widget and Design

How to Manually Position Your Pickup & Delivery Widget

Updated June 5, 2026

You’ll move the Bird Pickup & Delivery widget to the perfect location on your cart page when automatic placement doesn’t work.

Widget placement controls where customers see your delivery date picker. Use manual placement when automatic positioning fails or when you need precise control.

Requirements: Use Chrome browser for these exact steps. Other browsers have different developer tools interfaces.

Find Your Target Element

  1. Open your cart page in a new browser tab
  2. Right-click the element where you want the widget positioned
    • Common locations: cart footer, below cart items, above checkout button
  3. Select “Inspect element” from the context menu

Shows the browser context menu with "Inspect" element option highlighted on a cart page

Copy the CSS Selector

  1. Hover over the highlighted element in the developer tools
    • The element shows a blue highlight on your page
  2. Right-click the HTML element in the developer panel
  3. Select “Copy” > “Copy selector” from the menu

Shows the developer tools context menu with highlighted element structure

Configure Widget Placement

  1. Navigate to your Bird app in Shopify admin
  2. Go to Settings > Widget Placement

Shows the Bird app navigation menu with Widget Placement option highlighted in the settings section

  1. Paste your CSS selector in the placement field
    • For CSS classes: Use format .cart__footer
    • For HTML IDs: Use format #cart_footer


Shows the widget placement configuration screen with CSS selector input field

Adjust Position (Optional)

Use the Position dropdown to control placement:

  • After the element: Widget appears below the target element
  • Before the element: Widget appears above the target element
  • Inside the element as first (top): Widget appears inside the element at the top
  • Inside the element as last (bottom): Widget appears inside the element at the bottom

Shows the position adjustment dropdown menu with different placement options for fine-tuning widget location

Verify Your Setup

  1. Save your changes in the Bird app settings
  2. Visit your cart page in a new browser tab
  3. Add items to cart to see the widget in action

Shows the final result with the Bird delivery date widget properly positioned in the cart footer area

Common CSS Selectors

Use these examples for popular theme structures:

  • Dawn theme cart footer: .cart__footer
  • Debut theme cart section: #cart-section
  • Brooklyn theme cart actions: .cart__btn-wrapper
  • Minimal theme checkout area: .cart-form__actions

Need help? Contact our support team with your store URL and desired widget location.

Related Articles

Was this article helpful?

Related articles

How to Control Widget Visibility by Product or Customer How to Customize Widget Language and Labels How to Change Shopify's Cart Type How to Hide Express Checkout Options from Cart How to Control Widget Width with CSS