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

# Verkkokauppa

> TWICEn sisäänrakennettu verkkokauppa suoraan kuluttajille suuntautuvaan vuokraukseen ja myyntiin — teemoitettava, monitoimipisteinen ja samassa varastossa kiinni kuin kaikki muutkin kanavat.

<Frame caption="Myyntikanavat > Verkkokauppa">
  <img src="https://mintcdn.com/twicecommerce/Ab7tx7ih94KQsi0k/images/online-store.webp?fit=max&auto=format&n=Ab7tx7ih94KQsi0k&q=85&s=c3e11b99f62865d9559c9389ab923595" alt="Verkkokaupan asetukset hallintapaneelissa" width="1920" height="1080" data-path="images/online-store.webp" />
</Frame>

## Määritelmä

<Snippet file="definitions/fi/online-store-definition.mdx" />

Verkkokauppa on TWICEn mukana tuleva julkinen myymälä — erillistä alustaa ei tarvitse ylläpitää eikä liitännäistä asentaa. Se lukee samoja listauksia, varastoartikkeleita, hintataulukoita ja sijainteja, joita hallitset hallintapaneelissa, ja kirjoittaa tilaukset takaisin samaan tilaustaulukkoon, johon henkilökunnan luomat tilauksetkin päätyvät.

## Verkkokaupan arkkitehtuuri

Verkkokaupassa on kolme kerrosta:

| Kerros                   | Mikä se on                                                                                                           | Missä se määritetään                            |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- |
| **Teema**                | Verkkokauppasi visuaalinen ilme — värit, typografia, asettelu, komponenttien tyylit                                  | Myyntikanavat > Verkkokauppa > Teemat > Muokkaa |
| **Käännökset**           | Verkkokaupan tekstit — ylä- ja alatunnisteet, nimikkeet ja sivutekstit — hallittuna käännösmerkkijonojen korvauksina | Asetukset > Käännökset tai editorin käännöstila |
| **Verkkokaupan editori** | Sivukohtainen määritys ja reaaliaikainen esikatselu                                                                  | Myyntikanavat > Verkkokauppa > Teemat > Muokkaa |

Verkkokaupan editori piirtää todellisen asiakaskokemuksen, joten voit esikatsella muutoksia missä tahansa näyttökoossa ennen tallennusta. Tallennus vie ne julkiseen verkkokauppaan välittömästi — erillistä julkaisuvaihetta ei ole.

## Verkkokaupan sivut

Verkkokaupalla on kiinteä sivujoukko — mukautat asettelua, sisältöä ja ulkoasua, et itse sivurakennetta:

| Sivu             | Tarkoitus                                                       |
| :--------------- | :-------------------------------------------------------------- |
| **Etusivu**      | Aloitussivu — hero-osio, nostetut kokoelmat, kampanjalohkot     |
| **Toimipisteet** | Sijaintiesi hakemisto (näkyy vain, jos toimipisteitä on useita) |
| **Toimipiste**   | Toimipistekohtainen aloitussivu                                 |
| **Kokoelma**     | Listauskokoelman selaus                                         |
| **Listaus**      | Yksittäisen listauksen tuotesivu                                |
| **Ostoskori**    | Asiakkaan kori — esikatselu ennen kassaa                        |
| **Kassa**        | Osoite, keräilyvaihtoehdot, maksu                               |
| **Tietoa**       | Staattinen sisältösivu brändisi tarinalle                       |

Sivupolut ovat kiinteät; verkkotunnus, jolta ne tarjoillaan, riippuu [verkkotunnusmäärityksistäsi](/docs/fi/settings/domains).

## Teemajärjestelmä

Verkkokaupallasi on yksi teemamääritys — joukko suunnittelutokeneita, jotka kattavat värit, typografian, asettelun ja komponenttien tyylit. Versioituja teemapaketteja, teemakirjastoa tai luonnosteemoja ei ole: verkkokaupan editori muokkaa suoraan tätä yhtä määritystä, ja tallennus vie sen julkiseen verkkokauppaan välittömästi.

