Komponentpanelet

Komponentpanelet endrer en del som finnes på alle sider, for eksempel toppteksten.

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

Fanen viser 8 komponenter: Header, Menu panel, Footer, Product card, Product page, Gallery, Collection page og Banners. Hver rad viser en skisse av komponenten og et sammendrag av innstillingene.

#To moduser

Designeren starter med Advanced av. Da bytter du farger, skrifttyper og tekster, flytter og legger til seksjoner og velger hvordan komponentene ser ut. Ingen kode vises.

Advanced er bryteren øverst i designeren. Med Advanced på vises:

• knappen Customize with code nederst på komponentpanelet
• koderedigereren bak knappen
• seksjonen Custom component i seksjonsbiblioteket, se Egen kode på en komponent
• panelet Code i ikonlisten

Valget lagres i nettleseren og gjelder neste gang du åpner designeren på samme datamaskin. Slår du av Advanced, skjules veiene til koden. Kode du allerede har skrevet, blir liggende og vises i butikken.

#Én flate per komponent

Klikk på en komponent. Komponentpanelet åpnes til høyre, og siden står igjen på arbeidsflaten. Det har ingen faner. Panelet har fem deler, ovenfra og ned:

• Look: kortene som velger utseende.
• Options: komponentens valg og blokken Shape.
• Colours: temafargene komponenten bruker.
• Content: logo, tekster og kontaktopplysninger på Header, Menu panel og Footer.
• Customize with code: åpner koderedigereren. Bare med Advanced på.

Et klikk på en komponent viser den alene på arbeidsflaten, i sin første tilstand, og åpner panelet. Øverst i panelet står komponentens navn og en linje med stilen og innstillingene. Back to page i båndet over arbeidsflaten lukker panelet og viser siden igjen. Et klikk på en seksjon lukker panelet og åpner seksjonens inspektør.

#Tre veier inn

• Klikk på komponentens rad i fanen Components.
• Klikk på toppteksten eller bunnteksten på arbeidsflaten.
• Hold pekeren over et produktkort eller et banner. Klikk Edit product card eller Edit banner i boksen som vises.

#Tilstander

En tilstand er en visning av komponenten. Velg tilstand med chipsene under komponentens navn. Arbeidsflaten viser komponenten i den tilstanden mens du endrer den. Alle tilstander bruker samme stil.

• Header: Top of page (øverst, gjennomsiktig over hero når valget er på), Scrolled (solid, som etter 24 px scroll), Menu open (menypanelet åpent) og Home screen (mobilens hjemskjerm med appikonet, navnet og fargene, se Butikken som app).
• Product card: Default og Hover (bildet zoomer, det andre bildet tones inn og hurtigkjøpsknappen vises). I tilstanden Hover viser et eget kort bildet, det andre bildet og hurtigkjøpsknappen. Kortets egne :hover-regler vises ikke.
• Product page: In stock, Sold out og Preorder. Lagerlinjen, kjøpsknappen og utsolgt-teksten følger chipen på arbeidsflaten. Butikken viser alltid produktets eget lager.
• Collection page: Default (med produkter) og Empty (uten produkter, med meldingen og veien tilbake).

Menu panel, Footer, Gallery og Banners har ett utseende og derfor ingen chips.

#Look

Øverst står standardutseendene som bildekort. Temaets stil bestemmer hvilke kort som finnes. Stilen velges når temaet opprettes, se Stiler og deler.

Under dem står Your header styles: stilene du har lagret for komponenten. For bunnteksten heter listen Your footer styles, for produktkortet Your product card styles.

• Det valgte kortet har en ramme.
• Et klikk på et stilkort legger stilen på komponenten: utseende, valg, fanen Design og koden.
• Et klikk på et standardkort tar stilen av komponenten og skriver utseendet på temaet. Stilen blir liggende i biblioteket og kan legges på igjen.
• En stil uten navn vises som Custom style.
• Standardutseendene kan ikke overskrives.

Stilen som er på, kan få nytt navn og slettes. Rename og Delete står under kortene. Delete ber deg bekrefte to ganger:

1. Trykk Delete.
2. Les hva som blir igjen. Trykk Continue, eller Keep for å avbryte.
3. Skriv stilens navn i feltet under Type Min navbar to confirm. Store eller små bokstaver spiller ingen rolle.
4. Trykk Delete "Min navbar".

