Design ja variantit

Suunnittelutyökalu muuttaa kaupan ulkoasua variantissa. Kaikki tallentuu työskennellessäsi, mutta asiakkaat näkevät vain sen, minkä julkaiset.

Missä: Storefronts › [kauppa] › Overview, sitten Open designer.

Suunnittelu kuvataan omilla sivuillaan: Tyylit ja osat, Komponenttipaneeli, Osiot ja sivut ja Oma koodi komponentissa. Näppäimet ovat sivulla Pikanäppäimet ja komentopaletti.

#Design ja variantit

Design on kaikki, mikä ratkaisee kaupan ulkoasun: värit, fontit, tyyli, komponentit, ylätunniste, alatunniste ja kaikkien sivujen osiot. Variantti on designin kopio, jossa voit työskennellä. Jokaisella kaupalla on yksi alusta asti. Täsmälleen yksi variantti on julkaistu, ja sen asiakkaat näkevät.

Suunnittelutyökalu tallentaa koko ajan varianttiin, joka on auki. Asiakkaat eivät näe siitä mitään ennen kuin julkaiset. Jos haluat kokeilla jotain muuta, tee uusi variantti.

#Suunnittelutyökalun avaaminen

Suunnittelutyökalu avataan kaupan välilehdeltä Overview painikkeella Open designer tai rivillä Design kohdassa Storefront settings. Se avautuu julkaistuun varianttiin.

Rivi Design näyttää julkaistun variantin nimen. Jos tallennettuja muutoksia ei ole vielä julkaistu, rivi kertoo senkin, esimerkiksi Main · Unpublished changes. Jos kaupalla ei ole julkaistua designia, rivillä lukee Nothing published yet.

Muut variantit ja sen, kuka niitä muokkaa, näet suunnittelutyökalun varianttivalikosta. Linkin, joka näyttää variantin ilman kirjautumista, saat painikkeella Copy preview link suunnittelutyökalussa, kun olet variantissa, joka ei ole julkaistu. Julkaistulle variantille teet linkin esikatselussa painikkeella Share.

#Suunnittelutyökalun osat

Alle 1600 px leveillä näytöillä Live shop näkyy pelkkänä kuvakkeena. Kun ylärivillä on ahdasta, kaupan ja sivun nimi lyhennetään ja piilotetaan sitten. Kun tilaa on vielä vähemmän, variantin nimi lyhennetään merkillä …, ja koko nimi näkyy varianttivalikossa. Editing ylärivillä tarkoittaa, että variantti on auki tässä välilehdessä.

Code näkyy vain, kun Advanced on päällä. Katso Komponenttipaneeli.

Kuvakepalkki on järjestetty sen mukaan, kuinka usein paneeleja tarvitaan: ensin sivu, jolla olet, sitten kaikkien sivujen ulkoasu ja viimeisenä media ja tekniset näkymät. Viiva erottaa ryhmät. Search avaa komentopaletin, josta löydät paneelin, lisättävän osion tai tehtävän, kuten Change the font, kirjoittamalla mitä etsit.

Theme-paneelissa Colours, Typography ja Buttons ovat ylimpänä ja teeman tyyli alimpana. Jokainen ryhmä pysyy auki tai kiinni niin kuin jätit sen, myös kun lataat sivun uudelleen samassa selaimessa.

Varianttivalikko näyttää muokkaamasi variantin ja merkitsee julkaistun variantin merkinnällä Live. Jos julkaistussa variantissa on tallennettuja muutoksia, joita asiakkaat eivät näe, niiden määrä näkyy vieressä, esimerkiksi 4 unpublished. Merkintä katoaa, kun julkaiset.

• Live shop avaa kaupan niin kuin asiakkaat sen näkevät. Painike on näkyvissä, kun kauppa on julkaistu.
• ⋯ View sisältää kohdat Zoom, Grid overlay, Wide screen (1920), Outline mode, Command palette ja Help. Päällä oleva kohta näyttää On. Alle 1600 px leveillä näytöillä painikkeessa on pelkkä ⋯.
• ← Back palaa kaupan välilehdelle Overview. Jos työtä on tallentamatta, suunnittelutyökalu pyytää ensin vahvistuksen.

#Variantit

Varianttivalikko luettelee kaupan variantit otsikon VARIANTS alla. Variantin vaihtaminen vaihtaa vain sen, mitä muokkaat, eikä kauppa muutu. Suunnittelutyökalu avautuu julkaistuun varianttiin, ellet ole valinnut toista. Kun olet variantissa, joka ei ole julkaistu, suunnittelutyökalulla on keltainen kehys ja keltainen rivi kertoo esimerkiksi Variant · not live. You're editing Christmas. Customers see Main until you publish this one. Rivillä on myös variantin Copy preview link.

Tee uusi variantti:

