Design og varianter

Designeren endrer butikkens utseende i en variant. Alt lagres mens du jobber, men kundene ser bare det du publiserer.

Hvor: Storefronts › [butikk] › Overview, deretter Open designer.

Designen beskrives på egne sider: Stiler og deler, Komponentpanelet, Seksjoner og sider og Egen kode på en komponent. Tastene står under Hurtigtaster og kommandopaletten.

#Design og varianter

Designet er alt som styrer hvordan butikken ser ut: farger, skrifttyper, stil, komponenter, topptekst, bunntekst og seksjonene på alle sider. En variant er en kopi av designet som du kan jobbe i. Hver butikk har én fra starten. Nøyaktig én variant er live, og det er den kundene ser.

Designeren lagrer hele tiden i varianten du har åpen. Kundene ser ingenting av det før du publiserer. Vil du prøve noe annet, lager du en ny variant.

#Åpne designeren

Designeren åpnes fra butikkens Overview, med knappen Open designer eller raden Design under Storefront settings. Den åpnes på live-varianten.

Raden Design viser navnet på live-varianten. Finnes det lagrede endringer som ikke er publisert, står det også, for eksempel Main · Unpublished changes. Har butikken ingen publisert design, står det Nothing published yet.

De andre variantene og hvem som redigerer dem, ser du i designerens variantmeny. En lenke som viser en variant uten innlogging, lager du med Copy preview link i designeren når du står i en variant som ikke er live. For live-varianten lager du lenken i forhåndsvisningen med Share.

#Designerens deler

På skjermer smalere enn 1600 px vises Live shop bare som et ikon. Blir det trangt, forkortes butikkens og sidens navn og forsvinner så. Blir det enda trangere, forkortes variantens navn med …, og hele navnet står i variantmenyen. Editing på øverste linje betyr at varianten er åpen i denne fanen.

Code vises bare når Advanced er på. Se Komponentpanelet.

Ikonlisten er ordnet etter hvor ofte du trenger panelene: først siden du står på, deretter utseendet på alle sider, til slutt media og de tekniske visningene. En strek skiller gruppene. Search åpner kommandopaletten, der du finner et panel, en seksjon å legge til eller en oppgave som Change the font ved å skrive det du leter etter.

I panelet Theme ligger Colours, Typography og Buttons øverst og temaets stil nederst. Hver gruppe er åpen eller lukket slik du forlot den, også etter at du har lastet siden på nytt i samme nettleser.

Variantmenyen viser varianten du redigerer, og merker live-varianten med Live. Har live-varianten lagrede endringer som kundene ikke ser, står antallet ved siden av, for eksempel 4 unpublished. Det forsvinner når du har publisert.

• Live shop åpner butikken slik kundene ser den. Knappen finnes når butikken er publisert.
• ⋯ View har Zoom, Grid overlay, Wide screen (1920), Outline mode, Command palette og Help. Det som er på, står som On. På skjermer smalere enn 1600 px står det bare ⋯ på knappen.
• ← Back går tilbake til butikkens Overview. Finnes det ulagret arbeid, spør designeren først.

#Varianter

Variantmenyen viser butikkens varianter under VARIANTS. Å bytte variant bytter bare hva du redigerer, butikken endres ikke. Designeren åpnes på live-varianten med mindre du har valgt en annen. Så lenge du er i en variant som ikke er live, har designeren en gul ramme, og en gul linje viser for eksempel Variant · not live. You're editing Christmas. Customers see Main until you publish this one. Der finnes også Copy preview link for varianten.

Lag en ny variant:

1. Åpne variantmenyen og trykk + New variant.
2. Skriv et navn under Name, for eksempel Christmas.
3. Velg hvor varianten starter under Start from.
4. Trykk Create variant. Den nye varianten åpnes med en gang.

⋯ ved siden av en variant har Rename, Duplicate og Delete…. Live-varianten kan ikke slettes: publiser en annen variant først. For å slette en variant skriver du navnet på den. En slettet variant ligger under DELETED · BACK FOR 30 DAYS i 30 dager, og Bring back henter den tilbake.

#Historikk

History på øverste linje åpner variantens historikk. Hver variant har sin egen.

• Now øverst er det du jobber med. Det er ikke live.
• En rad legges til når du har tatt en pause på 15 minutter, forlater designeren eller bytter variant. Raden lister opp hva som ble endret, for eksempel Colours, Hero “Spring”, Fonts and 1 more · Kim.
• Hver publisering blir en rad. Versjonen kundene ser, er merket Live.
• All viser alle rader og Publishes bare publiseringene. Show older viser flere.

Et klikk på en rad viser versjonen på arbeidsflaten, men du kan ikke endre den. Back to now tar deg tilbake. På en rad finnes:

#Arbeidsflaten

Arbeidsflaten viser butikken i bredden 1440 px. På mindre skjermer skaleres den ned slik at hele bredden synes. Wide screen (1920) viser Desktop i 1920 px, nedskalert. Der synes forskjellen mellom XL, 2XL og Full. Zoom i ⋯ View endrer skalaen til 50, 75, 100 eller 125 %.

