Design Editor

Grundlæggende #

Når du arbejder med Content for at tilføje Clerk.io-elementer til din side, kan Design Editor bruges til at styre udseendet og fornemmelsen af elementerne.

Du kan oprette så mange designs, du vil, og et vilkårligt antal Content-blokke kan bruge det samme design.

Når du går til siden Designs for Search / Recommendations / Email, kan du se en liste over alle dine designs, inklusive deres ID’er.

Når du opretter et nyt design, kan du vælge en startskabelon fra vores Design Library som udgangspunkt, eller blot starte fra bunden.

Skærmstørrelser #

Øverst til højre på skærmen kan du forhåndsvise dine designs for forskellige skærmstørrelser. Mange af komponenterne understøtter også individuel styling til hver af disse skærmstørrelser for at gøre dine designs fuldt ud responsive.

Du kan tilføje styling til følgende skærmstørrelser:

• Desktop
• Tablet
• Mobil

Layoutoversigt #

Selve Design Editor består af:

• Et forhåndsvisningsvindue der viser designet, som det vil se ud på din side.
• Komponenttræet der viser alle de komponenter, der udgør designet.

Komponenter er generelt listet i den rækkefølge, de vises på. Den eneste undtagelse er, når du bruger flydende komponenter som Badges, der kan placeres oven på andre komponenter.

Når du holder musen over en komponent i komponenttræet, fremhæves den i forhåndsvisningsvinduet, så du kan se, hvad du arbejder med. Klikker du på et element i forhåndsvisningsvinduet, vælges den tilsvarende komponent, og dens indstillinger åbnes.

Du kan trække og slippe komponenter i komponenttræet for at omarrangere dem eller flytte dem ind i forskellige forældrekomponenter. Visuelle indikatorer viser præcis, hvor en komponent placeres, når du slipper den.

Komponenttræet understøtter også tastaturnavigation. Brug piletasterne til at navigere mellem komponenter, og brug tastaturgenveje til almindelige handlinger som kopiering, indsættelse og sletning af komponenter.

Komponenter #

Hvert design består af en række byggesten, kaldet komponenter. Et design kan indeholde lige så mange, du ønsker, og i hvilken som helst rækkefølge.

Nye komponenter tilføjes ved at klikke på '+' knappen i højre side af enten Background-komponenten eller en anden. En komponentvælger åbnes, hvor du kan søge efter en specifik komponenttype ved navn.

Generelle indstillinger #

Ud over deres specialindstillinger har de fleste komponenter også nedenstående standardindstillinger.

Betinget visning #

Dette giver dig mulighed for at vise eller skjule komponenten baseret på, om en betingelse er opfyldt. Det bruger syntaksen fra vores Filters-system og henviser altid til item som datakilde.

Et eksempel kunne være kun at vise en komponent, hvis et produkt er på tilbud: item.on_sale == true.

Eller kun vise den, hvis prisen er over 100 og produktet er på lager: item.price > 100 and item.in_stock == true.

Brugerdefineret CSS #

Dette giver dig mulighed for at anvende specifikke CSS-regler på komponenten, hvis du har brug for at foretage tilpasninger, som indstillingerne ellers ikke tillader. CSS’en redigeres i en dedikeret kodeeditor med syntaksfremhævning.

De CSS-regler, du tilføjer, vil kun påvirke den komponent, du tilføjer dem til.

Skrifttyper #

Design Editor leveres med et bredt udvalg af skrifttyper, som du kan bruge. Derudover kan du vælge blot at arve skrifttypen fra din webshop ved at vælge Use webshop font.

Den eneste begrænsning ved dette er for Embedded Email Recommendations, hvor du skal vælge en skrifttype, da de ikke har adgang til din webshops skrifttyper.

Liquid-variabler #

I ethvert tekstfelt har du mulighed for at tilføje data gennem Liquid-skabelonsproget.

Dette inkluderer oprettelse af dynamiske tekstfelter som {{ headline }} eller tilføje beregninger baseret på produktegenskaber, f.eks.: {{ 100-((item.list_price*100)/item.price) | round }} %

Ovenstående eksempel ville beregne den afrundede procentdel, der spares, når et produkt er på tilbud.

