> ## 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 – Listaussivu

> Määritä tuotesivu — murupolku, tuotetiedot, varauswidget ja suositellut listaukset.

<Frame caption="Teemaeditori > Listaussivu">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-listing.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=911c6af83c29d183d146270644fd4b14" alt="Listaussivun pohja teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-listing.webp" />
</Frame>

Listaussivu on tuotesivu, jonka asiakas näkee yksittäisestä [listauksesta](/docs/fi/concepts/catalog/listings).

## Osiot

| Osio                            | Mitä se tekee                                                                                                                                                                                                                                                                    |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Murupolku**                   | Näytä tai piilota sivun yläreunan murupolku.                                                                                                                                                                                                                                     |
| **Listauksen tiedot**           | Tuotteen ydinalue — kuvat, otsikko, hinta, varianttivalinnat ja lisäys ostoskoriin.                                                                                                                                                                                              |
| **Noutosaatavuus**              | Kortti, joka kertoo, mistä listauksen voi noutaa. Voit ottaa kortin käyttöön sekä valita **Näytä kohdemäärät** ja **Näytä muut sijainnit**. Sen värit määritetään [noutosaatavuuden](/docs/fi/sales-channels/online-store/theme-editor/settings/pickup-availability) teemapaneelissa. |
| **Suositellut Tuotelistaukset** | Näytä lisämyynti- tai liittyvät listaukset. Ne tulevat listauksen [suosituksista](/docs/fi/catalog/listings/recommendations) ja [lisäosista](/docs/fi/catalog/listings/addons).                                                                                                            |

Vuokrauksissa täällä näkyvän saatavuuskalenterin tyylit määritetään [kalenterin](/docs/fi/sales-channels/online-store/theme-editor/settings/calendar) asetuksissa ja varianttivalintojen painikkeet [varianttipainikkeissa](/docs/fi/sales-channels/online-store/theme-editor/settings/variant-pills).

## Varauswidget

Varauswidget on listaussivun keskeinen vuorovaikutteinen elementti. Se hoitaa varianttivalinnan, päivä- ja kellonaikavalinnan, määrän, lisäosat ja ostoskoriin lisäyksen kaikilla ostotyypeillä.

<Frame>
  <img src="https://mintcdn.com/twicecommerce/5ARkyCTk5wMAizBn/images/storefront-booking-widget-variants.webp?fit=max&auto=format&n=5ARkyCTk5wMAizBn&q=85&s=fa4d67c3ee05417658cc85947fe8ae53" alt="Varauswidget varianttivalintoineen" width="1920" height="1080" data-path="images/storefront-booking-widget-variants.webp" />
</Frame>

### Ostovaihtoehdot

Widget esittää listaukselle käytettävissä olevat ostovaihtoehdot:

* **Varaa** — vuokravaraukset päivä- ja kellonaikavalinnalla sekä saatavuuskalenterilla
* **Osta** — kertaostot ilman päivämäärävalintaa
* **Tilaa** — toistuvat kestotilaukset

Jokainen vaihtoehto näkyy toimintopainikkeena. Kun listaus tukee useita ostotyyppejä, asiakas valitsee yhden, jolloin vastaava prosessi laajenee näkyviin.

### Työpöytä- ja mobiiliasettelut

**Työpöydällä** varauswidget näkyy kaksipalstaisen asettelun oikeassa palstassa (kuvat vasemmalla, tiedot ja widget oikealla). Widget pysyy näkyvissä asiakkaan vierittäessä sivua. Ostovaihtoehdon napautus laajentaa varaus- tai ostoprosessin suoraan sivulle.

**Mobiilissa** listaussivulla on kiinteä alapalkki toimintopainikkeineen. Minkä tahansa painikkeen napautus avaa koko näytön paneelin, joka sisältää täyden varausprosessin — varianttivalinnan, päivä- ja kellonaikavalitsimet, määrän, lisäosat ja ostoskoriin lisäyksen.

