Komponentpanelet

Komponentpanelet ændrer en del, der findes på alle sider, for eksempel sidehovedet.

Hvor: Fanen Components i designeren. Komponenterne én for én står under Komponenterne én for én.

Fanen viser 8 komponenter: Header, Menu panel, Footer, Product card, Product page, Gallery, Collection page og Banners. Hver række viser en skitse af komponenten og et resumé af indstillingerne.

#To modi

Designeren starter med Advanced slået fra. Så skifter du farver, skrifttyper og tekster, flytter og tilføjer sektioner og vælger, hvordan komponenterne ser ud. Ingen kode vises.

Advanced er kontakten øverst i designeren. Med Advanced slået til vises:

• knappen Customize with code nederst på komponentpanelet
• kodeeditoren bag knappen
• sektionen Custom component i sektionsbiblioteket, se Egen kode på en komponent
• panelet Code i ikonlisten

Valget gemmes i browseren og gælder næste gang, du åbner designeren på samme computer. Slår du Advanced fra, skjules vejene til koden. Kode, du allerede har skrevet, bliver liggende og vises i butikken.

#Én flade pr. komponent

Klik på en komponent. Komponentpanelet åbnes til højre, og siden bliver stående på arbejdsfladen. Det har ingen faner. Panelet har fem dele, oppefra og ned:

• Look: kortene, der vælger udseende.
• Options: komponentens valg og blokken Shape.
• Colours: temafarverne, komponenten bruger.
• Content: logo, tekster og kontaktoplysninger på Header, Menu panel og Footer.
• Customize with code: åbner kodeeditoren. Kun med Advanced slået til.

Et klik på en komponent viser den alene på arbejdsfladen, i sin første tilstand, og åbner panelet. Øverst i panelet står komponentens navn og en linje med stilarten og indstillingerne. Back to page i båndet over arbejdsfladen lukker panelet og viser siden igen. Et klik på en sektion lukker panelet og åbner sektionens inspektør.

#Tre veje ind

• Klik på komponentens række i fanen Components.
• Klik på sidehovedet eller sidefoden på arbejdsfladen.
• Hold markøren over et produktkort eller et banner. Klik Edit product card eller Edit banner i feltet, der vises.

#Tilstande

En tilstand er en visning af komponenten. Vælg tilstand med chipsene under komponentens navn. Arbejdsfladen viser komponenten i den tilstand, mens du ændrer den. Alle tilstande bruger samme stilart.

• Header: Top of page (øverst, gennemsigtig over hero, når valget er slået til), Scrolled (solid, som efter 24 px scroll), Menu open (menupanelet åbent) og Home screen (mobilens hjemmeskærm med appikonet, navnet og farverne, se Butikken som app).
• Product card: Default og Hover (billedet zoomer, det andet billede tones ind, og hurtigkøbsknappen vises). I tilstanden Hover viser et eget kort billedet, det andet billede og hurtigkøbsknappen. Kortets egne :hover-regler vises ikke.
• Product page: In stock, Sold out og Preorder. Lagerlinjen, købsknappen og udsolgt-teksten følger chippen på arbejdsfladen. Butikken viser altid produktets eget lager.
• Collection page: Default (med produkter) og Empty (uden produkter, med beskeden og vejen tilbage).

Menu panel, Footer, Gallery og Banners har ét udseende og derfor ingen chips.

#Look

Øverst står standardudseenderne som billedkort. Temaets stilart bestemmer, hvilke kort der findes. Stilarten vælges, når temaet oprettes, se Stilarter og dele.

Under dem står Your header styles: de stilarter, du har gemt til komponenten. For sidefoden hedder listen Your footer styles, for produktkortet Your product card styles.

• Det valgte kort har en ramme.
• Et klik på et stilartskort lægger stilarten på komponenten: udseende, valg, fanen Design og koden.
• Et klik på et standardkort tager stilarten af komponenten og skriver udseendet på temaet. Stilarten bliver i biblioteket og kan lægges på igen.
• En stilart uden navn vises som Custom style.
• Standardudseenderne kan ikke overskrives.

Stilarten, der er slået til, kan omdøbes og slettes. Rename og Delete står under kortene. Delete beder dig bekræfte to gange:

1. Tryk Delete.
2. Læs, hvad der bliver tilbage. Tryk Continue, eller Keep for at afbryde.
3. Skriv stilartens navn i feltet under Type Min navbar to confirm. Store eller små bogstaver er ligegyldige.
4. Tryk Delete "Min navbar".

Stilarten forsvinder fra biblioteket i alle butikker i workspacet. Det kan ikke fortrydes. En komponent, der bruger stilarten, beholder sit udseende.

#Options

