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

# Miten muotoilet verkkokaupan teemaeditorissa

> Työskentele teemaeditorissa järjestyksessä joka säästää uudelleentekemiseltä — yleiset ulkoasumäärittelyt ensin, sivut sitten — tietäen että jokainen tallennus menee suoraan julkaistuun verkkokauppaan.

<Frame caption="Myyntikanavat > Verkkokauppa > Teemaeditori">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-home.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=d196cbe8b9e71c7f5b909f4bb501c9d8" alt="Teemaeditori etusivu avattuna ja asetuspaneeli oikealla" width="1920" height="1080" data-path="images/theme-editor-home.webp" />
</Frame>

<Card title="Avaa TWICE Adminissa" icon="external-link" href="https://admin.twicecommerce.com/online-store/themes" horizontal>
  online-store/themes
</Card>

Teemaeditorissa on paljon paneeleita, ja jokainen niistä on jo dokumentoitu. Mitä ei ole kirjattu mihinkään, on *järjestys* jossa työ kannattaa tehdä — ja järjestyksellä on väliä, koska yleiset asetukset ylikirjoittavat jo hienosäätämiesi sivujen ulkoasun.

Tämä opas on tuo järjestys. Se ei toista yksittäisiä paneeleita; kukin linkittää omalle sivulleen.

## Edellytykset

<Warning>
  **Vaaditut oikeudet:** `online_store:editor`, katseluoikeutena editorin avaamiseen ja hallintaoikeutena muutoksiin. **Kaikilla neljällä järjestelmäroolilla on kaikki toiminnot siihen** — Owner, Admin, Manager ja Member voivat kaikki muokata verkkokaupan ulkoasua. Katso [Käyttäjät ja roolit](/docs/fi/settings/users-roles).
</Warning>

<Info>
  **Ennen kuin aloitat, ymmärrä yksi asia:**

  **Tallennus on julkaisu.** Luonnosta, erillistä julkaisuvaihetta tai teemakirjastoa ei ole — tililläsi on täsmälleen yksi verkkokaupan määritys ja editori muokkaa sitä paikallaan. Kaikki tallentamasi on heti asiakkaiden nähtävissä. Suunnittele työ istuntoihin jotka saat valmiiksi äläkä jätä puoliksi muutettua ulkoasua tallennetuksi.
</Info>

## Vaiheet

