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

> Määritä verkkokaupan hakupalkin ulkoasu.

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

Hakupalkin paneeli ohjaa verkkokaupan hakukentän ulkoasua. Paneeli löytyy teemaeditorin kohdasta **Cards**. Hakupalkin sijainti määritetään sivukohtaisesti — katso [etusivu](/docs/fi/sales-channels/online-store/theme-editor/pages/home) ja [kokoelmasivu](/docs/fi/sales-channels/online-store/theme-editor/pages/collection).

## Värit

| Asetus | Oletus    | Kuvaus                   |
| ------ | --------- | ------------------------ |
| Tausta | `#F2F3F5` | Hakukentän taustatäyttö. |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-search-bar-background-color: #F2F3F5;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Syöttökentät" icon="text-cursor-input" href="/docs/fi/sales-channels/online-store/theme-editor/settings/inputs">
    Määritä lomakekenttien ulkoasu koko kaupassa.
  </Card>

  <Card title="Kokoelmasivu" icon="grid-2" href="/docs/fi/sales-channels/online-store/theme-editor/pages/collection">
    Ota haku käyttöön kokoelmasivuilla.
  </Card>
</CardGroup>