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

How to Customize Widget Design

Updated June 5, 2026

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

Style Widget Header, Footer, and Error Messages

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

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 Control Widget Width with CSS How to Hide Express Checkout Options from Cart