Komponentit yksitellen

Suunnittelutyökalussa on 8 komponenttia. Muutat niitä komponenttipaneelissa, katso Komponenttipaneeli.

Missä: Suunnittelutyökalun välilehti Components. Napsauta komponentin riviä.

#Yleiskatsaus

Product page on galleria ja ostopaneeli. Show bars kytkee palkit päälle ja pois. Mistä ominaisuuksista tulee palkkeja, asetetaan kohdassa Products › Attributes. Missä palkit näkyvät, ostopaneelissa vai omassa osiossaan, asetetaan osiossa Properties. Ostopaneelin alla olevien osioiden järjestys asetetaan kohdassa Pages › Product page, katso Sivupohjat. Paneelissa on linkki sinne.

• Jos mikään ominaisuus ei näy muodossa Bar eikä millään tuotteella ole vapaita attribuutteja kuten Speed tai Control, valinta on himmennetty tekstillä No property is shown as Bar yet.
• Kun valinta on pois päältä, Bar-ominaisuudet näkyvät riveinä Details-taulukossa.

Menu label on käytössä vain asettelussa Icons + panel. Orders link ei vielä vaikuta kauppaan, koska asiakastilit eivät ole käytettävissä.

Komponentin Header kohdan Content asetus Cart valitsee, avaako ostoskorin kuvake ostoskorisivun vai paneelin. Katso Kassa asiakkaan silmin.

#Logo ja favicon

Kentät ovat komponentin Header kohdassa Content.

1. Paina Choose image kohdassa Logo. Mediakirjasto avautuu.
2. Valitse kuva.
3. Valitse korkeus: 24, 32, 40, 48 tai 56 px. Leveys seuraa kuvaa.

Kapealla puhelimella logo kutistuu, kun rivi ei riitä, joten kuvakkeet ja valikkopainike näkyvät aina.

Kun Transparent over hero on päällä, näkyviin tulee kenttä Light logo ja rivi Shown over the hero. Sitä logoa käytetään, kun ylätunniste on hero-kuvan päällä. Sitä käytetään myös alatunnisteessa.

Favicon on selaimen välilehden kuva. Käytä neliön muotoista PNG- tai SVG-kuvaa, vähintään 64 px. Se näkyy, kun teema julkaistaan.

App icon kentän Favicon alla on kuvake puhelimen kotinäytöllä, kun asiakas lisää kaupan sinne. Kuvan on oltava neliö ja vähintään 512 × 512 px. Muita kuvia ei oteta vastaan. Kun napsautat kenttää, työtila näyttää tilan Home screen. Katso Kauppa sovelluksena.

#Tagline ja tekijänoikeus

Kentät Tagline ja Copyright line ovat komponentin Footer kohdassa Content.

• Tagline näkyy logon alla brändisarakkeessa. Näytä se kytkemällä Brand column päälle.
• Tekijänoikeusrivi näkyy alatunnisteen alalaidassa jokaisella sivulla. Tyhjä kenttä ei näytä mitään.

Molemmat tallentuvat teemaan, kumotaan ⌘Z:lla ja julkaistaan, kun julkaiset.

#Ilmoituspalkki

1. Kytke Announcement bar päälle komponentin Header kohdassa Options.
2. Kirjoita teksti kohdan Content kenttään. Lisää linkki halutessasi.
3. Paina Put these words on the live shop.

Palkki näyttää täsmälleen sen, mitä kirjoitat. Tyhjä kenttä ei näytä palkkia.

Huom: Teksti tallentuu kauppaan, ei teemaluonnokseen. Se näkyy live-kaupassa, kun painat painiketta. Palkin kytkeminen päälle tai pois on teema-asetus ja näkyy vasta, kun julkaiset.

#Ylä- ja alatunnisteen leveys

Width on ensimmäisenä kohdassa Options sekä Headerissa että Footerissa.

• Page asettaa logon, linkit ja kuvakkeet linjaan sivun sisällön kanssa, sivun leveydelle kohdasta Theme › Layout.
• Full antaa rivin ulottua sivumarginaaliin asti, linjaan leveydellä Full olevien osioiden kanssa.

Oman alatunnisteen alla oleva peruutusoikeuslinkin rivi seuraa alatunnisteen leveyttä. Ilmoituspalkki ulottuu aina reunasta reunaan.

#Läpinäkyvä ylätunniste

Transparent over hero tekee ylätunnisteesta läpinäkyvän etusivulla täysleveän kuvabannerin päällä.

• Valinta on himmennetty tekstillä Add a full-width image banner first on Home, kunnes etusivu alkaa sellaisella bannerilla.
• Päällä olevan valinnan voi aina kytkeä pois.
• 24 px vierityksen jälkeen ylätunniste muuttuu yhtenäiseksi teeman väreillä. Se on yhtenäinen myös, kun valikkopaneeli on auki.
• Muilla sivuilla ylätunniste on aina yhtenäinen.

