--- title: "Verkkokauppasi jäsentäminen" description: "Kokoelmat, kokoelmalistat ja tagit: kolme siisteyden tasoa luettavana pysyvälle tuoteluettelolle." canonical_url: "https://fi.goodbarber.com/academy/shop-organization/" lang: fi --- # Verkkokauppasi jäsentäminen Source: https://fi.goodbarber.com/academy/shop-organization/ Kolme työkalua jäsentää tuoteluetteloasi, ja ne toimivat eri tasoilla. Kokoelmat ovat kauppasi hyllyrivit. Kokoelmalistat siistivät nuo hyllyrivit, jotta valikkosi ei vuoda yli. Tagit työskentelevät taustalla, kuin näkymättömät toissijaiset kokoelmat. ## Kokoelmat ### Mitä ne ovat Kokoelmat jäsentävät Shopping Appisi ja järjestävät tuotteesi. **Jos sovelluksesi olisi kivijalkakauppa, kokoelmat olisivat sen hyllyrivit.** Ne myös ratkaisevat, minne asiakkaasi pääsee. Tuote, joka ei ole kiinni missään kokoelmassa, on kyllä olemassa kaupassasi ja myy myös, mutta siihen päästään sen omalla osoitteella: lähettämälläsi linkillä, haun kautta, aloitusnäytön widgetillä. Jokaisen tuotteen liittäminen ainakin yhteen kokoelmaan on siis ensimmäinen refleksi, jo ennen kuin mietit järjestystäsi. Ne ovat joustavia kahdella tavalla. Ensin ajassa: kokoelman lisäät, poistat, näytät tai piilotat yhdellä klikkauksella, mikä tekee väliaikaiset kokoelmat mahdollisiksi. Sitten järjestyksessä: ne leikkaavat toisiaan, ja sama tuote kuuluu useaan kokoelmaan yhtä aikaa. Juuri tuo leikkaavuus ansaitsee huomiosi kun luot niitä. Otetaan sisustuskauppamme. Koriste-esinettä etsivä asiakas voi ajatella kolmea eri linjaa pitkin: kyseessä oleva huone, esineen tyyppi, hetken trendi. Loimme siis yhdeksän kokoelmaa noille kolmelle linjalle: **Huoneen mukaan**: Bedroom, Bathroom, Kitchen **Esinetyypin mukaan**: Frames, Vases, Pillows **Trendin mukaan**: Big in Japan, Keep it Slow, Words matter Jokainen tuote kuuluu siis useaan kokoelmaan. Sillä on enemmän mahdollisuuksia tulla nähdyksi, ja asiakkaalla enemmän mahdollisuuksia löytää se sitä reittiä, joka tulee hänelle luonnostaan. Näiden päälle tulee Sales-kokoelma, joka kokoaa alennetut tuotteet. Se muuttuu ajan myötä ja on piilotettuna alennusmyyntikauden ulkopuolella. ### Niiden luominen Siirry kohtaan Products › Collections. Klikkaa Create a collection. Sitten syötät otsikon, kuvituskuvan ja tuotteiden näyttöjärjestyksen. Otsikko on rajattu **32 merkkiin**, ja se on hyödyllinen rajoite: hyllyrivin nimi luetaan valikosta, puhelimen näytöltä, ja lyhyet nimet voittavat siellä aina. Näyttöjärjestyksessä sääntö on aina sama: kysy itseltäsi mitä asiakkaasi etsii. Tarjolla on kuusi automaattista järjestystä pareittain: luontipäivä uusimmasta vanhimpaan tai päinvastoin, hinta halvimmasta kalleimpaan tai päinvastoin, ja otsikko A:sta Z:aan tai Z:sta A:han. Seitsemäs tapa on manuaalinen. - **Päivämäärä** nostaa uutuudet ensimmäisiksi. Se on oikea valinta säännöllisesti täydentyvälle vaatekaupalle tai kirjakaupalle, jonka asiakkaat palaavat uuden luettavan perässä. - **Nouseva hinta** sopii ruokakaupalle, jossa asiakas haluaa hallita budjettiaan. Laskeva hinta palvelee pikemminkin ylellistä kokoelmaa, jossa ensimmäinen tuote asettaa tason. - **Aakkosjärjestys** on luetteloille, joita selataan tietäen jo etsittävän nimi: varaosat, tekniset viitteet, viinit. - **Manuaalinen tapa** antaa nostaa ylimmäksi sen, minkä haluat myydä ensin, ja antaa sinulle täyden hallinnan listasi ilmeeseen. **Järjestys kuuluu kokoelmalle, ei kaupalle.** Uutuutesi voivat siis olla päivämäärän mukaan järjestettyjä samalla kun kuukauden valintasi pysyy käsin aseteltuna. Juuri se tekee manuaalisesta tavasta kestävän: automaattiset järjestykset soveltuvat itsestään myöhemmin lisäämiisi tuotteisiin, manuaalinen tapa pyytää sinua palaamaan siihen, joten säästä se niille kokoelmille jotka sen ansaitsevat. **Älä unohda hakukoneoptimointia.** Kokoelmasi ovat indeksoitavissa aivan kuten tuotesivusi. Täytä Title- ja Meta description -kentät ja mukauta osoitteet avainsanoillasi. ![Kaupan kokoelmalista. Ylhäällä hakukenttä ja ympyröitynä vihreä painike, joka luo kokoelman. Alempana jokainen kokoelma vie rivin: pikkukuva jonka sisään otsikko on asetettu, tuotteiden määrä, ja merkki joka kertoo näkyykö kokoelma sovelluksen valikossa.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/cb186192-146_2.0c9f2e97c49d.jpg) ![Kokoelman tiedot. Vasemmalla sen tuotteet näyttöjärjestyksessä, kussakin pikkukuva, hinta, varastotilanne, kahva siirtämiseen ja risti poistamiseen. Oikealla ympyröitynä hakulohko: otsikko ja kuvaus hakukoneille, sivun osoite, ja esikatselu tuloksesta sellaisena kuin se näkyy. Oikeassa alakulmassa painike, joka avaa asetukset uudelleen.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/196e152c-146_3.49f657c248fe.jpg) ## Kokoelmalistat ### Mihin niitä käytetään Kokoelma pääsee sovelluksesi valikkoon kahdella tavalla, ja juuri siinä navigaatiosi ilme ratkaistaan. **Omillaan.** Jokaisella kokoelmalla on valikkonäkyvyyden lohkonsa, jossa rastitat vaihtoehdon joka listaa kokoelman valikkoon, ja valitset sen paikan. Siitä tulee täysivaltainen valikkokohta, osion veroinen. Kolmen hyllyrivin kauppa näyttää ne näin, ja sen asiakas hahmottaa koko tuoteluettelon yhdellä silmäyksellä. **Ryhmiteltynä.** Collection list -osio kokoaa useita niistä yhden kohdan alle. Hyödyllinen merkkipaalu: viittä hyllyriviä pidemmälle mentäessä valikko hyötyy ryhmittelystä. Verkkokaupan sanastossa tuo toinen tapa on erottelu kategorian ja alakategorian välillä, jossa lista pitää kategorian ja kokoelmat alakategoriat. Jos saavut toiselta alustalta, tämä on se liike jonka tunnet toisella nimellä. Palataan sisustuskauppaan ja sen kymmeneen kokoelmaan. Ilman ryhmittelyä sovelluksen valikko olisi tukossa. Loimme siis kolme listaa, jotka ottavat haun kolme linjaa, kolme kokoelmaa kussakin: - **Rooms**: Bedroom, Bathroom, Kitchen - **Objects**: Frames, Vases, Pillows - **Trends**: Big in Japan, Keep it Slow, Words matter Sales-kokoelma jää kaikkien listojen ulkopuolelle: haluamme sen olevan mahdollisimman suoraan saavutettavissa. Se on päätös jonka kannattaa pysyä mielessä, sillä siivoaminen ei saa koskaan haudata sitä mikä on pidettävä pinnalla. ![Valikko kaupassa, jossa jokainen kokoelma seisoo omillaan: kaksitoista kohtaa seuraa toisiaan aloitussivulta alennusmyyntiin, yksi kutakin tuoteperhettä kohden. Paneelin alalaidassa kaksi sosiaalista verkostoa ja asetukset.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/d7809d35-147_2.aa150d31497d.jpg) ![Sama valikko kokoelmat ryhmiteltyinä: viisi kohtaa riittää, ja kukin avaa oman kokoelmalistansa.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/df82a69d-147_3.0f2eb5537a1d.jpg) ### Niiden luominen Kokoelmalista on Shopping Appisi osio. Lisäät sen kuten minkä tahansa osion, kohdasta My App › Structure. Klikkaa Add a section ja valitse sitten Collection list. Anna osiollesi otsikko, liitä siihen kuva ja vahvista. **Kokoelmien lisäämiseen siihen** on kaksi tapaa: - klikkaa ”+”-kuvaketta valitaksesi mukaan otettavat kokoelmat - tai vedä kokoelmat suoraan Collection list -osion alle ![Osion lisäyspaneeli auki kokoelmien ryhmässä. Ensimmäinen ruutu, ympyröitynä, lisää kokoelmalistan; seuraavat lisäävät tietyn kokoelman, ja sovelluksessa jo oleva kantaa vihreää valintamerkkiä; viimeinen luo kokoelman. Vasemmalla sovelluksen esikatselu seuraa muutoksia.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/93f7bccb-148_3.f7b06997aaf6.jpg) ![Juuri luotu osio, vielä tyhjänä. Oikean puolen paneelissa ympyröity linkki lisää kokoelman listaan, ja sen avaama valitsin näyttää kaikki saatavilla olevat kokoelmat. Vasemmalla esikatselu kehottaa lisäämään ensimmäisen.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/3fdbc521-148_4.7a9bb88c3cfd.jpg) ### Minkä layoutin valita Kolme layoutia, joista yksi riippuu navigointitavastasi. **Swipe Submenu** asettaa kokoelmasi alavalikkoon sovelluksen päänavigaation alle. Se on käytettävissä vain ”Swipe”-navigoinnissa, siinä jossa osiosta toiseen siirrytään pyyhkäisemällä näyttöä vaakasuunnassa. Se on tuoteluettelon oletuslayout, mutta se on **sidottu navigaatioon**: valitse se vain jos sovelluksesi sitoutuu tuohon tapaan, älä koskaan pelkkänä varavaihtoehtona. **Classic** esittää hyllyrivisi riveinä, pienen pikkukuvan ja lihavoidun nimen kera, useita näyttöä kohden. Se on hakemiston asenne: se sopii sinulle kun hyllyrivejä on paljon, kun nimi merkitsee enemmän kuin kuva, ja kun sen on toimittava ilman vahvoja kuviakin. Se on myös luonteva varavaihtoehto kahdelle muulle. **Visual** on näyteikkuna: suuret koko leveydeltään ulottuvat kortit, hyllyrivin kuva taustana ja nimi sen päällä. Valitse se kun hyllyrivit valitaan silmällä, muodissa, sisustuksessa tai ruoassa. Yksi varaus viimeksi mainittuun: se vaatii hyvät kuvat **kaikkiin** kokoelmiisi. Jos joistain puuttuu kuva tai ne ovat heikkoja, turvaudu Classiciin. Valinta tehdään kohdassa My App › Structure, osiosi valikosta, **Edit the design**. Classic ja Visual sopivat mihin tahansa navigointitapaan. Jos sovelluksesi ei ole Swipe-tilassa, back office himmentää Swipe Submenun ja tarjoaa sinulle linkin valikon vaihtamiseen. ![Kolme mallia vierekkäin, yksi kutakin layoutia kohden: Swipe Submenu asettaa kokoelmat sivunavigaation alavalikkoon; Classic asettaa ne riveihin, kussakin pyöreä pikkukuva ja otsikko; Visual pinoaa suuria kuvia koko leveydeltä.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/schema-layouts-collections.7ba1f5bd1d4b.png) ![Vaatekaupan valikko: vaatteiden kohdan alla viisi alakohtaa listaa kokoelmat, kun taas muut kohdat pysyvät ensimmäisellä tasolla.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/c44c7ed6-148_6.a54c522dbc53.jpg) ![Kokoelmalista riveinä: kolme kokoelmaa, kussakin pyöreä pikkukuva ja otsikko.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/b0607f99-148_7.66f1d83d693c.jpg) ![Sama lista kuvina: jokainen kokoelma vie koko leveyden, otsikko keskellä valokuvaa, ja seuraavat tulevat näkyviin vierittämällä.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/53941d84-148_8.8a2e0e4dc5a6.jpg) ### Kannattaako kaikkialla käyttää samaa layoutia Ei, ja se on yksityiskohta jolla voi olla merkitystä. Suosittelemme säilyttämään designin yhtenäisyyden koko sovelluksessasi, mutta layoutien vaihtelu antaa sinun osoittaa hierarkian. Otetaan ruokakauppa, jonka tuoteluettelo on järjestetty näin: - **Food** - Fresh: Fruit, Vegetables - Bulk: Cereals, Rice & Pasta - **Health & Beauty**: Cosmetics, Essential oils Tässä osa kokoelmalistoista ei sisällä kokoelmia vaan toisia kokoelmalistoja. Erotettavia tasoja on siis kaksi. Eri layoutin soveltaminen tasoon 1 ja tasoon 2 estää asiakasta eksymästä puurakenteeseen. ![Kaksi näyttöä samasta ruokakaupasta: vasemmalla kokoelmalista riveinä; oikealla avattu kokoelma, jonka alakokoelmat näkyvät suurina kuvina. Kaksi layoutia kahdelle navigaation tasolle.](https://portal.ww-cdn.com/portal_static/images/academy/boutique/85dafbe2-148_9.249c7da4e387.jpg) ## Tagit ### Mitä ne ovat Tagi on tuotteeseen liitetty avainsana, kuin merkintä. Voit liittää samaan tuotteeseen useita. Ne palvelevat ensinnäkin tuotteidesi löytämistä back officesta. Mutta niiden tärkein arvo on muualla: ne ohjaavat sitä, mitä asiakkaan puolella näytetään. - ne suodattavat aloitusnäyttösi tuotelistawidgetit - ne syöttävät kokoelmien ohella tuotesivujesi samankaltaisten tuotteiden lohkoa - ne syöttävät kauppasi hakuosion tuloksia ### Miten ne valitaan Ajattele tageja toissijaisina kokoelmina, jotka ovat näkymättömiä navigaatiossa mutta aktiivisia näytöllä. Ne rakennetaan yleensä tuotteidesi ominaisuuksille: väri, materiaali, muoto. Esimerkki. Vaatekaupassa ruskea villainen poolopaita menee kokoelmalistaan *”Clothing”*, kokoelmaan *”Sweaters”*. Se saa tagit *”poolopaita”*, *”ruskea”*, *”villa”*. Tästä seuraa heti kaksi käyttöä. Näyttääksesi kaikki villatuotteesi aloitusnäytöllä suodatat vain *”villa”*-tagilla. Ja pusero voi näkyä oheistuotteena ruskeiden housujen alla. Se on perustavanlaatuinen ero kokoelmiin: kokoelma järjestää sen mitä asiakas selaa, tagi järjestää sen mitä sinä hänelle esität. ### Niiden luominen Ne lisätään tuotetta luodessa tai muokatessa. Tuotteen muokkaussivun oikean puolen valikossa syötät tagisi **Tags**-kenttään. Vahvista julkaisemalla. Kaksi kirjoitussääntöä ratkaisee sanastosi terveyden pitkällä aikavälillä. **Tagi kirjoitetaan yhtenä sanana, ilman välilyöntiä**, ja siksi yllä olevassa esimerkissä lukee ”poolopaita”. Ja **kirjainkoko jätetään huomiotta**, villa ja Villa ovat sama tagi, joten sinun ei tarvitse vahtia isoja kirjaimia. Loppu on kurinalaisuutta, ja back office antaa sinulle työkalun: kentän yläpuolella **View all tags** avaa listan niistä, jotka kaupassasi jo ovat, hakutoiminnon ja aakkos- tai käyttötiheysjärjestyksen kera. Ota tavaksi valita sieltä sen sijaan että kirjoittaisit uudelleen. Sanasto joka ajautuu muotoihin villa, villainen ja puhdasvilla suodattaa kolme kertaa vähemmän tuotteita kuin niitä on, ja sen ajautumisen huomaat vasta kahdensadan tuotesivun jälkeen.