> ## 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.

# Teemaeditori - Noudon saatavuus

> Määritä listaussivulla näkyvän noudon saatavuuskortin ulkoasu.

<Frame caption="Teemaeditori > Noudon saatavuus">
  <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="Noudon saatavuuden asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-pickup-availability.webp" />
</Frame>

Noudon saatavuuden paneeli määrittää sen kortin ulkoasun, joka näyttää [listaussivulla](/docs/fi/sales-channels/online-store/theme-editor/pages/listing) asiakkaille, mistä ja miten listauksen voi noutaa. Paneeli löytyy teemaeditorin kohdasta **Cards**.

<Note>
  Tämä paneeli ohjaa vain kortin värejä ja reunaa. Kortin sisältö — piilotusvalinta, **Näytä kohdemäärät** ja **Näytä muut sijainnit** — määritetään [listaussivun](/docs/fi/sales-channels/online-store/theme-editor/pages/listing) **Noutosaatavuus**-lohkossa. Kortin sisällä olevan tilapisteen ulkoasu määritetään [Saatavuuden ilmaisin](/docs/fi/sales-channels/online-store/theme-editor/settings/availability-indicator) -paneelissa.
</Note>

## Värit

| Asetus              | Oletus    | Kuvaus                                       |
| ------------------- | --------- | -------------------------------------------- |
| Tausta              | `#FFFFFF` | Kortin taustatäyttö.                         |
| Otsikko             | `#111826` | Kortin otsikkotekstin väri.                  |
| Toissijainen teksti | `#374152` | Toissijainen teksti, kuten sijainnin tiedot. |

## Reuna

| Asetus            | Tyyppi      | Oletus    | Vaihteluväli | Kuvaus                                   |
| ----------------- | ----------- | --------- | ------------ | ---------------------------------------- |
| Väri              | Väri        | `#E4E6EB` | —            | Kortin ympärillä olevan reunan väri.     |
| Paksuus           | Liukusäädin | 1 px      | 0–8 px       | Reunan leveys.                           |
| Kulmien pyöristys | Liukusäädin | 8 px      | 0–40 px      | Kuinka pyöristettyjä kortin kulmat ovat. |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat 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>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Saatavuuden ilmaisin" icon="circle-dot" href="/docs/fi/sales-channels/online-store/theme-editor/settings/availability-indicator">
    Määritä kortin sisällä olevan tilapisteen ulkoasu.
  </Card>

  <Card title="Listaussivu" icon="tag" href="/docs/fi/sales-channels/online-store/theme-editor/pages/listing">
    Määritä, mitä noudon saatavuuslohko näyttää.
  </Card>
</CardGroup>