> ## 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 - Teema-asetukset
> Yleiskuva kaikista teema-asetusten ryhmistä — design-tokeneista, jotka ohjaavat verkkokaupan ulkoasua.
Teema-asetusten paneeli on kaikkien yleisten design-tokenien lähtöpiste — värit, typografia, asettelu, komponenttityylit ja mukautettu CSS. Avaa ryhmän asetuspaneeli valitsemalla ryhmä. Muutokset vaikuttavat verkkokaupan jokaiseen sivuun ja näkyvät esikatselussa välittömästi.
## Ryhmät
Teema-asetukset on jaettu neljään osioon:
### Header
Yleiset design-tokenit, jotka vaikuttavat verkkokaupan kokonaisilmeeseen.
| Ryhmä | Kuvaus |
| ------------------------------------------------------------------------------ | ----------------------------------------------------------- |
| [Logo](/docs/fi/sales-channels/online-store/theme-editor/settings/logo) | Logon leveys verkkokaupan ylätunnisteessa. |
| [Värit](/docs/fi/sales-channels/online-store/theme-editor/settings/colors) | Tausta-, teksti-, reuna- ja tilavärit. |
| [Typografia](/docs/fi/sales-channels/online-store/theme-editor/settings/typography) | Fonttiperheet ja kokoasteikko otsikoille ja leipätekstille. |
| [Asettelu](/docs/fi/sales-channels/online-store/theme-editor/settings/layout) | Sivun enimmäisleveys ja vaakamarginaalit. |
### Components
Interaktiivisten käyttöliittymäelementtien tyylit.
| Ryhmä | Kuvaus |
| ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
| [Painikkeet](/docs/fi/sales-channels/online-store/theme-editor/settings/buttons) | Painikkeiden värit, reunan paksuus ja kulmien pyöristys. |
| [Syöttökentät](/docs/fi/sales-channels/online-store/theme-editor/settings/inputs) | Lomakekenttien värit, reunan paksuus ja kulmien pyöristys. |
| [Murupolku](/docs/fi/sales-channels/online-store/theme-editor/settings/breadcrumbs) | Murupolun tekstin ja aktiivisen kohdan värit. |
| [Kokoontaittuva osio](/docs/fi/sales-channels/online-store/theme-editor/settings/collapsible-section) | Laajennettavien osioiden värit, reuna ja kulmien pyöristys. |
| [Kalenteri](/docs/fi/sales-channels/online-store/theme-editor/settings/calendar) | Saatavuuskalenterin varastovärit, reunat ja täytteet. |
### Cards
Korttimaisten pintojen ja muiden visuaalisten lohkojen tyylit.
| Ryhmä | Kuvaus |
| ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| [Varianttipillerit](/docs/fi/sales-channels/online-store/theme-editor/settings/variant-pills) | Varianttivalitsimen värit, reuna ja kulmien pyöristys. |
| [Listauskortti](/docs/fi/sales-channels/online-store/theme-editor/settings/listings-card) | Tuotekortin värit, reunat, välistys ja kuva-asetukset. |
| [Kokoelmakortti](/docs/fi/sales-channels/online-store/theme-editor/settings/collection-card) | Kokoelmakortin värit, reunat, välistys ja kuva-asetukset. |
| [Noudon saatavuus](/docs/fi/sales-channels/online-store/theme-editor/settings/pickup-availability) | Listaussivun noudon saatavuuskortti. |
| [Ostoskorin toimipistevalitsin](/docs/fi/sales-channels/online-store/theme-editor/settings/cart-store-selector) | Ostoskorisivun toimipistevalitsin. |
| [Saatavuuden ilmaisin](/docs/fi/sales-channels/online-store/theme-editor/settings/availability-indicator) | Saatavuuden tilapiste ja sen teksti. |
| [Ylätunnistepalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/header-bar) | Ylätunnisteen tausta-, teksti-, kuvake- ja reunavärit. |
| [Ilmoituspalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/announcement-bar) | Ilmoituspalkin tausta- ja tekstivärit. |
| [Hakupalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/search-bar) | Hakupalkin taustaväri. |
| [Suodatinosio](/docs/fi/sales-channels/online-store/theme-editor/settings/filter-section) | Kokoelmasivun suodatinosion reunaväri. |
### Settings
Teeman lisätyökalut.
| Ryhmä | Kuvaus |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [Mukautettu CSS](/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css) | Lisää verkkokauppaan vapaavalintaisia CSS-sääntöjä. |
| [Teematyyli](/docs/fi/sales-channels/online-store/theme-editor/settings/theme-style) | Selaa, kopioi ja joukkomuokkaa kaikkia teeman CSS-muuttujia. Nollaa koko teema. |
## Miten se toimii
Jokaisessa ryhmäpaneelissa on **Reset**-painike, joka palauttaa vain kyseisen ryhmän asetukset oletuksiin. Nollaa kaikki kerralla [Teematyyli](/docs/fi/sales-channels/online-store/theme-editor/settings/theme-style)-paneelin **Reset entire theme** -painikkeella.
Muutokset näkyvät esikatselussa reaaliaikaisesti, mutta ne tallentuvat vasta, kun tallennat. Editorin yläpalkin **Tallenna** kirjoittaa ne suoraan julkiseen verkkokauppaan — erillistä luonnos- tai julkaisuvaihetta ei ole. Jos suljet editorin tallentamatta muutoksia, avautuu valintaikkuna, jossa tallennat tai hylkäät ne.
```text Tavallinen työnkulku theme={null}
1. Avaa teemaeditori
2. Valitse asetusryhmä
3. Säädä arvoja — esikatselu päivittyy reaaliaikaisesti
4. Tallenna — muutokset tulevat voimaan välittömästi
```
## Aiheeseen liittyvää
Tutustu koko teemaeditoriin.
Selaa ja muokkaa kaikkia teeman CSS-muuttujia.