1. Avaa varianttivalikko ja paina + New variant.
2. Kirjoita nimi kohtaan Name, esimerkiksi Christmas.
3. Valitse kohdassa Start from, mistä variantti alkaa.
4. Paina Create variant. Uusi variantti avautuu heti.

Variantin vieressä olevassa valikossa ⋯ ovat Rename, Duplicate ja Delete…. Julkaistua varianttia ei voi poistaa: julkaise ensin toinen variantti. Kun poistat variantin, kirjoitat sen nimen. Poistettu variantti on 30 päivää otsikon DELETED · BACK FOR 30 DAYS alla, ja Bring back palauttaa sen.

#Historia

Ylärivin History avaa variantin historian. Jokaisella variantilla on omansa.

• Ylimpänä oleva Now on se, minkä parissa työskentelet. Se ei ole julkaistu.
• Rivi lisätään, kun olet pitänyt 15 minuutin tauon, poistut suunnittelutyökalusta tai vaihdat varianttia. Rivi luettelee, mitä muuttui, esimerkiksi Colours, Hero “Spring”, Fonts and 1 more · Kim.
• Jokainen julkaisu on rivi. Versio, jonka asiakkaat näkevät, on merkitty Live.
• All näyttää kaikki rivit ja Publishes vain julkaisut. Show older näyttää lisää.

Rivin napsautus näyttää version työtilassa, mutta et voi muuttaa sitä. Back to now vie sinut takaisin. Rivillä on:

#Työtila

Työtila näyttää kaupan 1440 px leveydellä. Pienemmillä näytöillä se pienennetään niin, että koko leveys näkyy. Wide screen (1920) näyttää tilan Desktop 1920 px leveydellä pienennettynä. Siinä XL, 2XL ja Full erottuvat toisistaan. ⋯ View -valikon Zoom muuttaa mittakaavaksi 50, 75, 100 tai 125 %.

• Napsautus valitsee osion. Kehyksen yläpuolella oleva nimi kertoo, mikä osio se on.
• Linkkejä ei seurata. Linkki toiselle suunnittelutyökalun sivulle vaihtaa sivua. Tuote-, kategoria- ja valikkolinkit valitsevat osion ja näyttävät, minne linkki vie.
• Desktop, Tablet ja Mobile vaihtavat sekä näkymän että näyttökoon. Syvässä tarkastelijassa muutos tilassa Mobile ei muuta tilaa Desktop. Kohdan Content asetukset ovat samat kaikilla näytöillä, paitsi taulukko Per screen size.
• Kun osio on valittuna, työtilan yläpuolella oleva viivain näyttää osion leveyden ja sen, mihin kukin leveysaskel päättyy näytöllä. Sivumarginaali näkyy punaisina viivoina. Pidä osoitinta sirun päällä kohdassa Width, niin katkoviivakehys näyttää sen leveyden. Mitään ei tallenneta ennen napsautusta.
• Osio, joka on piilotettu näytettävällä näytöllä, on harmaa kaistale. Katso Näyttökoon mukaan.
• Grid overlay näyttää 12 sarakkeen ruudukon sivun leveyden päällä kohdasta Theme › Layout, sivumarginaalin sisäpuolella. Outline mode piirtää ääriviivat jokaisen elementin ympärille. Asiakkaat eivät näe kumpaakaan.
• Alatunnisteen valuutanvalitsin näkyy, kun kaupalla on useampi kuin yksi valuutta. Työtila näyttää hinnat silti perusvaluutassa.
• Kun järjestelmässä on liikkeen vähentäminen päällä, paneelit vaihtuvat ilman animaatiota.

#Tasot

Paneeli Layers näyttää sivun ylhäältä alas: ylätunnisteen, jokaisen osion elementteineen ja alatunnisteen.

• Rivin napsautus valitsee osion ja avaa tarkastelijan.
• Siirrä osiota vetämällä kahvasta tai painamalla Move up ja Move down.
• Silmä piilottaa tai näyttää osion. Piilotettu rivi on merkitty hidden.
• Ylä- ja alatunniste on merkitty off on this page, kun sivu ei näytä niitä.
• Rivi, jolla on omia tyylimuutoksia, näyttää niiden määrän.

#Sivut suunnittelutyökalussa

Paneeli Pages näyttää kaupan sivut neljässä ryhmässä.

Luo sivu:

1. Paina New page.
2. Täytä Page key, esimerkiksi about-us, ja Display title.
3. Paina Create page.

Avainta, jota kauppa jo käyttää omalle sivulleen, esimerkiksi product tai cart, ei voi valita. Sivun osoite on /page-key, kunnes muutat sen. Search pages… suodattaa listaa. Sivun asetukset ovat sivulla Osiot ja sivut.

#Preview