Stilen forsvinner fra biblioteket i alle butikker i workspacet. Det kan ikke angres. En komponent som bruker stilen, beholder utseendet.

#Options

Komponentens valg står som brytere og lister. Panelet viser alltid verdien butikken bruker. Har komponenten en lagret stil, skrives endringen på stilen, og Update i koderedigereren blir klikkbar. Ellers skrives endringen på temaet.

• Et valg som mangler innhold, er dempet. Linjen viser hva som mangler og hvor du legger det til. Eksempel: sosiale ikoner uten sosiale lenker.
• Et valg som allerede er på, kan alltid slås av. Teksten under bryteren viser da hvordan du slår det på igjen, for eksempel On. To turn it on again later, add a full-width image banner on Home first.
• Et valg som en lagret stil setter, har reset ved siden av etiketten. Reset fjerner stilens verdi, og temaets verdi gjelder.

Under valgene står Shape med hjørnene for komponentens bilder og knapper. Se Stiler og deler.

#Colours

Colours viser temafargene komponenten bruker. Listen per komponent står under Stiler og deler.

Merk: Fargene her er temaets. En endring endrer fargen overalt der den brukes. Farger som bare gjelder komponenten, setter du under fanen Design i koderedigereren.

#Content

Header, Menu panel og Footer har feltene Logo, Light logo, Favicon, App icon, Tagline, Copyright line, annonselinjens tekst og Contact and social. Feltene beskrives under Komponentene én for én. Innholdet hører til temaet eller butikken, aldri til en lagret stil. Det gjelder også menyens lenker og overskriften over produktene. En stil du legger på i en annen butikk, tar ikke med logoen.

#Det arbeidsflaten viser

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

Noen ganger tilpasser arbeidsflaten visningen av komponenten slik at den synes. Menypanelet holdes åpent. Produktkortet vises som 4 kort i 4 kolonner. Kategorisiden låner butikkens første produkter. Under arbeidsflaten står det på engelsk hva som 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 stil synes bare her. Siden Collection på arbeidsflaten tegner seksjonene uten kategoribåndet og filtrene. Butikken viser stilen på hver kategoriside.

#Koderedigereren

Koderedigereren finnes bare i avansert modus og åpnes med Customize with code nederst på komponentpanelet. Arbeidsflaten viser komponenten alene. Øverst står Custom style · Header, eller stilens navn hvis komponenten har en lagret stil. Redigereren har to faner, Design og Code. Back øverst, ved siden av navnet, henter tilbake panelet.

Utseende og valg blir stående på panelet. Det du endrer, vises på arbeidsflaten med en gang og lagres på komponentens aktive stil.

#Design

Fanen Design styrer komponentens rot: typografi, farger, marger, utfylling, kanter og skygger. Du stiller inn verdier per bruddpunkt (desktop, tablet, mobil) og per tilstand (hover, focus, active). Fanen finnes på alle 8 komponenter. Verdiene blir CSS på komponentens rot og blir med når temaet publiseres.

#Code

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

Variables and actions åpner referansen for komponenten. Insert setter inn en variabel der markøren står. Over JS-feltet finnes bryteren Run JS in the builder. Slått av settes JS-en din på pause på arbeidsflaten i økten. Butikken og Preview (⌘P) kjører den likevel. Reglene står under Egen kode på en komponent og Malreferanse.

#Lagre som egen stil

Nederst i koderedigereren finnes tre knapper:

• Save as new style spør etter et navn. Den lagrer komponentens hele stil i biblioteket: utseende, valg, fanen Design og koden. Komponenten bruker stilen, og kortet vises under Your header styles.
• Update "navn" vises når den aktive stilen kommer fra biblioteket, og blir klikkbar når den skiller seg fra den lagrede. Det gjelder også et valg du har endret på panelet. Knappen overskriver den lagrede stilen. Andre butikker får endringen først når de legger på stilen igjen.
• Reset to standard ber deg bekrefte først. Den fjerner komponentens aktive stil: utseende, valg, fanen Design og koden. Komponenten viser stilens standardutseende med temaets innstillinger. Biblioteket endres ikke.

#Hvor det lagres

Å fjerne en stil fra biblioteket endrer ingen butikk. Publiserer du et tema der komponenten mangler egen stil, fjernes stilen fra live-butikken.