Articles on: Design and customizations

Complete Guide to Customizing Your Bird Pickup & Delivery Widget Design

Customize your Bird Pickup & Delivery widget appearance to match your store's design.


Access Widget Design Settings


  1. Go to Shopify Admin
  2. In the left sidebar, locate Apps
  3. Find and click Bird Pickup & Delivery
  4. Click Settings for the app
  5. Click the Widget Design section


Note: Always click Save after making changes to apply them.


Basic Widget Customization


Change Widget Background Color


  1. In Widget Design settings, locate the background color option
  2. Click the color palette icon next to background color
  3. Select your preferred color from the color picker
  4. Click Save to apply changes


Tip: Use your brand's hex colors (e.g., #FF6B35) or choose from Shopify's color palette. Ensure sufficient contrast for accessibility.


Widget Design settings page showing the background color picker field


Set Week Start Day


  1. In Widget Design settings, locate the week start option
  2. Choose between Monday or Sunday as your week's first day
  3. Click Save to apply


What this does: Controls which day appears first in your calendar view. Choose Monday if your business week starts Monday, or Sunday for traditional calendar layout.


Week start day dropdown showing Monday and Sunday options


Configure Default Delivery Method


  1. Find the default delivery method setting in Widget Design
  2. Select your preferred default option
  3. Click Save to apply


What this does: Sets which delivery option (shipping, local delivery, or pickup) is pre-selected when customers first see the widget.


Default delivery method dropdown showing available delivery options


Enable Collapsible Calendar


  1. Locate the collapsible calendar checkbox in Widget Design
  2. Keep the checkbox enabled for collapsible functionality
  3. Click Save to apply


What this does: Allows customers to expand/collapse the calendar to save space on your cart page. When collapsed, only the date picker shows.


Collapsible calendar checkbox in widget design settings


Example of collapsed calendar widget showing the date picker


Advanced Styling Options


Customize Delivery Method Appearance


Style delivery method buttons and text to match your brand colors.


Delivery method styling panel showing button colors, text colors, and border options


Customized delivery method buttons with applied colors


Change Delivery Method Icons


Customize delivery method icons by placing your own icon urls.


Paste the hosted URLS and a preview of the icon will be visible


Test how the icons look in the widget


Style Calendar Elements


Customize calendar colors, borders, and text color to match your checkout form.



Calendar styling options showing background colors, border colors, and text color pickers


Final customized calendar with applied styling


Customize Input Fields


Style date and time input fields to match your form design.



Input field styling options showing background colors, border colors, and text color settings


Customized input fields with applied styling and brand colors



Customize the widget's header, footer, and error message appearance.


Header, footer, and error message styling configuration showing color and text options


Customized header, footer, and error message styling with brand colors


Customize Pickup Location Styles


Style pickup location elements to match your store's visual identity.


Pickup location styling options showing background colors, border colors, and text color settings


Customized pickup location styling with applied brand design


Custom CSS Integration


Add your own custom CSS for complete design control.


Important: Test custom CSS on a staging environment first. Incorrect CSS can break your widget display or cause layout issues.


Enter custom CSS code to achieve advanced styling that goes beyond our built-in options.


Custom CSS input field where you can enter your own styling code


Preview and Test Your Customizations


Use the Widget Preview feature to see your changes before they go live on your store.


  1. Make your desired design changes
  2. Click Save to apply changes
  3. Click Widget Preview to view the updated widget
  4. Verify all settings display correctly


Widget Preview button that shows your customizations before publishing



Updated on: 09/24/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!