Articles on: Design and customizations

How to Manually Position Your Pickup & Delivery Widget

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
  1. 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
  1. Right-click the HTML element in the developer panel
  2. 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.

Updated on: 09/25/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!