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

# Kategoriapuut ylätunnisteessa

> Mitä kaupan linkki ja omat navigaatiokohteesi avaavat verkkokaupan ylätunnisteessa kullakin valikkotyypillä, tietokoneella ja puhelimessa.

Aseta, mitä ylätunniste avaa, teemaeditorin kohdassa **Otsikko**. Kaksi asetusta tuo kategoriapuut sinne: **Tyyppi** kohdassa **Kaupan linkki** ja **Pudotusvalikko** navigaatiokohteessa, jonka **Sivu** on **Kategoriapuut**.

Ylätunniste valitsee omat puunsa erillään niistä, jotka kaupan sivupalkki näyttää. Jätä sen **Valitse kategoriapuut** tyhjäksi, niin se käyttää valintaa **Kaupan kategoriapuut**, eli **Kokoelmasivulla** valittuja puita.

![Kaupan linkki -asetukset kohdassa Otsikko: Tyyppi on Megavalikko, kohdassa Valitse kategoriapuut on yksi puu ja Linkkejä saraketta kohti on korostettuna](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/theme-editor-header-shop-link.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=f2c8a0b96dbde210cc03f4735b33f5a7)

## Miten se toimii

**Kaupan linkki** ilmestyy kohtaan **Otsikko**, kun olet rakentanut puun. Se ohjaa ylätunnisteen valmista **Kauppa**-kohdetta ja jokaista navigaatiokohdetta, jonka **Sivu** on **Kauppa (Kokoelmat)** ilman valittua kokoelmaa.

Alla olevat esimerkit käyttävät koko ajan samoja kahta puuta. **Shop by activity** -puussa ovat **Winter**, **Cycling**, **Clothing** ja **Drinkware**, ja **Pre-owned**-puussa **Skis** ja **Bikes**.

### Megavalikko

**Megavalikko** avaa ylätunnisteen levyisen paneelin, jossa on sarake jokaista puuta kohden. Puun nimi on sarakkeen otsikkona ja avaa puun sivun. Sen ensimmäisen tason ryhmät ovat alla linkkeinä.

Sarake listaa niin monta ryhmää kuin **Linkkejä saraketta kohti** sallii, 3–20, aluksi 8. Pidempi sarake päättyy linkkiin **Näytä kaikki** ja ryhmien määrään, ja se avaa puun sivun. Raja pitää sarakkeet suunnilleen tasapituisina, vaikka yksi puu olisi pitkä.

![Shop-megavalikko auki, jokaisella puulla oma sarake. Korostettuina puun nimi Shop by activity, sen ensimmäisen tason ryhmät ja View all 4](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-mega-menu.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=d363e7cdd2259cea6481d263b4551d99)

Käytä sitä, kun ylätunniste on pääreitti katalogiisi ja jokaisessa puussa on niin vähän ensimmäisen tason ryhmiä, että ne voi lukea yhdellä silmäyksellä.

### Pudotusvalikko

**Pudotusvalikko** avaa lyhyen luettelon puiden nimistä. Jokainen nimi avaa puunsa sivun, jossa sivupalkki jatkaa.

![Shop-pudotusvalikko auki, listalla puiden nimet Shop by activity ja Pre-owned](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-dropdown.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=673c1824de1d4eb60f6f16b56fd77fd1)

Käytä sitä, kun puita on useita ja haluat ylätunnisteen pysyvän tiiviinä.

### Vain linkki

**Vain linkki** ei avaa mitään. **Kauppa** on tavallinen linkki, kuten kaupassa, jossa ei ole puita.

### Minne kaupan linkki vie

Yhden puun linkki avaa kyseisen puun sivun. Usean puun linkki avaa kaupan yleisnäkymän osoitteessa `/shop`, kunhan kaupan sivupalkki näyttää puun. Jos se ei näytä yhtään, linkki avaa sen sijaan ensimmäisen puun sivun.

Kauppa-valikko listaa puita, ei koskaan tasaisia kokoelmiasi. Jos haluat linkittää kokoelman ylätunnisteesta, lisää navigaatiokohde, aseta **Sivu**-kenttään **Kauppa (Kokoelmat)** ja valitse kokoelma kentässä **Kokoelma**.

## Käyttö

### Lisää puu omaksi valikkokohdakseen

Lisää navigaatiokohde valitsemalla **Lisää sivulinkki** kohdassa **Navigaatiokohteet** ja aseta **Sivu**-kenttään **Kategoriapuut**. Valitse puut kohdassa **Valitse kategoriapuut** tai jätä se tyhjäksi, jolloin käytössä on **Kaupan kategoriapuut**. Aseta sitten **Pudotusvalikko**:

