Design Editor

Grundlæggende #

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

Du kan oprette et vilkårligt antal designs, og ethvert 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 for at komme i gang eller blot starte fra bunden.

Skærmstørrelser #

I øverste højre hjørne af skærmen kan du forhåndsvise dine designs for forskellige skærmstørrelser. Mange af komponenterne understøtter også individuel styling for hver af disse skærmstørrelser, så dine designs bliver fuldt responsive.

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

• Desktop
• Tablet
• Mobil

Layout-oversigt #

Selve Design Editor består af:

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

Komponenter er generelt listet i den rækkefølge, de bliver vist. Den eneste undtagelse er, når du bruger flydende komponenter som Badges, som 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. Klik på et element i forhåndsvisningsvinduet vælger den tilsvarende komponent og åbner dens indstillinger.

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

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

Komponenter #

Hvert design består af en række byggeklodser, kaldet komponenter. Et design kan indeholde så mange, du vil, i den rækkefølge, du ønsker.

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

Generelle indstillinger #

Ud over deres specialiserede indstillinger deler de fleste komponenter også nedenstående standardindstillinger.

Betinget visning #

Dette gør det muligt at vise eller skjule komponenten, afhængigt af om en betingelse er opfyldt. Det benytter syntaksen fra vores Filters-system og refererer 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 tilføje specifikke CSS-regler til komponenten, hvis du har brug for justeringer, som indstillingerne ikke muliggør. CSS’en redigeres i en dedikeret kode-editor med syntaksfremhævning.

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

Skrifttyper #

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

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

Liquid-variabler #

I hvert tekstfelt har du mulighed for at tilføje data via Liquid-templating-sproget.

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

Eksemplet ovenfor vil beregne den afrundede procentsats, der spares, når et produkt er på tilbud.

Background #

Dette er en særlig komponent, som er grundlaget for ethvert design. Baggrunden er den overordnede beholder, som resten af designet indsættes i.

Ofte er baggrunden gennemsigtig, men du kan vælge en baggrundsfarve, hvis det ønskes.

Data Loop #

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

Du kan sætte en index, hvis du vil starte fra et bestemt element i listen, og du kan vælge det antal elementer, der skal vises.

Denne komponent viser elementerne i en kolonne som standard.

Grid of items #

Fungerer ligesom Data Loop, men viser elementerne i et grid-layout i stedet for én enkelt kolonne. Dette er nyttigt til at lave et Search Page eller Category Page-design, hvor produkter vises ved siden af hinanden.

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

Slider #

Viser elementer i en vandret række med slider-pile til at rulle igennem dem.

Du kan konfigurere antallet af viste elementer pr. slide baseret på skærmstørrelse samt standard-stylingen for knapperne. Der er i øjeblikket 4 knaptyper:

• Standard
• Gul
• Med kant
• Ingen baggrund (hvis du ønsker at tilpasse pile med CSS)

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

Load more button #

Primært brugt til Search Page og Category Page-designs, giver denne knap brugerne mulighed for at se flere elementer end standardantallet, du har opsat.

Dette er god praksis, da det giver mulighed for at reducere indlæsningstider ved først kun at vise få elementer og lade brugeren indlæse flere, hvis de ønsker det.

Knapteksten og antallet af elementer, der indlæses hver gang, kan tilpasses. Den indlæser så mange elementer, som den valgte Product Logic returnerer, indtil der ikke findes flere.

Box #

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

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

Du kan også styre dimensionerne af boksen samt margin og padding.

Line #

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

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

Badge #

Dette er en god måde at tilføje visuel stil til dit design og især nyttig til at fremhæve detaljer om dine produkter som f.eks. rabatter, nyheder og lignende.

Badges har en række indstillinger til at styre stil, placering, tekst og mere. De kan vises i et af de 4 hjørner af et element og enten vises som en rundet boks eller et diagonalt banner.

Button #

En simpel knap, der kan fungere som en effektiv call-to-action for besøgende. Du kan konfigurere teksten, et brugerdefineret link eller en onclick-funktion, som skal bruges, når den klikkes, samt baggrundsfarven så den matcher dit brand.

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

Image #

En visuel komponent, der viser et billede i en bestemt størrelse baseret på en attribut (f.eks et produktbillede) eller en bestemt URL.

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

Link #

Konfigurer en URL, der sender brugere videre, når komponenten eller noget inde i den bliver klikket.

Du kan vælge værdien af en attribut (f.eks. en produkt-URL), en specifik URL eller en onclick-hændelse.

Price #

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

Disse inkluderer antallet af decimaler, tusinde- og decimal-separatorer samt valutasymbolet, der kan placeres før eller efter prisen.

Text #

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

Teksten kan være baseret på statisk tekst efter eget valg eller attributdata såsom produktnavne eller sidetitler. Du kan også style teksten med klassiske formateringsmuligheder som fed, kursiv m.v.

Color variants #

Dette er en specialiseret Data Loop, der gør det muligt at vise en liste af farvekoder som farvemuligheder. De virker bedst, hvis du sender en liste af farvekoder for hvert produkt, f.eks. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Tilføjer anmeldelsesstjerner til dit design, som angiver, hvor meget køberne har kunnet lide produktet. Anmeldelser vises som 5 stjerner, hvor gennemsnittet vises som sorte stjerner.

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

De kræver følgende to attributter tilgængelige for produkterne:

• reviews_avg: Gennemsnitlig vurdering for produktet ud af 5 stjerner.
• reviews_amount: Det samlede antal anmeldelser for produktet.

Custom HTML #

Dette er en specialiseret komponent, der gør det muligt at tilføje enhver HTML-kode til dit design. Dette kan bruges til at tilføje brugerdefinerede scripts eller specialiserede blokke, der ellers ville være svære at lave med de andre komponenter.

De understøtter også brug af Liquid-variabler for adgang til 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 tilføje den til den komponent, hvor den skal vises. Du kan også bruge standard tastaturgenveje til kopiering og indsætning.

Visning af kode #

Når som helst kan du 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 omdanne dit Design Editor-design til et Code Design ved at kopiere HTML og CSS, oprette et nyt tomt Code Design og tilføje HTML og CSS til det.

Fortryd / Gentag #

Hvis du laver en fejl, kan du altid fortryde dine seneste handlinger ved at klikke på Undo-knappen eller gentage ved at bruge Redo-knappen.

Fortryd/gentag-systemet inkluderer en visuel tidslinje, der viser en liste over udførte ændringer. Du kan klikke på ethvert punkt i tidslinjen for at springe tilbage til den pågældende 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/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 at bruge musen.

Almindelige genveje inkluderer:

• Kopier en komponent
• Indsæt en komponent
• Slet en komponent
• Fortryd / Gentag ændringer
• Piletaster til at navigere komponenttræet

Publicering #

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

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