Design og varianter

Designeren ændrer butikkens udseende i en variant. Alt gemmes, mens du arbejder, men kunderne ser kun det, du publicerer.

Hvor: Storefronts › [butik] › Overview, derefter Open designer.

Designet beskrives på egne sider: Stilarter og dele, Komponentpanelet, Sektioner og sider og Egen kode på en komponent. Tasterne står under Genveje og kommandopaletten.

#Design og varianter

Designet er alt, der styrer, hvordan butikken ser ud: farver, skrifttyper, stilart, komponenter, sidehoved, sidefod og sektionerne på alle sider. En variant er en kopi af designet, som du kan arbejde i. Hver butik har én fra starten. Præcis én variant er live, og det er den, kunderne ser.

Designeren gemmer hele tiden i den variant, du har åben. Kunderne ser intet af det, før du publicerer. Vil du prøve noget andet, laver du en ny variant.

#Åbn designeren

Designeren åbnes fra butikkens Overview, med knappen Open designer eller rækken Design under Storefront settings. Den åbnes på live-varianten.

Rækken Design viser navnet på live-varianten. Er der gemte ændringer, som ikke er publiceret, står det også, for eksempel Main · Unpublished changes. Har butikken intet publiceret design, står der Nothing published yet.

De andre varianter, og hvem der redigerer dem, ser du i designerens variantmenu. Et link, der viser en variant uden login, laver du med Copy preview link i designeren, når du står i en variant, som ikke er live. For live-varianten laver du linket i forhåndsvisningen med Share.

#Designerens dele

På skærme smallere end 1600 px vises Live shop kun som et ikon. Bliver der trangt, forkortes butikkens og sidens navn og forsvinder så. Bliver der endnu mere trangt, forkortes variantens navn med …, og hele navnet står i variantmenuen. Editing på øverste linje betyder, at varianten er åben i denne fane.

Code vises kun, når Advanced er slået til. Se Komponentpanelet.

Ikonlisten er ordnet efter, hvor ofte du har brug for panelerne: først den side, du står på, derefter udseendet på alle sider, til sidst medier og de tekniske visninger. En streg adskiller grupperne. Search åbner kommandopaletten, hvor du finder et panel, en sektion at tilføje eller en opgave som Change the font ved at skrive det, du leder efter.

I panelet Theme ligger Colours, Typography og Buttons øverst og temaets stil nederst. Hver gruppe er åben eller lukket, som du forlod den, også efter at du har genindlæst siden i samme browser.

Variantmenuen viser den variant, du redigerer, og markerer live-varianten med Live. Har live-varianten gemte ændringer, som kunderne ikke ser, står antallet ved siden af, for eksempel 4 unpublished. Det forsvinder, når du har publiceret.

• Live shop åbner butikken, som kunderne ser den. Knappen findes, når butikken er publiceret.
• ⋯ View har Zoom, Grid overlay, Wide screen (1920), Outline mode, Command palette og Help. Det, der er slået til, står som On. På skærme smallere end 1600 px står der kun ⋯ på knappen.
• ← Back går tilbage til butikkens Overview. Er der arbejde, som ikke er gemt, spørger designeren først.

#Varianter

Variantmenuen viser butikkens varianter under VARIANTS. At skifte variant skifter kun, hvad du redigerer, butikken ændres ikke. Designeren åbner på live-varianten, medmindre du har valgt en anden. Så længe du er i en variant, der 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 er også Copy preview link for varianten.

Lav en ny variant:

1. Åbn variantmenuen, og tryk på + New variant.
2. Skriv et navn under Name, for eksempel Christmas.
3. Vælg, hvor varianten starter, under Start from.
4. Tryk på Create variant. Den nye variant åbnes med det samme.

⋯ ved siden af en variant har Rename, Duplicate og Delete…. Live-varianten kan ikke slettes: publicér en anden variant først. For at slette en variant skriver du dens navn. En slettet variant ligger under DELETED · BACK FOR 30 DAYS i 30 dage, og Bring back henter den tilbage.

#Historik

History på øverste linje åbner variantens historik. Hver variant har sin egen.

• Now øverst er det, du arbejder med. Det er ikke live.
• En række tilføjes, når du har holdt pause i 15 minutter, forlader designeren eller skifter variant. Rækken opregner, hvad der blev ændret, for eksempel Colours, Hero “Spring”, Fonts and 1 more · Kim.
• Hver publicering bliver en række. Den version, kunderne ser, er markeret Live.
• All viser alle rækker og Publishes kun publiceringerne. Show older viser flere.

Et klik på en række viser versionen på arbejdsfladen, men du kan ikke ændre den. Back to now fører dig tilbage. På en række er der:

#Arbejdsfladen

Arbejdsfladen viser butikken i bredden 1440 px. På mindre skærme skaleres den ned, så hele bredden ses. Wide screen (1920) viser Desktop i 1920 px, nedskaleret. Der ses forskellen mellem XL, 2XL og Full. Zoom i ⋯ View ændrer skalaen til 50, 75, 100 eller 125 %.

