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

# Tee myymälästä sinun näköisesi

> Aseta teema ensin, sitten etusivu ja navigaatio, jotta asiakas löytää tilattavan listauksen parilla klikkauksella.

Osa [käyttöönottopolun](/docs/fi/guides/launch/overview) vaihetta 6, [Suunnittele myymäläsi](/docs/fi/guides/launch/shape-the-storefront). Tee teema ennen sivuja. Väri ja typografia piirtävät jokaisen sivun uudelleen, joten ensin koottu etusivu on etusivu joka kootaan kahdesti.

Tee yksi kierros, älä uudistusta. Mikään tällä sivulla ei saa viivyttää julkaisupäivää.

<Warning>
  **Tallentaminen julkaisee.** Tililläsi on yksi myymälän kokoonpano, ja editori muokkaa sitä suoraan. Luonnosta, erillistä julkaisuvaihetta tai versiohistoriaa ei ole, joten jokainen tallennus näkyy asiakkaille heti.

  Tee työ istunnoissa jotka ehdit viedä loppuun. **Hylkää** on ainoa peruutus, ja se on käytettävissä vain tallennukseen asti.
</Warning>

## Järjestys jossa työ kannattaa tehdä

Avaa **Verkkokauppa → Teemat** ja valitse myymäläkortilta **Muokkaa**. Editori avautuu, ja vasemmassa palkissa on neljä tilaa: Settings, Content, Theme ja Translations. Tilojen nimet näkyvät englanniksi myös suomenkielisessä hallintapaneelissa.

| Kierros | Missä                                                                                  | Mitä se ratkaisee                                  |
| ------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- |
| 1       | **Asetukset → Yleiset**, editorin ulkopuolella                                         | Logotiedosto                                       |
| 2       | **Theme**-tila, **Logo**                                                               | Logon leveys ja favicon                            |
| 3       | **Theme**-tila, **Teeman tyyli**, **Värit**, **Typografia**, **Näkymä**                | Kaikki mikä koskee koko myymälää                   |
| 4       | **Theme**-tila, **Painikkeet**, **Syöttökentät**, **Listauskortti**, **Otsikkopalkki** | Osat jotka toistuvat jokaisella sivulla            |
| 5       | **Content**-tila, **Etusivu**                                                          | Mitä etusivu sanoo ja minne se ohjaa               |
| 6       | **Content**-tila, **Otsikko** ja **Alatunniste**                                       | Miten asiakas liikkuu, ja missä käytäntösi näkyvät |
| 7       | **Content**-tila, kunkin sivun **Sivun asetukset**                                     | Mikä on julkista ja mitä hakutulos näyttää         |

Jätä loput Theme-paneelit julkaisun jälkeen. **Kalenteri**, **Saatavuuden ilmaisin** ja korttipaneelit ansaitsevat oman kierroksensa kun oikeita tilauksia tulee, eivätkä ne vaikuta siihen voiko tilauksen tehdä.

Kaksi tilaa ei kuulu tähän työhön. **Translations** sisältää myymälän sanaston kielittäin, mikä on oma tehtävänsä kohdassa [Käännökset](/docs/fi/settings/translations). **Settings**-tilassa ei ole vielä myymälän asetuksia, joten verkkotunnukset, maksutavat ja myyntikanavat pysyvät päävalikon **Asetukset**-osiossa.

## Aseta logo editorin ulkopuolella, favicon editorissa

Aseta logotiedosto kohdassa **Asetukset → Yleiset**, **Logo**-kortilla, valitsemalla kuva tiedostonhallinnasta. Editorin **Logo**-paneeli asettaa **Logon leveys** -arvon ja faviconin, ei muuta.

Varaudu kahteen eri ohjeeseen samaan paikkaan: Theme-tilan **Logo**-paneeli lukee *Muokkaa logoa siirtymällä kohtaan Asetukset > Yleiset*, ja **Otsikko**-lohko lukee *Asetukset > Brändi*. Molemmat tarkoittavat samaa logotiedostoa kohdassa **Asetukset → Yleiset**.

Aseta favicon samassa Theme-tilan **Logo**-paneelissa, myös tiedostonhallinnasta. Se piirtyy kokoon 32 x 32 pikseliä, joten valitse tunnus eikä tekstilogoa.

## Kokoa etusivu viidestä lohkosta

Jokaisessa etusivun lohkossa on paneelin yläreunassa **Piilota** ja **Näytä**, joten tarpeeton lohko kytketään pois eikä poisteta. Piilotettu lohko säilyttää asetuksensa myöhempää varten.

| Lohko                | Mitä se tuo sivulle                              | Mitä tarvitset valmiina                                              |
| -------------------- | ------------------------------------------------ | -------------------------------------------------------------------- |
| **Kuvabanneri**      | Koko leveyden kuva, otsikko, kuvaus ja painike   | Yksi kuva, ja erillinen mobiilikuva jos työpöytärajaus hukkaa aiheen |
| **Hakupalkki**       | Myymälän haku                                    | Ei mitään                                                            |
| **Kokoelmaluettelo** | Kokoelmat sarakkeina ja kauppapainike            | Kokoelmat joita haluat selattavan                                    |
| **Esittelykokoelma** | Yksi kokoelma ja osa sen listauksista etusivulla | Kokoelma jolla aloittaisit                                           |
| **Listausluettelo**  | Valitsemasi listaukset rivissä                   | Julkaistut listaukset                                                |

Päätä mitä ensimmäisen näkymän on tehtävä ennen kuin raahaat lohkoja paikalleen. Useimmilla se kertoo mitä myyt ja ohjaa asiakkaan kokoelmaan. Molemmat vaativat kokoelmia, joten rakenna ne ensin: katso [Rakenna kokoelma](/docs/fi/guides/catalog/build-a-collection).