Kun ylätunniste on läpinäkyvä, tekstin ja kuvakkeiden väri on Header text over hero kohdassa Theme › Colours. Oletus on valkoinen. Vaalea logo näkyy. Tiloilla on omat koukut CSS:ssä, katso Koukut ja CSS-viite.

#Valikkopaneeli

Valikkopaneeli avautuu ylätunnisteen asettelusta Icons + panel.

• Jos ylätunnisteella on toinen asettelu, suunnittelutyökalu näyttää paneelin silti. Paneeli kertoo, että vierailijat eivät pääse siihen ennen kuin vaihdat asettelun.
• Valikkopaneelin (Menu panel) oma tyyli koskee paneelia asettelussa Icons + panel ja omassa ylätunnisteessa. Se koskee myös mobiilivalikkoa, jonka muut asettelut avaavat.
• Omassa ylätunnisteessa vakiopaneelissa on aina sulkemispainike. Myös Escape sulkee sen.

#Links, products, contact

Paneeli asettuu sivun päälle ylätunnisteen alle. Isot linkit ovat vasemmalla, kussakin nuoli, ja pienet linkit niiden alla. Oikealla näkyvät tuotekortit ja alalaidassa yhteystietorivi.

• Kun asiakas pitää osoitinta hetken kategorialinkin päällä tai siirtyy siihen näppäimistöllä, kortit vaihtuvat kategorian tuotteisiin. Nostetut tuotteet tulevat ensin, sitten kategorian oma järjestys. Alakategorioiden tuotteet lasketaan mukaan.
• Muut linkit näyttävät oletuskortit: nostetut tuotteet siinä järjestyksessä, joka niillä on kaupassa. Pieni linkki tekee sen vain osoittimen alla, joten Tab voi jatkaa kategoriasta sen kortteihin.
• Näppäimistöllä isot linkit ovat yksi pysähdys, ja nuolinäppäimet siirtyvät niiden välillä. Paneeli sulkeutuu, kun kohdistus poistuu ylätunnisteesta.
• Kortit ovat kaupan tuotekortteja ja näyttävät hinnan asiakkaan valuutassa.
• Tietokone näyttää 3 korttia ja tabletti 2. Puhelin näyttää vain linkit, ilman kortteja ja yhteystietoriviä.
• Kosketusnäytöllä napautus avaa linkin heti.
• Hakukuvake avaa hakukentän sivun päälle. Paneelissa ei ole omaa hakukenttää.

Products beside the links ja Contact bar kohdassa Options kytkevät kortit ja yhteystietorivin päälle. Kortit haetaan vasta, kun asiakas siirtyy kohti valikkopainiketta, joten sivut eivät lataudu hitaammin. Puhelimessa niitä ei haeta lainkaan.

#Linkit

Valikon linkit valitaan vain yhdessä paikassa: listassa Links komponentin Menu panel kohdassa Content. Lista koskee kaikkia ulkoasuja ja ylätunnisteita.

1. Avaa linkki listassa.
2. Valitse kohdassa Links to, mihin se vie: Category, Page tai Address.
3. Kirjoita halutessasi oma teksti kohtaan Label. Tyhjä kenttä tarkoittaa kategorian tai sivun omaa nimeä.
4. Valitse kohdassa Size joko Big tai Small.

• Vedä rivejä muuttaaksesi järjestystä tai käytä ↑ ja ↓.
• Asettelussa Shop + information isoista linkeistä tulee Shop-sarake ja pienistä Information-sarake.
• Kun olet muuttanut listaa, se täyttää myös ylätunnisteen linkkirivin ja mobiilivalikon.
• Not in the menu näyttää kategoriat, joissa on tuotteita, ja live-sivut, jotka eivät ole listassa. Uusia kategorioita ja sivuja ei lisätä itsestään.
• Reset to automatic links palauttaa automaattiset linkit: Kaikki tuotteet, neljä ensimmäistä kategoriaa ja sivut.
• Linkki sivulle, joka ei ole live, ei näy kaupassa. Työtilassa se on merkitty, esimerkiksi Draft. Publish kertoo tällaisesta linkistä.
• Kauppa, jolla on useampi kuin yksi kieli, saa jokaiseen linkkiin valinnan Languages.

Kun osoitat riviä tai pidät sen auki, työtila näyttää linkin aktiivisena tuotteineen. Sivun asetukset näyttävät, onko sivu valikossa, katso Osiot ja sivut. Admin › Pages näyttää paikan myös sivun rivillä, katso Sivut ja oikeudelliset tekstit.