Teema määritetään verkkokaupan editorin teematilan paneeleista:

| Paneeliryhmä    | Paneelit                                                                                                                                                                           |
| :-------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Yleiset**     | Logo, värit, typografia, asettelu                                                                                                                                                  |
| **Komponentit** | Painikkeet, syötekentät, murupolku, avattava osio, kalenteri                                                                                                                       |
| **Kortit**      | Varianttipainikkeet, listauskortti, kokoelmakortti, noudon saatavuus, ostoskorin toimipistevalitsin, saatavuusosoitin, ylätunnistepalkki, ilmoituspalkki, hakupalkki, suodatinosio |
| **Asetukset**   | Mukautettu CSS, teematyyli                                                                                                                                                         |

Lue lisää: [Teemat](/docs/fi/sales-channels/online-store/themes) · [Teemaeditori](/docs/fi/sales-channels/online-store/theme-editor/overview)

## Usean toimipisteen tuki

Verkkokaupan **toimipiste** on palvelu[sijainti](/docs/fi/concepts/admin/locations) — samoja sijainteja, joita hallitset hallintapaneelissa. Kun verkkokauppakanavaan on otettu käyttöön useampi kuin yksi sijainti, verkkokaupassa näkyy Toimipisteet-sivu, sijaintikohtainen toimipistesivu ja toimipistevalitsin, jota asiakkaat käyttävät ennen kassalle siirtymistä.

Kaikki toimipisteet ovat yhden verkkokaupan sisällä. Niillä ei ole omaa teemaa, verkkotunnusta tai kielivalikoimaa — tilin yksi teemamääritys, verkkotunnusmääritykset ja verkkokaupan kielet koskevat jokaista toimipistettä. Toimipisteittäin vaihtelee:

* Mitkä listaukset ovat saatavilla (sen perusteella, mitkä listaukset on julkaistu toimipisteen sijaintiin)
* Varasto ja saatavuus, jotka määräytyvät sijainnin varastoartikkelien ja aukioloaikojen mukaan

Katalogi on jaettu koko tilin kesken — jokainen toimipiste ammentaa samoista listauksista, mutta myy oman sijaintinsa varastoartikkeleita.

## Verkkotunnuksen määritys

Verkkokauppa tarjoillaan jommastakummasta verkkotunnustyypistä:

| Verkkotunnuksen tyyppi      | Muoto                 | Huomioita                                           |
| :-------------------------- | :-------------------- | :-------------------------------------------------- |
| **TWICEn isännöimä**        | `twice.shop/kauppasi` | Oletus — toimii heti, ei DNS-määrityksiä            |
| **Mukautettu verkkotunnus** | `shop.brandisi.fi`    | Tuot oman verkkotunnuksesi ja osoitat DNS:n TWICEen |

Kuinka monta mukautettua verkkotunnusta voit yhdistää, riippuu tilaustasostasi — katso [Verkkotunnukset](/docs/fi/settings/domains).

Määritä verkkotunnukset kohdassa **Asetukset > Verkkotunnukset**. TWICE hankkii SSL-varmenteen automaattisesti, kun DNS on vahvistettu.

Lue lisää: [Verkkotunnusasetukset](/docs/fi/settings/domains)

## Asiakastilit verkkokaupassa

Verkkokauppa tukee asiakastilejä, joten asiakkaat voivat:

* Nähdä aiemmat tilauksensa
* Tarkastella aktiivisia vuokrauksiaan ja palautuspäiviä
* Tallentaa maksutapoja (kun maksupalveluntarjoaja tukee sitä)
* Tilata uudelleen tai jatkaa vuokrausta syöttämättä tietoja uudelleen

Verkkokaupan asiakastilit linkittyvät suoraan hallintapaneelin [asiakasprofiileihin](/docs/fi/concepts/customers/customer-profiles) — kirjautunut asiakas näkee oman datansa, ja henkilökunta näkee saman tietueen hallintapaneelin puolelta.

Myös ulkoinen tunnistautuminen on tuettu — yhdistä oma tunnistuspalveluntarjoajasi auth handlerin kautta.

