Design och varianter

Designern ändrar butikens utseende i en variant. Allt sparas medan du jobbar, men kunderna ser bara det du publicerar.

Var: Storefronts › [butik] › Overview, sedan Open designer.

Designen beskrivs på egna sidor: Stilar och delar, Komponentpanelen, Sektioner och sidor och Egen kod på en komponent. Kortkommandona finns under Kortkommandon och kommandopaletten.

#Design och varianter

Designen är allt som styr hur butiken ser ut: färger, typsnitt, stil, komponenter, sidhuvud, sidfot och alla sidors sektioner. En variant är en kopia av designen som du kan jobba i. Varje butik har en från början. Exakt en variant är live, och det är den kunderna ser.

Designern sparar hela tiden i varianten du har öppen. Kunderna ser inget av det förrän du publicerar. Vill du prova något annat gör du en ny variant.

#Öppna designern

Designern öppnas från butikens Overview, med knappen Open designer eller raden Design under Storefront settings. Den öppnas på live-varianten.

Raden Design visar namnet på live-varianten. Finns det sparade ändringar som inte är publicerade står det också, till exempel Main · Unpublished changes. Har butiken ingen publicerad design står det Nothing published yet.

De andra varianterna och vem som redigerar dem ser du i designerns variantmeny. En länk som visar en variant utan inloggning gör du med Copy preview link i designern när du står i en variant som inte är live. För live-varianten gör du länken i förhandsvisningen med Share.

#Designerns delar

På skärmar smalare än 1600 px visas Live shop bara som ikon. Blir det trångt kortas butikens och sidans namn och försvinner sedan. Är det ännu trängre kortas variantens namn med …, och hela namnet står i variantmenyn. Editing i översta raden betyder att varianten är öppen i den här fliken.

Code visas bara när Advanced är på. Se Komponentpanelen.

Ikonlistan är ordnad efter hur ofta du behöver panelerna: först sidan du står på, sedan utseendet på alla sidor, sist media och de tekniska vyerna. Ett streck skiljer grupperna åt. Search öppnar kommandopaletten, där du hittar en panel, en sektion att lägga till eller en uppgift som Change the font genom att skriva vad du letar efter.

I panelen Theme ligger Colours, Typography och Buttons överst och temats stil längst ner. Varje grupp är öppen eller stängd som du lämnade den, även efter att du har laddat om sidan i samma webbläsare.

Variantmenyn visar varianten du redigerar och märker live-varianten med Live. Har live-varianten sparade ändringar som kunderna inte ser står antalet bredvid, till exempel 4 unpublished. Det försvinner när du har publicerat.

• Live shop öppnar butiken som kunderna ser den. Knappen finns när butiken är publicerad.
• ⋯ View har Zoom, Grid overlay, Wide screen (1920), Outline mode, Command palette och Help. Det som är på är märkt On. På skärmar smalare än 1600 px står det bara ⋯ på knappen.
• ← Back går tillbaka till butikens Overview. Finns osparat arbete frågar designern först.

#Varianter

Variantmenyn listar butikens varianter under VARIANTS. Att byta variant byter bara vad du redigerar, butiken ändras inte. Designern öppnas på live-varianten om du inte har valt en annan. Så länge du är i en variant som inte är live har designern en gul ram, och en gul rad säger till exempel Variant · not live. You're editing Christmas. Customers see Main until you publish this one. Där finns också Copy preview link för varianten.

Gör en ny variant:

1. Öppna variantmenyn och tryck + New variant.
2. Skriv ett namn under Name, till exempel Christmas.
3. Välj var varianten börjar under Start from.
4. Tryck Create variant. Den nya varianten öppnas direkt.

⋯ bredvid en variant har Rename, Duplicate och Delete…. Live-varianten går inte att ta bort: publicera en annan variant först. För att ta bort en variant skriver du dess namn. En borttagen variant ligger kvar under DELETED · BACK FOR 30 DAYS i 30 dagar, och Bring back tar tillbaka den.

#Historik

History i översta raden öppnar variantens historik. Varje variant har sin egen.

• Now överst är det du jobbar med. Det är inte live.
• En rad läggs till när du har pausat i 15 minuter, lämnar designern eller byter variant. Raden räknar upp vad som ändrades, till exempel Colours, Hero “Spring”, Fonts and 1 more · Kim.
• Varje publicering blir en rad. Versionen kunderna ser är märkt Live.
• All visar alla rader och Publishes bara publiceringarna. Show older visar fler.

Ett klick på en rad visar versionen på arbetsytan, men du kan inte ändra den. Back to now tar dig tillbaka. På en rad finns:

#Arbetsytan

Arbetsytan visar butiken i bredden 1440 px. På mindre skärmar skalar designern ner den så att hela bredden syns. Wide screen (1920) visar Desktop i 1920 px, nedskalat. Där syns skillnaden mellan XL, 2XL och Full. Zoom i ⋯ View ändrar skalan till 50, 75, 100 eller 125 %.