Huomio: Lista tallentuu teemaan ja odottaa julkaisua (Publish) kuten muukin ulkoasu. Se säilyy, kun vaihdat tyyliä tai painat Reset to.

#Tuotteiden yläpuolinen otsikko

Kenttä Heading over the products on listan alla. Tyhjä kenttä ei näytä otsikkoa. Jos kentässä on teksti, sen paikalla näkyy kategorian nimi, kun asiakas osoittaa kategoriaa. Kenttä näkyy, kun Links, products, contact ja Products beside the links ovat päällä. Otsikko odottaa julkaisua (Publish).

#Yhteystiedot ja somelinkit

Lomake Contact and social on komponenttien Menu panel ja Footer kohdassa Content.

Komponentissa Menu panel lomake on taitettu kiinni ja merkitty Straight to the live shop. Paina Put these on the live shop. Tiedot tallentuvat kauppaan, eivät teemaluonnokseen, ja näkyvät live-kaupassa heti. Työtila näyttää kirjoittamasi tekstin kirjoittaessasi. Yhteystietorivi ja someikonit ovat himmennettyjä, kunnes tiedot on annettu.

#Bannerikomponentti

Komponentti Banners asettaa sivun kuvabannereiden tekstin sijoituksen oletusarvon. Leveys on kunkin bannerin kohdassa Layout › Width. Banneri, jolla ei ole omaa leveyttä, seuraa tyyliä: Boldissa Full ja Classicissa Page. Osio, jolla on oma leveys tai tekstin sijoitus, pitää sen. Työtila näyttää, montako tällaista osiota sivulla on.

#Kokoelmasivut

Komponentti Collection page koskee jokaista kategoriasivua, sivua All products (/products) ja hakutuloksia. Yksi valinta koskee kaikkia sivuja.

• Look: Sidebar, Row above the grid tai Hidden. Sivupalkin otsikot ovat isoilla kirjaimilla ja taittavat ryhmän kokoon, ja pitkät luettelot vierivät ryhmän sisällä. Kategoriasivulla ryhmät ovat aluksi auki. Sivulla All products ja hakutuloksissa vain Category on aluksi auki.
• Filters stay in view on aluksi päällä. Tietokoneella sivupalkki pysyy 16 px ylätunnisteen alla ja rivi heti ylätunnisteen alla, kun asiakas vierittää. Rivi pysyy paikallaan vain, jos sen suodattimet mahtuvat yhdelle riville. Tyhjennä suodattimet -painiketta ei lasketa. Kun suodatin on auki, valinta ei siirrä riviä. Rivi mitataan uudelleen, kun suodatin suljetaan. Jos rivi jakautuu kahdelle riville, se vierii sivun mukana. Valintaa ei ole, kun Hidden on valittu.
• Columns per screen size valitsee tuoteruudukon sarakkeiden määrän kohdissa Desktop, Tablet ja Mobile samassa taulukossa kuin osion Per screen size. Desktop on aluksi tyylin määrä, useimmissa tyyleissä 4 ja Boutiquessa 3. Tablet ja Mobile ovat tilassa auto, ja ne lasketaan arvosta Desktop: 4 antaa 3 ja 2, 3 antaa 3 ja 2. Collection pages -mallin ruudukko noudattaa valintaa.

Puhelimessa ja tabletissa, 1024 px asti, suodattimista tulee kapea rivi: englanniksi "Filters (2) · Sort", ruotsiksi "Filter (2) · Sortera". Kun Filters stay in view on päällä, rivi seuraa ylätunnisteen alla. Rivi avaa paneelin vasemmalta. Jokainen rasti suodattaa heti. Show 7 products sulkee paneelin, ja Clear tyhjentää valinnat. Kun Hidden on valittu, rivillä on vain Sort. Kun myös Sort control on pois päältä, rivillä on vain tuotteiden määrä, kuten tietokoneella. Paneeli sulkeutuu, kun ikkuna levenee yli 1024 px:n.

Se, mitkä suodattimet sivu näyttää ja missä järjestyksessä, valitaan kategoriakohtaisesti. Paneelin alareunan linkki Products › Categories vie sinne. Katso Kategoriat.

Preview with työtilan yläpuolella valitsee, mitä työtila näyttää: yhden kategorian tuotteineen, suodattimineen ja kuvauksineen, sivun All products tai yhden sanan hakutulokset. Aluksi näkyy kategoria, jolla on eniten suodattimia. Luettelo näyttää suodattimien määrän kategorioittain. Suodattimet ja lajittelu toimivat tässä. Muut napsautukset ovat pois päältä. Collection pages -pohja käyttää samaa luetteloa, katso Sivupohjat.