## Kanavakohtainen saatavuus listauksittain

Listaukset eivät näy verkkokaupassa automaattisesti. Jokaisella listauksella on julkaisuvälilehti, joka ohjaa seuraavia:

* Onko listaus julkaistu verkkokauppakanavaan
* Missä toimipisteissä se näkyy (usean toimipisteen tileillä)
* Näkyykö se kaikille asiakasryhmille vai rajatusti
* Onko listaus haettavissa, selattavissa kokoelmissa vai vain suoralla linkillä saavutettavissa

Lue lisää: [Listaukset](/docs/fi/concepts/catalog/listings) · [Listausten julkaisuvälilehti](/docs/fi/catalog/listings/publishing)

## Toimipisteen valinta

Verkkokaupoissa, joissa on useita aktiivisia sijainteja, asiakkaat valitsevat ennen kassalle siirtymistä, mistä sijainnista he tilaavat. Toimipistevalitsin näkyy kahdessa paikassa:

* **Yläpalkki** — painike jokaisella verkkokaupan sivulla (kassaa lukuun ottamatta), joka avaa sivupaneelin, jossa on kaikki aktiiviset sijainnit. Kussakin kohdassa näkyy toimipisteen nimi, osoite ja aukioloajat.
* **Ostoskorisivu** — valitsin, joka antaa reaaliaikaista tietoa saatavuudesta. Se näyttää, kuinka moni sijainti pystyy toimittamaan nykyisen ostoskorin, ja merkitsee jokaisen toimipisteen tilaan ”Cart available” tai ”Cart unavailable” valittujen päivien ja määrien varastotilanteen perusteella.

Valinta säilyy sivunavigoinnin ja selainistuntojen yli. Toimipiste on valittava, ennen kuin asiakas voi siirtyä kassalle.

Yhden toimipisteen kauppiailla ainoa sijainti valitaan automaattisesti ja valitsin piilotetaan.

Määritä sivupaneelin sisältö (otsikko, kuvaus, haku) asetuspaneelissa [Toimipisteen valinnan sivupaneeli](/docs/fi/sales-channels/online-store/theme-editor/settings/store-selection).

## Varaus- ja ostoprosessi

[Listaussivulla](/docs/fi/sales-channels/online-store/theme-editor/pages/listing) on varaustyökalu, jossa asiakkaat tekevät ostovalintansa. Työkalu mukautuu listauksen ostotyyppeihin:

* **Varaus** — asiakas valitsee päivät ja kellonajat saatavuuskalenterista, valitsee varianttivaihtoehdot (koko, väri), valitsee määrän ja lisää ostoskoriin
* **Myynti** — asiakas valitsee variantit ja määrän ja lisää sitten ostoskoriin
* **Kestotilaus** — asiakas valitsee kestotilaussuunnitelman ja aloituspäivän

Työpöytänäkymässä työkalu piirtyy tuotekuvien viereen. Mobiilissa ostopainikkeen napautus avaa koko näytön paneelin, jossa on koko prosessi.

[Varianttien](/docs/fi/concepts/catalog/variants) valinta tapahtuu varaustyökalun sisällä. Yksiarvoiset variantit valitaan automaattisesti. Saatavuuskalenteri ja hinnoittelu päivittyvät reaaliajassa, kun asiakas muuttaa varianttivalintaansa.

### Varausvaihtoehdot ja valittu päivä

**Booking options** -pudotusvalikko heijastaa asiakkaan valitsemaa päivää. Vaihtoehto, joka ei voi alkaa kyseisenä päivänä, näkyy harmaana ja sen alla lukee ensimmäinen päivä, jona se voi alkaa — *”Ei saatavilla valituille päiville — seuraava vapaa ma 18.8.”*. Kun myöhempää mahdollista aloituspäivää ei löydy, teksti jättää päivämäärän pois ja kuuluu *”Ei saatavilla valituille päiville”*.