Komponentens valg står som kontakter og lister. Panelet viser altid den værdi, butikken bruger. Har komponenten en gemt stilart, skrives ændringen på stilarten, og Update i kodeeditoren bliver klikbar. Ellers skrives ændringen på temaet.

• Et valg, der mangler indhold, er dæmpet. Linjen viser, hvad der mangler, og hvor du tilføjer det. Eksempel: sociale ikoner uden sociale links.
• Et valg, der allerede er slået til, kan altid slås fra. Teksten under kontakten viser så, hvordan du slår det til igen, for eksempel On. To turn it on again later, add a full-width image banner on Home first.
• Et valg, som en gemt stilart sætter, har reset ved siden af mærkaten. Reset fjerner stilartens værdi, og temaets værdi gælder.

Under valgene står Shape med hjørnerne til komponentens billeder og knapper. Se Stilarter og dele.

#Colours

Colours viser temafarverne, komponenten bruger. Listen pr. komponent står under Stilarter og dele.

Bemærk: Farverne her er temaets. En ændring ændrer farven alle steder, hvor den bruges. Farver, der kun gælder komponenten, sætter du under fanen Design i kodeeditoren.

#Content

Header, Menu panel og Footer har felterne Logo, Light logo, Favicon, App icon, Tagline, Copyright line, annoncelinjens tekst og Contact and social. Felterne beskrives under Komponenterne én for én. Indholdet hører til temaet eller butikken, aldrig til en gemt stilart. Det gælder også menuens links og overskriften over produkterne. En stilart, du lægger på i en anden butik, tager ikke logoet med.

#Det, arbejdsfladen viser

Mens en komponent er valgt, virker »Lägg i varukorgen« og filtrene på arbejdsfladen ikke. Priserne er butikkens, i samme valuta og omregning, som kunden ser.

Nogle gange tilpasser arbejdsfladen visningen af komponenten, så den kan ses. Menupanelet holdes åbent. Produktkortet vises som 4 kort i 4 kolonner. Kategorisiden låner butikkens første produkter. Under arbejdsfladen står der på engelsk, hvad der er tilpasset:

• "The panel is held open so you can judge it. In the shop a shopper opens it from the header."
• "The category name is your shop’s. The products are the first in your shop, not this category’s, and the category description and image are left out."
• "Transparent over hero is on: shown on a dark studio surface here. In the shop it sits over the first full-width banner of the home page."

Kategorisidens stilart ses kun her. Siden Collection på arbejdsfladen tegner sektionerne uden kategoribåndet og filtrene. Butikken viser stilarten på hver kategoriside.

#Kodeeditoren

Kodeeditoren findes kun i avanceret tilstand og åbnes med Customize with code nederst på komponentpanelet. Arbejdsfladen viser komponenten alene. Øverst står Custom style · Header, eller stilartens navn, hvis komponenten har en gemt stilart. Editoren har to faner, Design og Code. Back øverst, ved siden af navnet, henter panelet tilbage.

Udseende og valg bliver stående på panelet. Det, du ændrer, vises på arbejdsfladen med det samme og gemmes på komponentens aktive stilart.

#Design

Fanen Design styrer komponentens rod: typografi, farver, margener, udfyldning, kanter og skygger. Du indstiller værdier pr. breakpoint (desktop, tablet, mobil) og pr. tilstand (hover, focus, active). Fanen findes på alle 8 komponenter. Værdierne bliver CSS på komponentens rod og kommer med, når temaet publiceres.

#Code

Fanen Code har tre editorer, CSS, JS og HTML, på alle 8 komponenter.

Variables and actions åbner referencen for komponenten. Insert indsætter en variabel, hvor markøren står. Over JS-feltet findes kontakten Run JS in the builder. Slået fra sættes din JS på pause på arbejdsfladen i sessionen. Butikken og Preview (⌘P) kører den alligevel. Reglerne står under Egen kode på en komponent og Skabelonreference.

#Gem som egen stilart

Nederst i kodeeditoren findes tre knapper:

• Save as new style spørger efter et navn. Den gemmer komponentens hele stilart i biblioteket: udseende, valg, fanen Design og koden. Komponenten bruger stilarten, og kortet vises under Your header styles.
• Update "navn" vises, når den aktive stilart kommer fra biblioteket, og bliver klikbar, når den afviger fra den gemte. Det gælder også et valg, du har ændret på panelet. Knappen overskriver den gemte stilart. Andre butikker får ændringen først, når de lægger stilarten på igen.
• Reset to standard beder dig bekræfte først. Den fjerner komponentens aktive stilart: udseende, valg, fanen Design og koden. Komponenten viser stilartens standardudseende med temaets indstillinger. Biblioteket ændres ikke.

#Hvor det gemmes

At fjerne en stilart fra biblioteket ændrer ingen butik. Publicerer du et tema, hvor komponenten mangler egen stilart, fjernes stilarten fra live-butikken.