<Steps>
  <Step title="Avaa editori ja hyväksy että tallennus on julkaisu">
    Kohdassa **Verkkokauppa → Teemat** yksittäinen kortti näyttää työpöytä- ja mobiiliesikatselut sekä verkkokauppasi osoitteen. **Muokkaa** avaa editorin.

    Teemaa ei valita eikä mitään monisteta — yksi määritys, jota muokataan suoraan. Seuraus on tämän oppaan koko muoto: uudistusta ei voi valmistella ja julkaista kerralla, joten työskentele ylhäältä alas ja tallenna kohdissa joissa verkkokauppa on ehyt.

    <Note>
      Jos suljet editorin tallentamattomilla muutoksilla, dialogi tarjoaa **Tallenna muutokset** tai **Hylkää**. Hylkää on ainoa kumoaminen — versiohistoriaa johon palata ei ole.
    </Note>
  </Step>

  <Step title="Aseta yleiset ulkoasumäärittelyt ensin, Teema-tilassa">
    **Teema**-tila sisältää asetukset jotka vaikuttavat koko kauppaan. Tee nämä ennen kuin kosket yhteenkään sivuun, koska ne muuttavat jokaisen sivun ulkonäköä:

    | Tee tämä ensin           | Paneeli                                                                                                                                                   |
    | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | Yleisilme ja tiheys      | [Teeman tyyli](/docs/fi/sales-channels/online-store/theme-editor/settings/theme-style)                                                                         |
    | Väripaletti              | [Värit](/docs/fi/sales-channels/online-store/theme-editor/settings/colors)                                                                                     |
    | Fontit ja skaala         | [Typografia](/docs/fi/sales-channels/online-store/theme-editor/settings/typography)                                                                            |
    | Sivun leveys ja välistys | [Näkymä](/docs/fi/sales-channels/online-store/theme-editor/settings/layout)                                                                                    |
    | Muoto ja painotus        | [Painikkeet](/docs/fi/sales-channels/online-store/theme-editor/settings/buttons), [Syöttökentät](/docs/fi/sales-channels/online-store/theme-editor/settings/inputs) |

    Näiden saaminen kuntoon ensin estää etusivun hienosäätämisen kahdesti. Myöhäinen värimuutos piirtää hiljaisesti uudelleen jokaisen sivun ja jokaisen kortin siinä.
  </Step>

  <Step title="Hienosäädä komponentit joita asiakkaat todella katsovat">
    Kun määrittelyt ovat kohdallaan, siirry komponenttipaneeleihin. Karkeasti siinä järjestyksessä kuinka paljon asiakas niitä näkee:

    * [Listauskortti](/docs/fi/sales-channels/online-store/theme-editor/settings/listings-card) ja [Kokoelmakortti](/docs/fi/sales-channels/online-store/theme-editor/settings/collection-card) — toistuvat yksiköt joista suurin osa verkkokaupasta muodostuu.
    * [Otsikkopalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/header-bar) ja [Hakupalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/search-bar) — joka sivulla.
    * [Kalenteri](/docs/fi/sales-channels/online-store/theme-editor/settings/calendar) ja [Saatavuuden ilmaisin](/docs/fi/sales-channels/online-store/theme-editor/settings/availability-indicator) — siellä missä varaus oikeasti tehdään, joten ne ansaitsevat enemmän huomiota kuin kokonsa antaa ymmärtää.
    * [Ilmoituspalkki](/docs/fi/sales-channels/online-store/theme-editor/settings/announcement-bar), [Murupolku](/docs/fi/sales-channels/online-store/theme-editor/settings/breadcrumbs), [Muuttujapillerit](/docs/fi/sales-channels/online-store/theme-editor/settings/variant-pills), [Suodatinosio](/docs/fi/sales-channels/online-store/theme-editor/settings/filter-section) — viimeistelykierros.

    Täydellinen paneelilista on sivulla [Teemaeditori](/docs/fi/sales-channels/online-store/theme-editor/overview).
  </Step>

  <Step title="Tiedä mitkä brändielementit eivät ole täällä">
    Kaksi asiaa joita editorista etsitään eikä löydetä:

    * **Logokuva asetetaan kohdassa Asetukset → Yleiset, ei teemaeditorissa.** Editorin [Logo](/docs/fi/sales-channels/online-store/theme-editor/settings/logo)-paneeli hallitsee sitä miten logo *näytetään* — leveys ja sijoittelu — ja sanoo sen itse ohjaten kohtaan **Asetukset > Yleiset** itse tiedoston vaihtamiseksi.
    * **Favicon sen sijaan on editorissa**, samalla Logo-paneelilla, näytettynä koossa 32 × 32 pikseliä.

    Tilitason brändiasetukset ovat olemassa erillään verkkokaupan teemasta. Verkkokaupan ulkoasu määräytyy täällä muokkaamistasi teema-asetuksista, joten jos jokin väri ei ole odottamasi, se tulee tästä editorista tai teeman omasta oletuksesta — ei tilitason brändikentästä.
  </Step>

  <Step title="Esikatsele näkymäkoot ennen tallennusta, älä jälkeen">
    Editori esikatselee työpöytä-, tabletti- ja mobiilikoon. Koska tallennus on julkaisu, esikatselu on ainoa ennakkotarkistuksesi — käytä kaikkia kolmea.

    Mobiili on se koko jossa verkkokauppojen ulkoasut hajoavat, ja siellä useimmat asiakkaat ovat. Tarkista erityisesti otsikko, listauskorttien ruudukko ja kalenteri mobiilileveydellä; noissa kolmessa on eniten asetteluriskiä.
  </Step>

  <Step title="Tartu mukautettuun CSS:ään vain kun paneelit eivät aidosti riitä">
    [Mukautettu CSS](/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css) on varauloskäynti sille mitä visuaalinen editori ei tarjoa.

    Kohtele sitä viimeisenä keinona äläkä oikotienä. Nykyistä merkkausta vasten kirjoitettu CSS on se osa verkkokauppaasi joka todennäköisimmin rikkoutuu hiljaisesti verkkokaupan päivittyessä, eikä mikään varoita siitä — paneeliasetus ei rikkoudu.

    <Warning>
      **Nollaa koko teema** tekee juuri sen mitä lupaa, eikä luonnoksen ja versiohistorian puuttuessa ole mitään mistä palauttaa. Käytä sitä vain kun todella aiot aloittaa ulkoasun alusta.
    </Warning>
  </Step>