Harmaat vaihtoehdot ovat silti valittavissa. Sellaisen valinta siirtää aloituspäivän kyseisen vaihtoehdon seuraavaan mahdolliseen aloituspäivään ja siirtää kalenterin kyseiseen kuukauteen. Vanhalle päivälle valitut kellonajat pudotetaan ja johdetaan uudelleen uudelle päivälle.

Jokainen vaihtoehto arvioidaan omilla ehdoillaan: omien aloitusaikojensa, tarvitsemansa koko varausikkunan ja — katkaistuina jaksoina laskutettavissa vaihtoehdoissa — sen perusteella, tuottaako viimeinen jakso kelvollisen palautuksen. Myös pyydetty määrä vaikuttaa, joten sama päivä voi jättää yhden vaihtoehdon varattavaksi ja harmaannuttaa toisen.

Seuraavan vapaan päivän hakuun pätee kaksi rajaa. Eteenpäin suuntautuva haku kattaa vain ne päivät, joille työkalu on jo ladannut saatavuuden, ja se pysähtyy 180 päivän päähän. Vaihtoehto, jolla ei ole mahdollista aloituspäivää näiden rajojen sisällä, näyttää tekstin ilman päivämäärää.

Myynti- ja kestotilausvaihtoehtoja ei koskaan harmaanneta — ne ovat pistemäisiä hetkiä eivätkä sisällä varausikkunaa. Kun sekatyyppisellä listauksella on valittuna myynti- tai kestotilausvaihtoehto, mitään varausvaihtoehtoa ei myöskään harmaanneta.

### Kassalta poistuminen

Asiakas, joka on saapunut kassalle verkkokaupastasi, voi poistua ensimmäisestä vaiheesta painikkeella **Takaisin verkkokauppaan**, joka palauttaa hänet ostoskoriin. Kassan ylätunnisteen logo vie samaan paikkaan. Molemmat ovat kokonaisia sivulatauksia eivätkä sovelluksen sisäistä navigointia, joten kassasivun tila puretaan: aiemmassa vaiheessa lähetetyt tiedot on tallennettu kassalle, mutta kaikki nykyiseen vaiheeseen kirjoitettu ja vielä lähettämätön katoaa.

Asiakkaat, jotka avasivat kassalinkin sen sijaan, että olisivat asioineet verkkokaupassa, eivät saa tällaista poistumistietä — heillä ei koskaan ollut ostoskoria, johon palata. Katso [Vaiheiden välillä liikkuminen](/docs/fi/settings/checkouts/steps), jossa käsitellään muiden vaiheiden paluupainiketta.

## Varasto ja saatavuus verkkokaupassa

Verkkokauppa lukee elävää varastoasi:

* Asiakkaat näkevät reaaliaikaisen saatavuuden varastoartikkelien sitoumusten ja saatavuusesteiden perusteella
* Vuokrauksissa kalenteri näyttää aikavälit, joilla on vapaita yksiköitä, estetyt päivät ja sijaintikohtaiset aukioloajat
* Kun asiakas valitsee [toimipisteen](/docs/fi/sales-channels/online-store/theme-editor/settings/store-selection), varaustyökalu näyttää toimipistekohtaisen saatavuuden ja hinnoittelun
* Loppuunmyydyt ja ei-saatavilla olevat listaukset voidaan piilottaa, harmaannuttaa tai näyttää ”seuraava vapaa” -vihjeen kanssa teemamäärityksestä riippuen
* Kun asiakas valitsee toimipisteen, saatavuus rajautuu kyseisen sijainnin varastoon — katso [Listausten saatavuus](/docs/fi/concepts/catalog/availability), jossa kerrotaan, miten kelpoisuus- ja varastotarkistukset kerrostuvat
* Ostoskorissa olevat artikkelit lasketaan varatuiksi asiakkaan jatkaessa asiointia, puskuriajat mukaan lukien — katso [Listausten saatavuus](/docs/fi/concepts/catalog/availability) ja sen osio ostoskorissa jo olevista artikkeleista

Verkkokauppa ja hallintapaneeli käyttävät samaa allokointimoottoria — se mikä on saatavilla kassalla vastaa sitä, minkä hallintapaneeli voi sitoa.