• Et klikk markerer en seksjon. Etiketten over rammen viser hvilken seksjon det er.
• Lenker følges ikke. En lenke til en annen side i designeren bytter side. Produkt-, kategori- og menylenker markerer seksjonen og viser hvor lenken går.
• Desktop, Tablet og Mobile bytter både visning og bruddpunkt. I den dype inspektøren endrer en endring i Mobile ikke Desktop. Innstillingene under Content er de samme på alle skjermer, unntatt tabellen Per screen size.
• Med en seksjon markert viser en linjal over arbeidsflaten seksjonens bredde og hvor hvert breddetrinn slutter på skjermen. Sidemargen vises som røde streker. Hold pekeren over en chip under Width, så viser en stiplet ramme den bredden. Ingenting lagres før du klikker.
• En seksjon som er skjult på skjermen som vises, er en grå stripe. Se Per skjermstørrelse.
• Grid overlay viser et rutenett med 12 kolonner over sidebredden fra Theme › Layout, innenfor sidemargen. Outline mode tegner konturer rundt hvert element. Kundene ser ingen av dem.
• Valutavelgeren i bunnteksten vises når butikken har flere enn én valuta. Arbeidsflaten viser likevel prisene i basisvalutaen.
• Med redusert bevegelse slått på i systemet bytter panelene uten animasjon.

#Lag

Panelet Layers viser siden ovenfra og ned: toppteksten, hver seksjon med sine elementer og bunnteksten.

• Et klikk på en rad markerer seksjonen og åpner inspektøren.
• Dra i grepet eller trykk Move up og Move down for å flytte en seksjon.
• Øyet skjuler eller viser seksjonen. En skjult rad er merket hidden.
• Topptekst og bunntekst er merket off on this page når siden ikke viser dem.
• En rad med egne stilendringer viser antallet.

#Sider i designeren

Panelet Pages viser butikkens sider i fire grupper.

Opprett en side:

1. Trykk New page.
2. Fyll inn Page key, for eksempel about-us, og Display title.
3. Trykk Create page.

En nøkkel som butikken allerede bruker for en egen side, for eksempel product eller cart, kan ikke velges. Sidens adresse blir /page-key til du endrer den. Search pages… filtrerer listen. Innstillingene for en side står under Seksjoner og sider.

#Preview

Preview (⌘P) viser utkastet i fullskjerm uten rammer. Du veksler mellom Desktop, Tablet og Mobile. Lenker til andre sider i designeren følges. Preview viser også det du nettopp skrev, før neste lagring. Cookiebanneret vises som for en besøkende.

#Autolagring og angre

Utkastet lagres 0,7 sekunder etter siste endring. Indikatoren viser Saved just now, Saved 4 min ago og deretter klokkeslettet. Save draft ved siden av indikatoren lagrer med en gang. Hurtigtasten er ⌘S.

⌘Z angrer og ⌘⇧Z gjør om. Angre gjelder per side og per variant i økten. Et drag i en fargevelger eller en linje CSS er ett angresteg. Bytter du side eller variant, lagres endringen først.

Lagringen settes på pause i tre tilfeller:

Én økt per variant om gangen. To personer kan jobbe samtidig i hver sin variant.

Slik tar du over en variant:

1. Åpner du en variant som noen andre redigerer, vises siden uten verktøy, og en boks midt på skjermen spør. Trykk Ask <navn> to hand it over. Just look lukker boksen, og Ask to take over på linjen øverst åpner den igjen.
2. Mens du venter, viser boksen Waiting for Kim og hvor lang tid det er igjen før du kan ta over. Den andre personen får spørsmålet i designeren og et varsel i admin.
3. Trykker personen Hand over to fulgt av navnet ditt, blir varianten din med en gang. Designeren åpnes på nytt med det personen har lagret, uten at siden lastes inn på nytt, og sier Main is yours now. You see what Kim saved. Trykker personen Keep editing, blir den hos personen.
4. Svarer ingen innen 3 minutter, trykker du Take over. Det den andre personen har gjort, lagres i historikken først.

Den som mister varianten, ser siden uten verktøy under en grå linje, for eksempel Kim took over Main eller You handed Main to Kim. Forhåndsvisningen fungerer som vanlig, men ingenting kan endres. Ask to take over ber om varianten igjen. Blir varianten ledig, blir linjen grønn, og Edit <variant> åpner den.

#Publiser

Publish åpner publiseringsvinduet for varianten du redigerer. Det viser:

• Endringene under WHAT GOES LIVE, seksjon for seksjon: ADDED, CHANGED, MOVED og REMOVED. Er ingenting endret, står det NOTHING NEW.
• En kontroll av siden: tom side, bilder som ikke lastes, bilder uten beskrivelse, knapper uten lenke, plassholdertekst, manglende overskrift, seksjoner stilet bare for desktop og sidens navn. Merket N TO CHECK viser antall advarsler.
• Utkastsider som kundene ikke kan åpne. Huk dem av for å publisere dem samtidig.

Publiserer du en variant som ikke er live, står det for eksempel Christmas goes live instead of Main. Hele designet byttes, ikke bare det du endret i Christmas. Det som er publisert på Main siden du laget Christmas, vises i en liste, for de endringene blir ikke med.

Publisering er det eneste som endrer det kundene ser. Hver publisering blir en rad i variantens historikk.

Advarsel: ⌘Z angrer ikke en publisering. Åpne History, trykk Restore på versjonen som var live, og publiser igjen.

#Feil

Designeren viser feil på engelsk. Feilen blir stående til du lukker den. Manglende tilgang, opptatt navn, mistet tilkobling og utløpt økt har hver sin forklaring med hva du gjør. En ukjent feil vises med originalteksten.

#Det designet ikke styrer

Kassen, ventesiden og ordrebekreftelsen bruker BunStacks kasseramme. Den er lik i alle butikker og viser logoen og aksentfargen din. Se Kassen sett fra kunden.