</Steps>

## Mistä tiedän että se onnistui?

* **Verkkokauppa vastaa editorin esikatselua**, sekä työpöytä- että mobiilileveydellä.
* **Mikään ei näytä asiakkaalle puolivalmiilta**, koska tallensit ehyissä kohdissa etkä kesken muutoksen.
* **Väri- tai fonttimuutos näkyy kaikkialla missä pitääkin** — korteissa, otsikossa, kalenterissa — eikä vain sillä sivulla jota katsoit.
* **Logosi on oikein**, mikä tarkoittaa että asetit sen kohdassa Asetukset → Yleiset.

## Vianetsintä / yleiset sudenkuopat

<AccordionGroup>
  <Accordion title="Tallensin ja haluan kumota sen">
    **Versiohistoriaa ei ole eikä luonnosta johon palata.** Hylkää toimii vain ennen tallennusta.

    **Mitä tehdä:** muuta asetukset takaisin käsin. Tämä on syy työskennellä ylhäältä alas ja tallentaa ehyissä kohdissa — ja syy kirjata arvo ylös ennen muuttamista aina kun olet epävarma.
  </Accordion>

  <Accordion title="En löydä mistä logo ladataan">
    **Se ei ole teemaeditorissa.** Logo-paneeli hallitsee näyttöleveyttä ja sijoittelua ja ohjaa kohtaan **Asetukset > Yleiset** itse kuvaa varten.

    **Mitä tehdä:** aseta tiedosto kohdassa Asetukset → Yleiset ja palaa sitten editoriin mitoittamaan ja sijoittamaan se.
  </Accordion>

  <Accordion title="Vaihdoin väripaletin ja jo muotoilemani sivut näyttävät väärältä">
    **Odotettua — juuri tämän järjestysongelman estämiseksi opas on olemassa.** Teemamäärittelyt vaikuttavat koko kauppaan ja piirtävät jokaisen sivun uudelleen.

    **Mitä tehdä:** viimeistele yleiset määrittelyt ennen sivukohtaista työtä. Jos olet jo tuon ohi, tarkista aikaisin hienosäätämäsi sivut äläkä oleta niiden säilyneen.
  </Accordion>

  <Accordion title="Mukautettu CSS:ni lakkasi toimimasta">
    **Syy:** verkkokaupan merkkausta vasten kirjoitettu CSS ei ole tuettu rajapinta, ja verkkokaupan päivitykset voivat muuttaa sitä.

    **Mitä tehdä:** tarkista tekeekö jokin teemapaneeli nyt sen mitä CSS:si teki, ja suosi paneelia. Pidä mukautettu CSS minimissä juuri tästä syystä.
  </Accordion>

  <Accordion title="Joku muu muokkasi verkkokauppaa samaan aikaan">
    **Mikään ei estä kahta muokkaamasta** — kun luonnoksia ei ole, ei ole haaroja, ja viimeisin tallennus voittaa.

    **Mitä tehdä:** sopikaa kuka työskentelee editorissa ennen uudistusta. Julkaistussa verkkokaupassa tällä on enemmän merkitystä kuin miltä kuulostaa, koska molemmat julkaisevat työn edetessä.
  </Accordion>
</AccordionGroup>

## Seuraavat askeleet

<CardGroup cols={2}>
  <Card title="Rakenna sivut ja navigaatio" icon="sitemap" href="/docs/fi/guides/sales-channels/storefront-pages-and-navigation">
    Sivukohtainen työ joka seuraa yleistä ulkoasua.
  </Card>

  <Card title="Teemaeditori" icon="paintbrush" href="/docs/fi/sales-channels/online-store/theme-editor/overview">
    Kaikki tilat ja paneelit kokonaisuudessaan.
  </Card>

  <Card title="Ota verkkokauppa käyttöön" icon="rocket" href="/docs/fi/guides/sales-channels/set-up-the-online-store">
    Julkaisujärjestys jonka sisään tämä muotoilutyö kuuluu.
  </Card>

  <Card title="Mukautettu CSS" icon="code" href="/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css">
    Varauloskäynti ja sen hinta.
  </Card>
</CardGroup>