## Asetukset, jotka vaikuttavat verkkokauppaan

Useat muut asetukset muokkaavat verkkokaupan toimintaa:

| Asetus                                            | Vaikutus                                                                                                                                         |
| :------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| [Sijainnit](/docs/fi/settings/locations)               | Mitkä sijainnit on otettu käyttöön verkkokauppakanavaan                                                                                          |
| [Kassat](/docs/fi/settings/checkouts)                  | Pakolliset kentät, ehdot, iän varmistus. [Sijaintikohtaisella kohdistuksella](/docs/fi/settings/checkouts) voit käyttää eri kassoja eri sijainneissa. |
| [Maksut](/docs/fi/settings/payments)                   | Kassalla tarjottavat maksutavat                                                                                                                  |
| [Verot](/docs/fi/settings/taxes)                       | Sijaintikohtaiset verokannat, joita sovelletaan tilauksiin                                                                                       |
| [Verkkotunnukset](/docs/fi/settings/domains)           | Verkkokauppaan liitetyt mukautetut verkkotunnukset                                                                                               |
| [Käännökset](/docs/fi/settings/translations)           | Monikielinen verkkokaupan sisältö                                                                                                                |
| [Ehdot ja käytännöt](/docs/fi/settings/terms-policies) | Kassalla näytettävät sopimusehdot ja käytäntödokumentit                                                                                          |

## Suhteet

```mermaid theme={null}
%%{init: {'flowchart': {'nodeSpacing': 20, 'rankSpacing': 30}}}%%
flowchart TB
    subgraph SalesChannel["Myyntikanavat"]
        direction TB
        OnlineStore["**Verkkokauppa**"]
        Admin["Hallintapaneeli"]
        OnlineStore ~~~ Admin
    end

    Theme["Teema"]
    Domain["Verkkotunnus"]
    Store["Toimipiste"]
    Listing["Listaus"]
    Location["Sijainti"]
    Order["Tilaus"]

    OnlineStore -->|tyylittelee| Theme
    OnlineStore -->|tarjoillaan| Domain
    OnlineStore -->|koostuu| Store
    Store -->|julkaisee| Listing
    Store -->|sidottu| Location
    OnlineStore -->|luo| Order

    style SalesChannel fill:#0000000d,stroke:#888,stroke-width:2px
    style OnlineStore fill:#3b82f633,stroke:#3b82f6,stroke-width:3px,font-weight:bold
    style Admin fill:#0000000a,stroke:#999,stroke-width:1px
    style Theme fill:#10b98133,stroke:#10b981,stroke-width:2px
    style Domain fill:#10b98133,stroke:#10b981,stroke-width:2px
    style Store fill:#10b98133,stroke:#10b981,stroke-width:2px
    style Listing fill:#10b98133,stroke:#10b981,stroke-width:2px
    style Location fill:#10b98133,stroke:#10b981,stroke-width:2px
    style Order fill:#10b98133,stroke:#10b981,stroke-width:2px
```

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Verkkokaupan yleiskatsaus" icon="store" href="/docs/fi/sales-channels/online-store/overview">
    Verkkokaupan käyttöönotto ja määritys
  </Card>

  <Card title="Teemat" icon="palette" href="/docs/fi/sales-channels/online-store/themes">
    Avaa verkkokaupan editori
  </Card>

  <Card title="Teemaeditori" icon="pen-ruler" href="/docs/fi/sales-channels/online-store/theme-editor/overview">
    Visuaalinen editori sivukohtaisine paneeleineen
  </Card>

  <Card title="Verkkotunnukset" icon="globe" href="/docs/fi/settings/domains">
    Mukautetut verkkotunnukset ja TWICEn isännöimät osoitteet
  </Card>

  <Card title="Listaukset" icon="tag" href="/docs/fi/concepts/catalog/listings">
    Mitä verkkokauppaan julkaistaan
  </Card>

  <Card title="Sijainnit" icon="warehouse" href="/docs/fi/concepts/admin/locations">
    Sijainnit ja toimipistekanavat
  </Card>
</CardGroup>