Baggrund #

Dette er en særlig komponent, som er basen for ethvert design. Baggrunden er det overordnede container, som resten af designet indsættes i.

Normalt er baggrunden gennemsigtig, men du kan vælge en baggrundsfarve, hvis det er nødvendigt.

Data Loop #

Dette gør det muligt at gennemgå en type data og vise et valgt antal af dem. Dette kan bruges til at vise produkter, kategorier eller sider, eller gennemløbe en egenskab som varianter eller farver.

Du kan angive et index, hvis du vil starte fra et bestemt element på listen, og du kan vælge antallet af elementer, der skal vises.

Denne komponent viser som standard elementer i en kolonne.

Gitter af elementer #

Fungerer ligesom Data Loop, men viser elementerne i et gitter-layout i stedet for en enkelt kolonne. Dette er nyttigt til at oprette et Search Page- eller Category Page-design, hvor produkterne vises ved siden af hinanden.

Du kan konfigurere antallet af kolonner baseret på skærmstørrelse og afstanden mellem elementerne både vandret og lodret.

Slider #

Viser elementer i en vandret række med sliderpile til at rulle igennem dem.

Du kan konfigurere antallet af emner, der skal vises pr. slide ud fra skærmstørrelse, og standardstylings for knapperne. Der er i øjeblikket 4 knaptyper:

• Standard
• Gul
• Med kant
• Ingen baggrund (hvis du vil tilpasse pile med CSS)

Brug Button position til at vælge, om knapperne skal centreres på hver side af slideren, eller vises i et af dens fire hjørner.

Indlæs flere-knap #

Bruges primært til Search Page- og Category Page-designs, denne knap giver brugerne mulighed for at se flere elementer end det standardantal, du har konfigureret.

Dette er god praksis, da det gør det muligt at reducere indlæsningstiden ved først at vise et mindre antal elementer, og lade brugerne se flere, hvis de ønsker det.

Knapteksten kan tilpasses, og du kan vælge hvor mange elementer, der skal indlæses hver gang den klikkes på. Den vil indlæse så mange elementer, som den valgte Product Logic returnerer, indtil der ikke findes flere elementer.

Kasse #

Disse fungerer som beholdere til andre komponenter. De kan bruges til at gruppere komponenter sammen eller oprette et layout med flere kolonner.

De kan konfigureres med en baggrundsfarve og et layout, der er baseret på flexbox CSS-layoutsystemet.

Du kan også styre kassens dimensioner samt margin og padding.

Linie #

En simpel skillelinje, der bruges til visuelt at adskille komponenter.

Du kan styre dens farve og stil, eksempelvis om den skal være solid, stiplet, streg eller dobbelt.

Badge #

Dette er en fremragende måde at tilføje visuel stil til dit design, og det er især nyttigt til at fremhæve detaljer om dine produkter som rabatter, nyheder m.m.

Badges har en række indstillinger til at kontrollere stil, placering, visningstekst og mere. De kan vises i et af de fire hjørner af et element og kan vises som enten en afrundet kasse eller et diagonalt banner.

Knap #

En simpel knap, der kan fungere som en effektiv call-to-action for besøgende. Det gør det muligt at konfigurere visningsteksten, et brugerdefineret link eller onclick-event, der skal bruges, når der klikkes på knappen samt baggrundsfarven for at matche dit brand.

onclick-eventoet er et stykke Javascript, der kører, når der klikkes på knappen, hvilket kan bruges til tilføj til kurv-funktionen, ønskeliste features og anden Javascript-funktionalitet.

Billede #

En visuel komponent, der viser et billede i en specificeret størrelse ud fra en attribut (fx et produktbillede) eller et bestemt URL.

Du kan tilføje et unikt link til billedet, hvis du f.eks. vil sende kunder til produktsiden ved klik, og du kan vælge en hover-effekt som at gøre billedet større, når brugere holder musen over det.

Link #

Angiv en URL, som besøgende sendes til, når en komponent inde i den klikkes på.

Du kan vælge værdien af en attribut (som et produkt-URL), et bestemt URL eller en onclick-event.

Pris #