| Pudotusvalikko | Yhden puun kohteessa | Usean puun kohteessa |
| - | - | - |
| **Ei pudotusvalikkoa** | Tavallinen linkki puun sivulle | Ei tarjolla |
| **Yksi taso** | Luettelo puun ensimmäisen tason ryhmistä | Luettelo puiden nimistä |
| **Kaksi tasoa** | Megavalikkopaneeli: jokainen ensimmäisen tason ryhmä on sarakkeen otsikkona ja sen omat ryhmät alla | Megavalikkopaneeli: jokainen puu on sarakkeen otsikkona ja sen ensimmäinen taso alla |

![Activities-navigaatiokohde ja sen kaksitasoinen paneeli auki. Winter on sarakkeen otsikkona, ja sen alla korostettuina Skis, Boots ja Poles](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-nav-item-two-levels.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=3591f65656122e0b878d498e902b5d9f)

**Linkkejä saraketta kohti** kohdassa **Kaupan linkki** rajaa jokaista ylätunnisteen megavalikon saraketta, myös navigaatiokohteiden sarakkeita. Nimeä kohde kentässä **Nimike**: ylätunniste näyttää nimikkeen, ei puun otsikkoa.

Käytä erillisiä kohteita puille, joita asiakkaat ajattelevat erikseen, kuten **Shop by activity** ja **Pre-owned**, niin kumpikin avaa oman paneelinsa.

### Avaa valikot näppäimistöltä

Valikko aukeaa, kun osoitin on sen linkin päällä, tai linkin vieressä olevasta nuolesta. Nuoli toimii Enter- ja välilyöntinäppäimillä, ja Esc sulkee valikon. Paneeli, joka on yli kolme neljäsosaa näytön korkeudesta, vierii sisällään. Linkin seuraaminen sulkee valikon.

### Tarkista puhelinnäkymä

Puhelimessa ylätunnisteen kohteet ovat laatikossa, joka avautuu valikkokuvakkeesta. Jokainen rivi on aluksi kiinni. Nimi avaa kohteen sivun, ja rivin lopussa oleva nuoli avaa sen alla olevan sisällön jokaisella asettamallasi syvyydellä. Avoin rivi listaa niin monta kohtaa kuin **Linkkejä saraketta kohti** sallii ja sitten **Näytä kaikki**.

![Puhelimen valikkolaatikko, jossa korostettuina Shop-rivi, avattu puurivi Shop by activity ja sen sisennetyt ryhmät](https://mintcdn.com/twicecommerce/vjv-VysjtHQP_9_A/images/storefront-header-phone-drawer.webp?fit=max\&auto=format\&n=vjv-VysjtHQP_9_A\&q=85\&s=81b3957139fbcfb378bf0bbe9392bbae)

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

Ylätunniste voi avata minkä tahansa puun, myös sellaisen, jota kaupan sivupalkki ei näytä. Sen puun sivut avautuvat omiin osoitteisiinsa ilman sivupalkkia. Valitse puu myös **Kokoelmasivun** kohdassa **Valitse kategoriapuut**, niin sivuilla on sivupalkki. Katso [Kategoriapuiden tyylit kaupan sivupalkissa](https://www.twicecommerce.com/docs/fi/concepts/catalog/category-tree-sidebar-styles.md).

Navigaatiokohde, jolle ei ole jäljellä yhtään puuta, piilotetaan ylätunnisteesta, jotta se ei koskaan vie puuttuvalle sivulle. Näin käy, kun jokainen sen valitsema puu on poistettu tai kun se ei valitse yhtään puuta eikä kaupan sivupalkki näytä yhtään.

## Aiheeseen liittyvät artikkelit

> **[Kategoriapuiden tyylit kaupan sivupalkissa](https://www.twicecommerce.com/docs/fi/concepts/catalog/category-tree-sidebar-styles.md)**
>
> Neljä tapaa, joilla kaupan sivupalkki näyttää puusi.

> **[Rakenna kategoriapuu](https://www.twicecommerce.com/docs/fi/guides/catalog/build-a-category-tree.md)**
>
> Rakenna puu ja lisää se ylätunnisteeseen.

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

> **[Teemaeditori](https://www.twicecommerce.com/docs/fi/sales-channels/online-store/theme-editor/overview.md)**
>
> Ylätunnisteen lohko ja muut lohkot jokaisella sivulla.


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