• Et klik markerer en sektion. Mærkaten over rammen viser, hvilken sektion det er.
• Links følges ikke. Et link til en anden side i designeren skifter side. Produkt-, kategori- og menulinks markerer sektionen og viser, hvor linket går hen.
• Desktop, Tablet og Mobile skifter både visning og breakpoint. I den dybe inspektør ændrer en ændring i Mobile ikke Desktop. Indstillingerne under Content er de samme på alle skærme, undtagen tabellen Per screen size.
• Med en sektion markeret viser en lineal over arbejdsfladen sektionens bredde, og hvor hvert breddetrin slutter på skærmen. Sidemargenen vises som røde streger. Hold markøren over en chip under Width, så viser en stiplet ramme den bredde. Intet gemmes, før du klikker.
• En sektion, der er skjult på den skærm, der vises, er en grå stribe. Se Pr. skærmstørrelse.
• Grid overlay viser et gitter med 12 kolonner over sidebredden fra Theme › Layout, inden for sidemargenen. Outline mode tegner konturer om hvert element. Kunderne ser ingen af dem.
• Valutavælgeren i sidefoden vises, når butikken har mere end én valuta. Arbejdsfladen viser alligevel priserne i basisvalutaen.
• Med reduceret bevægelse slået til i systemet skifter panelerne uden animation.

#Lag

Panelet Layers viser siden oppefra og ned: sidehovedet, hver sektion med sine elementer og sidefoden.

• Et klik på en række markerer sektionen og åbner inspektøren.
• Træk i grebet, eller tryk Move up og Move down for at flytte en sektion.
• Øjet skjuler eller viser sektionen. En skjult række er mærket hidden.
• Sidehoved og sidefod er mærket off on this page, når siden ikke viser dem.
• En række med egne stilændringer viser antallet.

#Sider i designeren

Panelet Pages viser butikkens sider i fire grupper.

Opret en side:

1. Tryk New page.
2. Udfyld Page key, for eksempel about-us, og Display title.
3. Tryk Create page.

En nøgle, som butikken allerede bruger til en side af sin egen, for eksempel product eller cart, kan ikke vælges. Sidens adresse bliver /page-key, indtil du ændrer den. Search pages… filtrerer listen. Indstillingerne for en side står under Sektioner og sider.

#Preview

Preview (⌘P) viser kladden i fuld skærm uden rammer. Du skifter mellem Desktop, Tablet og Mobile. Links til andre sider i designeren følges. Preview viser også det, du lige har skrevet, før næste lagring. Cookiebanneret vises som for en besøgende.

#Autogem og fortryd

Kladden gemmes 0,7 sekunder efter din seneste ændring. Indikatoren viser Saved just now, Saved 4 min ago og derefter klokkeslættet. Save draft ved siden af indikatoren gemmer med det samme. Genvejen er ⌘S.

⌘Z fortryder, og ⌘⇧Z gentager. Fortryd gælder pr. side og pr. variant i sessionen. Et træk i en farvevælger eller en linje CSS er ét fortryd-trin. Skifter du side eller variant, gemmes ændringen først.

Lagringen sættes på pause i tre tilfælde:

Én session pr. variant ad gangen. To personer kan arbejde samtidig i hver sin variant.

Sådan overtager du en variant:

1. Åbner du en variant, som en anden redigerer, vises siden uden værktøjer, og en boks midt på skærmen spørger. Tryk på Ask <navn> to hand it over. Just look lukker boksen, og Ask to take over på linjen øverst åbner den igen.
2. Mens du venter, viser boksen Waiting for Kim og hvor lang tid der er tilbage, før du kan overtage. Den anden person får spørgsmålet i designeren og en notifikation i admin.
3. Trykker personen på Hand over to efterfulgt af dit navn, bliver varianten din med det samme. Designeren åbner igen med det, personen har gemt, uden at siden genindlæses, og siger Main is yours now. You see what Kim saved. Trykker personen på Keep editing, bliver den hos personen.
4. Svarer ingen inden for 3 minutter, trykker du på Take over. Det, den anden person har lavet, gemmes først i historikken.

Den, der mister varianten, ser siden uden værktøjer under en grå linje, for eksempel Kim took over Main eller You handed Main to Kim. Forhåndsvisningen virker som normalt, men intet kan ændres. Ask to take over beder om varianten igen. Bliver varianten ledig, bliver linjen grøn, og Edit <variant> åbner den.

#Publicér

Publish åbner publiceringsvinduet for den variant, du redigerer. Det viser:

• Ændringerne under WHAT GOES LIVE, sektion for sektion: ADDED, CHANGED, MOVED og REMOVED. Er intet ændret, står der NOTHING NEW.
• En kontrol af siden: tom side, billeder, der ikke indlæses, billeder uden beskrivelse, knapper uden link, pladsholdertekst, manglende overskrift, sektioner stylet kun til desktop og sidens navn. Mærket N TO CHECK viser antallet af advarsler.
• Kladdesider, som kunderne ikke kan åbne. Sæt flueben ved dem for at publicere dem samtidig.

Publicerer du en variant, der ikke er live, står der for eksempel Christmas goes live instead of Main. Hele designet skiftes, ikke kun det, du ændrede i Christmas. Det, der er publiceret på Main, siden du lavede Christmas, vises i en liste, for de ændringer kommer ikke med.

Publicering er det eneste, der ændrer det, kunderne ser. Hver publicering bliver en række i variantens historik.

Advarsel: ⌘Z fortryder ikke en publicering. Åbn History, tryk på Restore på den version, der var live, og publicér igen.

#Fejl

Designeren viser fejl på engelsk. Fejlen bliver stående, indtil du lukker den. Manglende tilladelse, optaget navn, mistet forbindelse og udløbet session har hver sin forklaring med, hvad du gør. En ukendt fejl vises med sin originaltekst.

#Det, designet ikke styrer

Kassen, ventesiden og ordrebekræftelsen bruger BunStacks kasseramme. Den er ens i alle butikker og viser dit logo og din accentfarve. Se Kassen set fra kunden.