Preview (⌘P) näyttää luonnoksen koko näytöllä ilman kehyksiä. Vaihdat tilojen Desktop, Tablet ja Mobile välillä. Linkit toisille suunnittelutyökalun sivuille toimivat. Preview näyttää myös juuri kirjoittamasi tekstin ennen seuraavaa tallennusta. Evästebanneri näkyy kuten vierailijalle.

#Automaattinen tallennus ja kumoaminen

Luonnos tallentuu 0,7 sekuntia viimeisen muutoksesi jälkeen. Ilmaisin näyttää Saved just now, Saved 4 min ago ja sitten kellonajan. Ilmaisimen vieressä oleva Save draft tallentaa heti. Pikanäppäin on ⌘S.

⌘Z kumoaa ja ⌘⇧Z tekee uudelleen. Kumoaminen koskee sivua ja varianttia istunnon ajan. Yksi värinvalitsimen veto tai yksi CSS-rivi on yksi kumousaskel. Kun vaihdat sivua tai varianttia, muutos tallennetaan ensin.

Tallennus keskeytyy kolmessa tilanteessa:

Yksi istunto varianttia kohden kerrallaan. Kaksi ihmistä voi työskennellä yhtä aikaa kumpikin omassa variantissaan.

Näin otat variantin haltuusi:

1. Kun avaat variantin, jota joku muu muokkaa, sivu näkyy ilman työkaluja ja ruutu keskellä näyttöä kysyy. Paina Ask <nimi> to hand it over. Just look sulkee ruudun, ja ylärivin Ask to take over avaa sen uudelleen.
2. Odottaessasi ruutu näyttää Waiting for Kim ja kuinka kauan on jäljellä, ennen kuin voit ottaa variantin haltuusi. Toinen henkilö saa kysymyksen suunnittelutyökalussa ja ilmoituksen hallinnassa.
3. Jos hän painaa Hand over to ja nimeäsi, variantti on heti sinun. Suunnittelutyökalu avautuu uudelleen sillä, mitä hän tallensi, ilman että sivu latautuu uudelleen, ja kertoo Main is yours now. You see what Kim saved. Jos hän painaa Keep editing, variantti jää hänelle.
4. Jos kukaan ei vastaa 3 minuutissa, paina Take over. Toisen henkilön työ tallennetaan ensin historiaan.

Variantin menettäjä näkee sivun ilman työkaluja harmaan rivin alla, esimerkiksi Kim took over Main tai You handed Main to Kim. Esikatselu toimii tavalliseen tapaan, mutta mitään ei voi muuttaa. Ask to take over pyytää varianttia takaisin. Kun variantti vapautuu, rivi muuttuu vihreäksi ja Edit <variantti> avaa sen.

#Julkaise

Publish avaa muokkaamasi variantin julkaisuikkunan. Se näyttää:

• Muutokset otsikon WHAT GOES LIVE alla osio kerrallaan: ADDED, CHANGED, MOVED ja REMOVED. Jos mikään ei muuttunut, siinä lukee NOTHING NEW.
• Tarkistuksen sivusta: tyhjä sivu, kuvat jotka eivät lataudu, kuvat ilman kuvausta, painikkeet ilman linkkiä, paikkamerkkiteksti, puuttuva otsikko, vain desktopille tyylitellyt osiot ja sivun nimi. Merkki N TO CHECK näyttää varoitusten määrän.
• Luonnossivut, joita asiakkaat eivät voi avata. Valitse ne, niin ne julkaistaan samalla.

Kun julkaiset variantin, joka ei ole julkaistu, ikkunassa lukee esimerkiksi Christmas goes live instead of Main. Koko design vaihtuu, ei vain se, mitä muutit variantissa Christmas. Se, mitä Mainissa on julkaistu sen jälkeen, kun teit Christmasin, näkyy luettelona, koska ne muutokset eivät tule mukaan.

Julkaisu on ainoa asia, joka muuttaa sen, mitä asiakkaat näkevät. Jokainen julkaisu on rivi variantin historiassa.

Varoitus: ⌘Z ei kumoa julkaisua. Avaa History, paina Restore versiossa, joka oli julkaistu, ja julkaise uudelleen.

#Virheet

Suunnittelutyökalu näyttää virheet englanniksi. Virhe pysyy näkyvissä, kunnes suljet sen. Puuttuvalla oikeudella, varatulla nimellä, katkenneella yhteydellä ja vanhentuneella istunnolla on kullakin oma selitys ja ohje. Tuntematon virhe näytetään alkuperäisellä tekstillään.

#Mitä design ei ohjaa

Kassa, odotussivu ja tilausvahvistus käyttävät BunStackin kassakehystä. Se on sama kaikissa kaupoissa ja näyttää logosi ja korostusvärisi. Katso Kassa asiakkaan silmin.