Mest brugt til at vise prisen på et produkt, denne komponent indeholder en række prisspecifikke konfigurationsindstillinger.

Disse inkluderer antal decimaler, tusindtals- og decimaladskillere samt valutasymbolet, der vises enten før eller efter prisen.

Tekst #

Tilføjer tekstblokke til dit design. Disse bruges til mange formål, som at vise navne på produkter eller sider, brands, beskrivelser og alle andre data, du vil repræsentere som tekst.

Teksten kan baseres på statisk tekst efter eget valg eller attributdata som produktnavn eller sidetitel. Du kan også style tekst med klassiske formateringsmuligheder som fed, kursiv osv.

Farvevarianter #

Dette er en specialiseret Data Loop, der gør det muligt at gennemløbe en liste af farvekoder og vise dem som farvevalg. De fungerer bedst, hvis du sender en liste med farvekoder for hvert produkt, fx: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Anmeldelser #

Tilføjer anmeldelsesstjerner til dit design, der angiver, hvor meget køberne kunne lide produktet. Anmeldelser vises som fem stjerner, hvor den gennemsnitlige vurdering vises som sorte stjerner.

Derudover vises antallet af anmeldelser, produktet har modtaget, ved siden af stjernerne.

De kræver følgende to attributter for at være tilgængelige for produkter:

• reviews_avg: Den gennemsnitlige vurdering for produktet ud af fem stjerner.
• reviews_amount: Det samlede antal anmeldelser for produktet.

Brugerdefineret HTML #

Dette er en specialiseret komponent, der giver dig mulighed for at tilføje valgfri HTML-kode til dit design. Dette kan bruges til at tilføje brugerdefinerede scripts eller tilføje specifikke blokke, der ellers ville være svære at oprette med de øvrige komponenter.

De understøtter også brug af Liquid-variabler til at tilgå og arbejde med dataobjekter som produkter, kategorier og sider.

Kopiering af komponenter #

Hvis du vil genbruge komponenter fra et andet design, kan du kopiere dem mellem designs. Dette virker både mellem forskellige designs på en enkelt Store, men du kan også kopiere komponenter mellem Stores på din konto.

Hold musen over en komponent i komponenttræet, og klik på Copy-knappen, eller brug tastaturgenvejen. Gå til dit måldesign, og klik på Paste-knappen for at indsætte den i den komponent, hvor den skal vises. Du kan også bruge standard tastaturgenveje til kopiering og indsættelse.

Visning af kode #

Du kan til enhver tid inspicere den genererede kode for dit design ved at klikke på View code-knappen. Dette åbner en kodefremviser med syntaksfremhævning, der viser den genererede HTML og CSS for dit design.

Du kan bruge dette til at konvertere dit Design Editor-design til et Code Design ved at kopiere HTML- og CSS-koden, oprette et nyt tomt Code Design og tilføje HTML- og CSS-koden til det.

Fortryd / Annuller fortryd #

Hvis du laver en fejl, kan du altid fortryde dine seneste handlinger ved at klikke på Undo-knappen eller tilføje den tilbage med Redo-knappen.

Fortryd/annuller fortryd-systemet inkluderer en visuel tidslinje, der viser listen over de ændringer, du har lavet. Du kan klikke på ethvert punkt i tidslinjen for at hoppe tilbage til den specifikke tilstand, hvilket gør det nemt at gennemgå og navigere i din redigeringshistorik.

Dark Mode #

Design Editor understøtter et dark mode-tema. Du kan slå det til og fra i editorens værktøjslinje for at skifte mellem lyst og mørkt udseende.

Tastaturgenveje #

Design Editor understøtter tastaturgenveje til almindelige handlinger. Disse gør det muligt at arbejde hurtigere uden musen.

Almindelige genveje inkluderer:

• Kopier en komponent
• Indsæt en komponent
• Slet en komponent
• Fortryd / Annuller fortryd ændringer
• Piletaster til navigation i komponenttræet

Publicering #

Når du er klar til at bruge dit design, skal det udgives ved at klikke på Publish-knappen i editorens værktøjslinje. Når du foretager ændringer, bør du også udgive dit design igen.

Du kan derefter vælge enten at forlade Design Editor eller blive og lave yderligere ændringer.