> ## 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 – Saatavuusmerkki

> Muokkaa saatavuuden tilapisteen ja sen tekstin ulkoasua, joka on yhteinen koko verkkokaupassa.

<Frame caption="Teemaeditori > Saatavuusmerkki">
  <img src="https://mintcdn.com/twicecommerce/R_1b45pRTajoRzbd/images/theme-editor-availability-indicator.webp?fit=max&auto=format&n=R_1b45pRTajoRzbd&q=85&s=e5595cc56c1ffb090db4f83e05e4b29d" alt="Saatavuusmerkin asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-availability-indicator.webp" />
</Frame>

Saatavuusmerkki-paneeli määrittää tilapisteen ja siihen liittyvän tekstin ulkoasun. Merkki on yhteinen: se näkyy listaussivun [noutosaatavuuden kortissa](/docs/fi/sales-channels/online-store/theme-editor/settings/pickup-availability) ja kokoelmasivujen listausten saatavuusrivillä. Löytyy teemaeditorin kohdasta **Cards**.

## Värit

| Asetus        | Oletus    | Kuvaus                                       |
| ------------- | --------- | -------------------------------------------- |
| Saatavilla    | `#17B26A` | Pisteen väri, kun listaus on saatavilla.     |
| Ei saatavilla | `#D0D5DD` | Pisteen väri, kun listaus ei ole saatavilla. |
| Teksti        | `#374152` | Pisteen vieressä olevan tekstin väri.        |

## CSS-muuttujat

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-availability-indicator-available-color: #17B26A;
    --storefront-availability-indicator-unavailable-color: #D0D5DD;
    --storefront-availability-indicator-text-color: #374152;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvät

<CardGroup cols={2}>
  <Card title="Noutosaatavuus" icon="box" href="/docs/fi/sales-channels/online-store/theme-editor/settings/pickup-availability">
    Muokkaa korttia, jossa merkki näkyy.
  </Card>

  <Card title="Saatavuus" icon="calendar-check" href="/docs/fi/concepts/catalog/availability">
    Miten saatavuus määräytyy.
  </Card>
</CardGroup>