Huomaa mitä etusivun piilottaminen tekee, sillä editori kertoo sen varoittamatta: asiakkaat aloittavat silloin kokoelmasivulta. Pienelle katalogille se on järkevä valinta käyttöönotossa, ja se kannattaa tehdä tietoisesti.

## Kytke otsikko ja alatunniste kerran

Otsikko, alatunniste ja ilmoituspalkki koskevat koko myymälää. Muokkaa niitä miltä sivulta tahansa, ja muutos näkyy jokaisella sivulla.

Lisää valikon kohdat kohdassa **Otsikko → Navigaatiokohteet**. **Lisää sivulinkki** osoittaa sivuihin Etusivu, Kauppa, Perustiedot tai Kaupat, tai yhteen kokoelmaan tai kaikkiin kokoelmiin. **Lisää ulkoinen linkki** ottaa minkä tahansa osoitteen, ja se on tapa saada markkinointisivusto tai ohjekeskus valikkoon.

Pidä valikko lyhyenä. Hakupalkki kattaa sen mitä valikko ei kata, eikä myymälän valikko ole sivukartta.

Kytke alatunnisteessa päälle **Näytä käytäntölinkit** ja valitse näkyvät asiakirjat kohdassa **Näytettävät käytännöt**. Kirjoita asiakirjat ensin kohdassa [Ehdot ja käytännöt](/docs/fi/settings/terms-policies), koska alatunniste listaa vain sen mikä on olemassa.

## Aseta näkyvyys ja SEO sivukohtaisesti

Jokaisella sivulla on **Sivun asetukset** -lohko. Lue se kahtena päätöksenä:

| Asetus          | Mitä se tekee                                 | Mitä kannattaa huomata                                                                                                                |
| --------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Näytä sivu**  | Julkaisee sivun tai ottaa sen pois myymälästä | Maksusivu ja kaupan valintapalkki lukevat *Tätä sivua ei voi piilottaa*                                                               |
| **Metaotsikko** | Mitä hakutulos näyttää otsikkona              | 70 merkkiä, laskurin kanssa                                                                                                           |
| **Meta-kuvaus** | Sen alla oleva teksti                         | 160 merkkiä, laskurin kanssa                                                                                                          |
| **URL-pääte**   | Sivun polku                                   | Vain luettava. Vaihda sen sijaan verkkotunnus kohdassa [Ota verkkokauppa käyttöön](/docs/fi/guides/sales-channels/set-up-the-online-store) |

Kirjoita metaotsikko ja meta-kuvaus ainakin etusivulle ja kokoelmasivulle. Ne kaksi löydetään haulla.

## Tarkista oikea myymälä, älä esikatselua

Esikatsele editorissa kaikilla kolmella leveydellä: työpöytä 1280, tabletti 768 ja mobiili 375 pikseliä. Mobiilissa myymälän asettelut hajoavat ja siellä on suurin osa asiakkaista, joten tarkista erityisesti otsikko, listausruudukko ja kalenteri.

Avaa sitten **Verkkokauppa**-sivulta **Näytä verkkokauppasi** ja kulje sama polku jonka asiakas kulkee. Esikatselu piirtää kokoonpanosi, myymälä piirtää katalogisi, ja vain jälkimmäinen todistaa että asiakas voi tilata jotakin.

## Valmis kun

* Logosi näkyy otsikossa oikeassa myymälässä, ja favicon näkyy selaimen välilehdellä.
* Jokaisen sivun värit ja typografia tulevat teemasta, eivät oletuspaletista.
* Etusivu avautuu valitsemiisi lohkoihin, joista jokainen osoittaa olemassa olevaan kokoelmaan tai listaukseen.
* Asiakas pääsee etusivulta tilattavaan listaukseen parilla klikkauksella.
* Jokainen otsikon valikkokohta aukeaa, ja alatunnisteen käytäntölinkit avaavat kirjoittamasi asiakirjat.
* Julkaistaviksi tarkoitetuilla sivuilla **Näytä sivu** on päällä, ja muilla se on pois.
* Etusivulla ja kokoelmasivulla on kummallakin kirjoittamasi metaotsikko ja meta-kuvaus.
* Myymälä toimii mobiilileveydellä oikealla sivustolla, ei vain esikatselussa.

## Aiheeseen liittyvät artikkelit

<CardGroup cols={2} className="doc-rows-condensed">
  <Card title="Suunnittele myymäläsi" href="/docs/fi/guides/launch/shape-the-storefront">
    Käyttöönoton vaihe johon tämä opas kuuluu.
  </Card>

  <Card title="Muotoile verkkokauppa" href="/docs/fi/guides/sales-channels/design-the-storefront">
    Teemaeditori kokonaan, paneeli kerrallaan.
  </Card>

  <Card title="Sivut ja navigaatio" href="/docs/fi/guides/sales-channels/storefront-pages-and-navigation">
    Jokainen sivupohja ja jokainen koko myymälän lohko.
  </Card>

  <Card title="Teemaeditori" href="/docs/fi/sales-channels/online-store/theme-editor/overview">
    Hakusivu jokaiselle tilalle ja asetukselle.
  </Card>

  <Card title="Rakenna kokoelma" href="/docs/fi/guides/catalog/build-a-collection">
    Kokoelmat joihin etusivun lohkot osoittavat.
  </Card>

  <Card title="Ota verkkokauppa käyttöön" href="/docs/fi/guides/sales-channels/set-up-the-online-store">
    Verkkotunnukset ja asetukset joita editori ei sisällä.
  </Card>
</CardGroup>
