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

> Muokkaa jokaisen verkkokaupan sivun yläreunassa näkyvän ilmoituspalkin ulkoasua.

<Frame caption="Teemaeditori > Ilmoituspalkki">
  <img src="https://mintcdn.com/twicecommerce/cJlH0EnJIdVT0BaS/images/theme-editor-announcement-bar.webp?fit=max&auto=format&n=cJlH0EnJIdVT0BaS&q=85&s=505b472be9d7b8f63eb38e0cc5fa9509" alt="Ilmoituspalkin asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-announcement-bar.webp" />
</Frame>

Ilmoituspalkki-paneeli määrittää verkkokaupan ylimmän kapean palkin värit — palkkia käytetään kampanjoihin, toimitusilmoituksiin tai lyhyisiin viesteihin. Tämä paneeli määrittää vain ulkoasun; palkin teksti ja näkyvyys asetetaan sivun ilmoituspalkin sisältölohkossa. Löytyy teemaeditorin kohdasta **Cards**.

## Värit

| Asetus | Oletus    | Kuvaus                        |
| ------ | --------- | ----------------------------- |
| Tausta | `#111826` | Ilmoituspalkin taustaväri.    |
| Teksti | `#FFFFFF` | Ilmoitusviestin tekstin väri. |

## CSS-muuttujat

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-announcement-bar-background-color: #111826;
    --storefront-announcement-bar-text-color: #FFFFFF;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvät

<CardGroup cols={2}>
  <Card title="Etusivu" icon="house" href="/docs/fi/sales-channels/online-store/theme-editor/pages/home">
    Aseta ilmoituspalkin teksti ja näkyvyys.
  </Card>

  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>
</CardGroup>