> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Pickup availability

> Style the pickup availability card shown on the listing page.

<Frame caption="Theme Editor > Pickup availability">
  <img src="https://mintcdn.com/twicecommerce/R_1b45pRTajoRzbd/images/theme-editor-pickup-availability.webp?fit=max&auto=format&n=R_1b45pRTajoRzbd&q=85&s=4fb3d073bc312aa26bdabe9a2e51a611" alt="Pickup availability settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-pickup-availability.webp" />
</Frame>

The Pickup availability panel styles the card on the [Listing page](/docs/sales-channels/online-store/theme-editor/pages/listing) that shows customers where and how they can pick up a listing. Found under **Cards** in the theme editor.

<Note>
  This panel controls the card's colours and border only. What the card shows — the hide toggle, **Show item counts**, and **Show other locations** — is configured in the **Pickup availability** block on the [Listing page](/docs/sales-channels/online-store/theme-editor/pages/listing). The status dot inside the card is styled in the [Availability indicator](/docs/sales-channels/online-store/theme-editor/settings/availability-indicator) panel.
</Note>

## Colors

| Setting        | Default   | Description                               |
| -------------- | --------- | ----------------------------------------- |
| Background     | `#FFFFFF` | Card background fill.                     |
| Title          | `#111826` | Card title text colour.                   |
| Text secondary | `#374152` | Secondary text, such as location details. |

## Border

| Setting       | Type   | Default   | Range   | Description                       |
| ------------- | ------ | --------- | ------- | --------------------------------- |
| Color         | Colour | `#E4E6EB` | —       | Border colour around the card.    |
| Thickness     | Slider | 1 px      | 0–8 px  | Border width.                     |
| Corner radius | Slider | 8 px      | 0–40 px | How rounded the card corners are. |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-fulfillment-card-background: #FFFFFF;
    --storefront-fulfillment-card-border-color: #E4E6EB;
    --storefront-fulfillment-card-border-width: 1px;
    --storefront-fulfillment-card-border-radius: 8px;
    --storefront-fulfillment-card-title-color: #111826;
    --storefront-fulfillment-card-secondary-text-color: #374152;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Availability indicator" icon="circle-dot" href="/docs/sales-channels/online-store/theme-editor/settings/availability-indicator">
    Style the status dot inside the card.
  </Card>

  <Card title="Listing page" icon="tag" href="/docs/sales-channels/online-store/theme-editor/pages/listing">
    Configure what the pickup availability block shows.
  </Card>
</CardGroup>