Bird Pickup & Delivery Bird Pickup & Delivery
Help What's New Roadmap Book Status
Articles in Widget and Design
On this page
Widget and Design

Widget Placement: Manual (CSS)

B
Written by Bird Pickup & Delivery
Updated October 7, 2026

Move the Bird Pickup & Delivery widget to the exact spot you want on your cart page when automatic placement doesn’t suit your theme.

Bird places the widget on your cart page automatically. Some themes lay out the cart differently, so the widget can end up too low, in the wrong column, or out of view. Manual placement lets you anchor the widget to any element on the page by copying that element’s CSS selector into Bird.

You only need this if automatic placement isn’t working for you. Leave the field blank and Bird keeps choosing the position itself.

ℹ️

These steps use Google Chrome. Other browsers have developer tools too, but the menus are named differently.

Find Your Target Element

  1. Open your cart page in a new browser tab, with at least one product in the cart
  2. Right-click the element you want the widget next to
    • Common choices: the cart footer, the area below the cart items, or just above the checkout button
  3. Select “Inspect” from the menu

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

Copy the CSS Selector

  1. Hover over the highlighted line in the developer tools panel
    • The matching element lights up in blue on your page. Move up or down a line until the whole area you want is highlighted.
  2. Right-click that line in the developer tools panel
  3. Select “Copy” > “Copy selector”

Shows the developer tools context menu with highlighted element structure

Add the Selector in Bird

  1. Go to Bird Settings > Developer > Manual widget placement
  2. Paste your selector into Placement CSS selector
    • A class starts with a dot, for example .cart__footer
    • An ID starts with a hash, for example #cart_footer

Shows the widget placement configuration screen with CSS selector input field

  1. Choose a Widget position to set where the widget goes relative to that element:
    • Before the element: directly above it
    • Inside the element as first element: inside it, at the top
    • Inside the element as last element: inside it, at the bottom
    • After the element: directly below it

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

  1. Click Save in the save bar at the top of the page

Example: on Shopify’s Dawn theme, the cart footer is .cart__footer.

Check the Result

  1. Go to Bird Settings > Widget Placement
  2. Under Cart page, click Preview in theme. Bird opens your cart with a product already in it.
  3. Check the widget appears where you expected. If it doesn’t, try a different Widget position, or copy the selector from the element one level up or down.

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

If your store uses a cart drawer, open the drawer too and check the widget there.

Still stuck? Contact Birdchime Support with your store URL and where you’d like the widget, and we’ll find the right selector for you.

Related Articles

Was this article helpful?

Related articles

How to Hide Express Checkout Options from Cart How to Customize Widget Language and Labels How to Change Shopify's Cart Type How to Add Custom Links Below Your Widget Widget Design