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

# Kategoriapuiden tyylit kaupan sivupalkissa

> Mitä asiakas näkee kaupan sivupalkissa kullakin kategoriapuun näyttötyylillä, kaupan yleisnäkymästä yksittäiseen ryhmään asti.

Valitse tyyli kentässä **Näyttö** kohdassa **Kategoriapuut** teemaeditorin **Kokoelmasivulla**. Tyyli määrää, miten kaupan sivupalkki näyttää kohdassa **Valitse kategoriapuut** valitsemasi puut: kaupan yleisnäkymässä osoitteessa `/shop` ja jokaisella sen alla olevalla puun ja ryhmän sivulla.

![Kategoriapuut-paneeli, jossa kaksi puuta kohdassa Valitse kategoriapuut ja Näyttö-valikko auki, tyylit otsikoiden Valikot ja Suodattimet alla](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/theme-editor-category-tree-display.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=1cca00a6cdf11b9b671fcbea8ce797b3)

Tyylejä on kahta lajia, ja **Näyttö**-valikko listaa ne näiden kahden otsikon alle:

| Laji | Tyylit | Mitä napsautus tekee |
| - | - | - |
| **Valikot** | **Laajennettava valikko**, **Kohdistettu valikko**, **Vaiheittainen valikko** | Avaa ryhmän oman sivun, jolla on oma osoite ja otsikko |
| **Suodattimet** | **Valintaruutupuu** | Valitsee ryhmän ja lisää sen listaukset ruudukkoon sillä sivulla, jolla asiakas on |

## Miten se toimii

Valikkotyyli on omana lohkonaan sivupalkin yläosassa hakukentän alla. **Valintaruutupuu** on sen sijaan suodatinosioiden joukossa omassa osiossaan, jonka otsikko on **Selaa**.

Alla olevat esimerkit käyttävät yhtä kauppaa, jossa on kaksi puuta. **Shop by activity** -puussa ovat **Winter**, **Cycling**, **Clothing** ja **Drinkware**. **Winter**-ryhmän alla ovat **Skis**, **Boots** ja **Poles**, ja **Skis**-ryhmän alla **For rent** ja **Pre-owned**. Toisessa puussa, **Pre-owned**, ovat **Skis** ja **Bikes**. Valikkotyylien kuvakaappauksissa asiakas on **Skis**-sivulla, joten voit verrata tyylejä samassa kohdassa.

### Laajennettava valikko

**Laajennettava valikko** listaa jokaisen puun kokonaan. Jokainen puu on auki ensimmäiseltä tasoltaan, ja polku asiakkaan nykyiselle sivulle on auki sivuun asti. Kaikki muut haarat ovat aluksi kiinni.

Ryhmän nimi avaa sen sivun. Rivin lopussa oleva nuoli vain avaa tai sulkee haaran, joten asiakas voi katsoa toiseen haaraan poistumatta sivulta. Kaupan yleisnäkymään vievä **Kaikki** pysyy ylimpänä.

![Skis-sivu, jonka sivupalkissa on Laajennettava valikko. Korostettuina All, nykyinen ryhmä Skis ja kokoon taitetun Cycling-haaran nuoli](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-expandable-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=a35ea0a9c0c14fce16d5ff3aab932737)

Käytä sitä kaupassa, jonka puut ovat niin lyhyitä, että ne voi lukea kerralla, ja tasoilla on vain muutama ryhmä.

### Kohdistettu valikko

**Kohdistettu valikko** näyttää vain sen, missä asiakas on. Ryhmän sivulla se listaa linkin askeleen taaksepäin, ryhmän sen rinnalla olevien ryhmien joukossa ja ryhmät sen alla. Muut haarat ja ylemmät tasot jätetään pois, ja ruudukon yläpuolella oleva murupolku vie takaisin niihin.

Puun omalla sivulla se listaa **Kaikki**-linkin, puiden nimet ja avoimen puun ensimmäisen tason sen nimen alla. Kaupan yleisnäkymässä se listaa **Kaikki**-linkin ja puiden nimet.