• Ett klick markerar en sektion. Etiketten ovanför ramen visar sektionens namn.
• Länkar följs inte. En länk till en annan sida i designern byter sida. Produkt-, kategori- och menylänkar markerar sektionen och visar vart länken går.
• Desktop, Tablet och Mobile byter både vy och brytpunkt. I den djupa inspektorn ändrar en ändring i läget Mobile inte Desktop. Inställningarna under Content är samma på alla skärmar, utom tabellen Per screen size.
• Med en sektion markerad visar en linjal ovanför arbetsytan sektionens bredd och var varje breddsteg slutar på skärmen. Sidomarginalen syns som röda streck. Håll pekaren över ett chip under Width, så visar en streckad ram den bredden. Inget sparas förrän du klickar.
• En sektion som är dold på skärmen som visas är en grå remsa. Se Per skärmstorlek.
• Grid overlay visar ett raster med 12 kolumner över sidbredden från Theme › Layout, innanför sidomarginalen. Outline mode ritar konturer runt varje element. Kunderna ser inget av dem.
• Valutaväljaren i sidfoten syns när butiken har fler än en valuta. Arbetsytan visar ändå priserna i basvalutan.
• Med minskad rörelse påslagen i systemet byter panelerna utan animation.

#Lager

Panelen Layers visar sidan uppifrån och ner: sidhuvudet, varje sektion med sina element och sidfoten.

• Ett klick på en rad markerar sektionen och öppnar inspektorn.
• Dra i greppet eller tryck Move up och Move down för att flytta en sektion.
• Ögat döljer eller visar sektionen. En dold rad är märkt hidden.
• Sidhuvud och sidfot är märkta off on this page när sidan inte visar dem.
• En rad med egna stiländringar visar antalet.

#Sidor i designern

Panelen Pages listar butikens sidor i fyra grupper.

Skapa en sida:

1. Tryck New page.
2. Fyll i Page key, till exempel about-us, och Display title.
3. Tryck Create page.

En nyckel som butiken redan använder för en egen sida, till exempel product eller cart, går inte att välja. Sidans adress blir /page-key tills du ändrar den. Search pages… filtrerar listan. Inställningarna för en sida finns under Sektioner och sidor.

#Preview

Preview (⌘P) visar utkastet i helskärm utan ramar. Du växlar mellan Desktop, Tablet och Mobile. Länkar till andra sidor i designern fungerar. Preview visar även det du nyss skrev, före nästa sparning. Cookiebannern syns som för en besökare.

#Autospar och ångra

Designern sparar utkastet 0,7 sekunder efter din senaste ändring. Indikatorn visar Saved just now, Saved 4 min ago och sedan klockslaget. Save draft bredvid indikatorn sparar med en gång. Kortkommandot är ⌘S.

⌘Z ångrar och ⌘⇧Z gör om. Ångra gäller per sida och per variant under sessionen. Ett drag i en färgväljare eller en rad CSS är ett ångra-steg. Byter du sida eller variant sparas ändringen först.

Sparningen pausas i tre lägen:

En session per variant åt gången. Två personer kan jobba samtidigt i var sin variant.

Så tar du över en variant:

1. Öppnar du en variant som någon annan redigerar visas sidan utan verktyg, och en ruta mitt på skärmen frågar. Tryck Ask <namn> to hand it over. Just look stänger rutan, och Ask to take over i raden överst öppnar den igen.
2. Medan du väntar visar rutan Waiting for Kim och hur lång tid som är kvar innan du kan ta över. Den andra personen får frågan i designern och en avisering i admin.
3. Trycker personen Hand over to följt av ditt namn blir varianten din direkt. Designern öppnas på nytt med det personen har sparat, utan att sidan laddas om, och säger Main is yours now. You see what Kim saved. Trycker personen Keep editing stannar den hos personen.
4. Svarar ingen inom 3 minuter trycker du Take over. Det den andra personen har gjort sparas i historiken först.

Den som blir av med varianten ser sidan utan verktyg under en grå rad, till exempel Kim took over Main eller You handed Main to Kim. Förhandsvisningen fungerar som vanligt, men inget går att ändra. Ask to take over frågar efter varianten igen. Blir varianten ledig blir raden grön, och Edit <variant> öppnar den.

#Publicera

Publish öppnar publiceringsrutan för varianten du redigerar. Den visar:

• Ändringarna under WHAT GOES LIVE, sektion för sektion: ADDED, CHANGED, MOVED och REMOVED. Har inget ändrats står det NOTHING NEW.
• En kontroll av sidan. Märket N TO CHECK visar antalet varningar. Kontrollen letar efter tom sida, bilder som inte laddar och bilder utan beskrivning. Den letar också efter knappar utan länk, platshållartext, saknad rubrik, sektioner stilade bara för desktop och sidans namn.
• Utkastsidor som kunderna inte kan öppna. Bocka i dem för att publicera dem samtidigt.

Publicerar du en variant som inte är live står det till exempel Christmas goes live instead of Main. Hela designen byts, inte bara det du ändrade i Christmas. Det som har publicerats på Main sedan du gjorde Christmas visas i en lista, för de ändringarna följer inte med.

Publicering är det enda som ändrar det kunderna ser. Varje publicering blir en rad i variantens historik.

Varning: ⌘Z ångrar inte en publicering. Öppna History, tryck Restore på versionen som var live och publicera igen.

#Fel

Designern visar fel på engelska. Felet ligger kvar tills du stänger det. Fyra fel har en egen förklaring. Saknad behörighet: You do not have permission to change this. Ask an owner of the shop, or sign in again. Upptaget namn: Something with that name or address already exists here. Pick another one. Tappad uppkoppling: No connection to the server. Your work is still on screen — try again in a moment. Utgången session: Your session expired. Sign in again and your last saved draft will be waiting. Ett okänt fel visas med sin originaltext.

#Det designen inte styr

Kassan, väntesidan och orderbekräftelsen använder BunStacks kassaram. Den är likadan i alla butiker och visar din logotyp och accentfärg. Se Kassan sedd från kunden.