<Frame>
  <img src="https://mintcdn.com/twicecommerce/5ARkyCTk5wMAizBn/images/storefront-mobile-booking-drawer.webp?fit=max&auto=format&n=5ARkyCTk5wMAizBn&q=85&s=4659c1cbe15175ab3877d8751f0ad315" alt="Mobiilin varauspaneeli" width="390" height="844" data-path="images/storefront-mobile-booking-drawer.webp" />
</Frame>

### Varianttivalinta

[Varianttien](/docs/fi/concepts/catalog/variants) valinta tapahtuu varauswidgetin sisällä, ei erillisenä elementtinä listaussivulla. Jokainen varianttiakseli (kuten koko tai väri) näkyy rivinä pyöreitä painikkeita. Asiakas valitsee arvon napauttamalla painiketta.

Kun varianttiakselilla on vain yksi arvo, se valitaan automaattisesti — asiakkaan ei tarvitse tehdä mitään. Kun arvoja on useita, ensimmäinen on valmiiksi valittuna ja asiakas voi vaihtaa sen napauttamalla toista painiketta.

Toisen varianttiarvon valinta päivittää saatavuuskalenterin ja hinnoittelun reaaliajassa. Lisäosat näkyvät vasta, kun kaikilla varianttiakseleilla on valinta.

### Päivämäärän ja kellonajan valinta

Varausostoissa widget näyttää:

1. **Kestovaihtoehdot** — kiinteän mittaiset paketit tai oma aikaväli sen mukaan, miten listauksen [hintataulukko](/docs/fi/concepts/catalog/price-tables) on määritetty
2. **Päivävalitsin** — saatavuuskalenteri, joka korostaa vapaat ja varatut päivät. Ensimmäinen vapaa päivä on valmiiksi valittuna.
3. **Kellonaikavalitsimet** — nouto- ja palautusaikojen valikot, jotka tulevat näkyviin päivämäärien valinnan jälkeen. Varatut ajat piilotetaan valitsimesta, jotta vaihtoehdot pysyvät selkeinä. Jos aiemmin valittu aika ei ole enää vapaa, se pysyy näkyvissä, jotta asiakas huomaa valintansa vaativan muutosta.

<Frame>
  <img src="https://mintcdn.com/twicecommerce/5ARkyCTk5wMAizBn/images/storefront-time-picker.webp?fit=max&auto=format&n=5ARkyCTk5wMAizBn&q=85&s=57dec3e23334c3c460d1afbb091a46ad" alt="Kellonaikavalitsin, jossa näkyvät vain vapaat noutoajat" width="1920" height="1080" data-path="images/storefront-time-picker.webp" />
</Frame>

### Ostoskoriin lisäys

Kun asiakas vahvistaa valintansa, widget tarkistaa, että kaikki pakolliset tiedot on täytetty (variantit, päivät, kellonajat, määrä), ja lähettää valinnan palvelimelle lopullista saatavuustarkistusta varten. Onnistuessa artikkeli lisätään [ostoskoriin](/docs/fi/sales-channels/online-store/theme-editor/pages/bag).

## Jaetut lohkot

Ilmoituspalkki, ylätunniste, alatunniste ja sivun asetukset koskevat koko kauppaa — katso [teemaeditorin yleiskatsaus](/docs/fi/sales-channels/online-store/theme-editor/overview) ja sen osio useimpien sivujen lohkoista.

## Aiheeseen liittyvät

<CardGroup cols={2}>
  <Card title="Varianttipainikkeet" icon="shapes" href="/docs/fi/sales-channels/online-store/theme-editor/settings/variant-pills">
    Muokkaa varianttivalitsimien ulkoasua.
  </Card>

  <Card title="Kalenteri" icon="calendar" href="/docs/fi/sales-channels/online-store/theme-editor/settings/calendar">
    Muokkaa vuokrausten saatavuuskalenterin ulkoasua.
  </Card>

  <Card title="Variantit" icon="layers-three-01" href="/docs/fi/concepts/catalog/variants">
    Varianttiakselit, arvot ja varianttikohtainen hinnoittelu.
  </Card>

  <Card title="Hintataulukot" icon="table" href="/docs/fi/concepts/catalog/price-tables">
    Varausten, myyntien ja kestotilausten hinnoittelun määritys.
  </Card>
</CardGroup>