![Skis-sivu, jonka sivupalkissa on Kohdistettu valikko. Korostettuina linkki takaisin Winter-ryhmään, nykyinen ryhmä Skis ja sen ryhmät For rent ja Pre-owned](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-focused-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=00573f851b0bace4dfac3b2d4571b8b5)

Käytä sitä suuressa tai syvässä puussa, jossa koko luettelo työntäisi suodattimet pois näytöltä.

### Vaiheittainen valikko

**Vaiheittainen valikko** näyttää yhden tason kerrallaan. Ryhmän sivulla se listaa linkin askeleen taaksepäin ja ryhmän alla olevat ryhmät. Sivun otsikko nimeää ryhmän, joten luettelo jättää sen pois. Ryhmä, jonka alla ei ole mitään, listaa sen sijaan sisaruksensa ja merkitsee itsensä, jotta asiakas voi yhä siirtyä sivuttain.

Puun sivulla takaisin vievä linkki on **Kaikki** ja vie kaupan yleisnäkymään. Yleisnäkymässä sivupalkki listaa **Kaikki**-linkin ja puiden nimet.

![Skis-sivu, jonka sivupalkissa on Vaiheittainen valikko. Korostettuina linkki takaisin Winter-ryhmään, sivun otsikko Skis ja ryhmät For rent ja Pre-owned](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-step-by-step-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=fbfce0cb35a49aaa710df1fd364f4225)

Käytä sitä, kun haluat asiakkaan tekevän yhden valinnan näkymää kohden, esimerkiksi valitsevan ensin lajin ja sitten tyypin.

### Valintaruutupuu

**Valintaruutupuu** tekee puista suodattimen. Jokainen puu on valintaruuturivi, jonka alla ovat sen ryhmät, ja jokaisella rivillä on sen takana olevien listausten määrä. Ruudukko listaa sen, mikä on missä tahansa valitussa ryhmässä, olipa se missä puussa tahansa, joten jokainen valinta lisää listauksia. Muut suodatinosiot rajaavat sitten tulosta.

![Kaupan yleisnäkymä, jossa Browse-osiossa on Valintaruutupuu. Boots ja Bikes on valittu, Winter-rivillä on viiva ja ruudukon yläpuolella on kaksi sirua](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-checkbox-tree.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=cfe0c5ff99ab03e20cba4c11c2f7ccdb)

Valinta kattaa kaiken sen alla, ja puun oma valinta kattaa koko puun. Ryhmän valitseminen korvaa sen yllä tai alla olevan valinnan, joten valinnat eivät koskaan mene päällekkäin. Rivillä, jonka alla on jossain valinta, näkyy viiva.

Jokainen valinta näkyy sirukkeena ruudukon yläpuolella, ja sen voi poistaa ×-merkistä. Puun tai ryhmän sivulla kyseinen sivu näkyy valintana. Kun asiakas muuttaa siellä mitä tahansa valintaa, hän siirtyy kaupan yleisnäkymään uusilla valinnoilla.

Puut ja haarat ovat aluksi kiinni, paitsi tie valintaan. Kaupassa, jossa on yksi puu, se näkyy auki. **Kaikki**-riviä ei ole, koska kaikkien valintojen poistaminen vie takaisin koko kauppaan.

Käytä sitä, kun asiakkaat vertailevat ryhmien välillä, esimerkiksi kahta lajia kerralla tai yhden tyypin kaikkia kokoja.

> [!NOTE]
>
> Taksonomiakategorioista rakennettu puu näyttää saman hierarkian kuin **Kategoriat**-suodatin. Kytke **Kategoriat** pois kohdassa **Listausten ruudukko**, jos näytät puun **Valintaruutupuuna**, jotta sivupalkki ei tarjoa sitä kahteen kertaan.

## Käyttö

### Vertaa tyylejä eri kohdissa

Valikkotyylit eroavat eniten ryhmän sivulla syvällä puussa. Tämän kukin listaa kussakin kohdassa:

| Asiakas on | Laajennettava valikko | Kohdistettu valikko | Vaiheittainen valikko |
| - | - | - | - |
| Kaupan yleisnäkymässä | **Kaikki** ja jokainen puu auki ensimmäiseltä tasoltaan | **Kaikki** ja puiden nimet | **Kaikki** ja puiden nimet |
| Puun sivulla | **Kaikki** ja jokainen puu, tämä merkittynä | **Kaikki**, puiden nimet ja tämän puun ensimmäinen taso sen nimen alla | Linkki takaisin **Kaikki**-kohtaan ja tämän puun ensimmäinen taso |
| Ryhmän sivulla | **Kaikki** ja jokainen puu, polku tähän ryhmään auki | Linkki takaisin, tämä ryhmä sisarustensa joukossa ja sen alla olevat ryhmät | Linkki takaisin ja tämän ryhmän ryhmät |
| Ryhmässä, jonka alla ei ole mitään | Sama, tämä ryhmä merkittynä | Linkki takaisin ja tämä ryhmä sisarustensa joukossa | Linkki takaisin ja tämä ryhmä sisarustensa joukossa merkittynä |

### Tarkista puhelinnäkymä

Puhelimessa sivupalkki avautuu ruudukon yläpuolelta kohdasta **Suodata ja järjestä**. Puut ovat siellä aluksi kiinni tyyleissä **Laajennettava valikko** ja **Valintaruutupuu**, joten laatikko aukeaa lyhyenä. **Laajennettavassa valikossa** polku asiakkaan nykyiselle sivulle aukeaa, kun hän avaa sen puun.

![Puhelimen Suodata ja järjestä -laatikko, jossa puut Shop by activity ja Pre-owned ovat kokoon taitettuina ja niiden nuolet korostettuina](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-category-tree-phone-drawer.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=4760d8b9c984e6adb0b24384c8e0af38)

### Pidä tasaiset kokoelmat puiden rinnalla

**Kokoelmat**-suodattimen kytkin kohdassa **Listausten ruudukko** ohjaa vain kokoelmien tasaista luetteloa. Valikkotyylillä puut ovat omassa lohkossaan, ja **Kokoelmat**-osio listaa kokoelmasi niiden alla. **Valintaruutupuulla** **Selaa**-osio ottaa **Kokoelmien** paikan suodatinjärjestyksessä, ja tasainen luettelo seuraa sitä, kun kytkin on päällä.

### Näytä puu vain ylätunnisteessa

Puu, jonka valitset kohdassa **Otsikko** mutta et kohdassa **Valitse kategoriapuut**, avautuu omaan osoitteeseensa ilman sivupalkkia. Jos haluat sen sivuille sivupalkin, valitse se myös kohdassa **Valitse kategoriapuut**. Katso [Kategoriapuut ylätunnisteessa](https://www.twicecommerce.com/docs/fi/concepts/catalog/category-trees-in-the-header.md).

## Aiheeseen liittyvät artikkelit

> **[Kategoriapuut ylätunnisteessa](https://www.twicecommerce.com/docs/fi/concepts/catalog/category-trees-in-the-header.md)**
>
> Valikot, jotka kaupan linkki ja omat navigaatiokohteesi avaavat.

> **[Rakenna kategoriapuu](https://www.twicecommerce.com/docs/fi/guides/catalog/build-a-category-tree.md)**
>
> Rakenna puu ja valitse puut, jotka kauppasi näyttää.

> **[Kategoriapuu](https://www.twicecommerce.com/docs/fi/concepts/catalog/category-trees.md)**
>
> Miten ryhmät ja tasot rajaavat listauksiasi.

> **[Teemaeditori: Kokoelmasivu](https://www.twicecommerce.com/docs/fi/sales-channels/online-store/theme-editor/pages/collection.md)**
>
> Sivu, jolla sivupalkki ja sen suodattimet asetetaan.

> **[Tuo suodattimet verkkokauppaan](https://www.twicecommerce.com/docs/fi/guides/catalog/offer-online-store-filters.md)**
>
> Attribuuttisuodattimet, jotka rajaavat sitä, mitä puut keräävät.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.