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 kontrollere udseendet og følelsen af elementerne.

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

Når du går til Designs-siden 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 Designbibliotek for at komme i gang, 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 skærmstørrelse, så dine designs bliver fuldt 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.
• Layoutoversigten, der viser alle de komponenter, som udgør designet.

Komponenter er som regel listet i den rækkefølge, de vises. 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 layoutoversigten, bliver den fremhævet i forhåndsvisningsvinduet, så du kan se, hvad du arbejder med. Ved at klikke på et element i forhåndsvisningsvinduet åbnes indstillingerne for den komponent, som viser det.

Du kan trække komponenter i layoutoversigten for at ændre deres placering.

Komponenter #

Hvert design består af et antal byggeblokke, kaldet komponenter. Et design kan indeholde så mange, du ønsker, 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 anden.

Generelle indstillinger #

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

Betinget visning #

Dette lader dig vise eller skjule komponenten, afhængigt af om en betingelse er opfyldt. Det bruger 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 mere end 100, og produktet er på lager: item.price > 100 and item.in_stock == true.

Brugerdefineret CSS #

Dette lader dig anvende specifikke CSS-regler på komponenten, hvis du skal lave tilpasninger, som indstillingerne ellers ikke tillader.

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

Skrifttyper #

Design Editor leveres med et bredt udvalg af skrifttyper, 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 for dette er ved 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 template-sproget.

Dette inkluderer at oprette dynamiske tekstfelter såsom {{ headline }} eller tilføje beregninger baseret på produktegenskaber såsom: {{ 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 grundlaget for ethvert design. Baggrunden er den overordnede beholder, 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 giver dig mulighed for at loope over en type data og vise et valgt antal. Det kan bruges til at vise produkter, kategorier eller sider, eller loope igennem en egenskab såsom varianter eller farver.

Du kan angive en index, hvis du ønsker at starte fra et bestemt element i listen i stedet for det første, og du kan vælge, hvor mange elementer der skal vises.

Denne komponent viser elementer i en kolonne som standard.

Gitter af elementer #

Fungerer ligesom Data Loop, men viser elementerne i et gitterlayout i stedet for en enkelt kolonne. Dette er nyttigt til at oprette 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 samt afstanden mellem elementerne både horisontalt og vertikalt.

Slider #

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

Du kan konfigurere, hvor mange elementer der skal vises pr. slide baseret på skærmstørrelse, og standardopsætningen for knapperne. I øjeblikket er der 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 en af dens 4 hjørner.

Load more-knap #

Anvendes især til Search Page og Category Page-designs, denne knap gør det muligt for brugere at se flere elementer end det standardantal, du har indstillet.

Dette er god praksis, fordi 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.

Knapen kan konfigureres med en tilpasset tekst og det antal elementer, der skal indlæses hver gang, der klikkes på den. Den indlæser så mange elementer, som den valgte Product Logic returnerer, indtil der ikke findes flere.

Boks #

Disse fungerer som beholdere for andre komponenter. De kan bruges til at gruppere komponenter sammen eller til at 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 boksens dimensioner samt margin og padding.

Linie #

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

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

Badge #

Dette er en god 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 og meget andet.

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

Knap #

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

onclick-eventen er et stykke Javascript, der køres, når knappen klikkes, hvilket kan bruges til “læg i kurv”-funktioner, ønskelister og anden Javascript-funktionalitet.

Billede #

En visuel komponent, der viser et billede i en angivet størrelse baseret på en egenskab (fx et produktbillede) eller en bestemt URL.

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

Link #

Konfigurer en URL, som besøgende sendes til, når en hvilken som helst komponent inde i den klikkes.

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

Pris #

Bruges oftest til at vise prisen på et produkt, denne komponent indeholder en række pris-specifikke indstillinger.

Disse inkluderer antallet af decimaler, tusinde- og decimalseparatorer samt valutasymbol, der vises enten før eller efter prisen.

Tekst #

Tilføjer tekstblokke til dit design. Disse bruges til mange forskellige formål, såsom at vise produkt- eller sidenavne, brands, beskrivelser og alle andre data, du vil repræsentere som tekst.

Teksten kan være baseret på statisk tekst efter eget valg eller attributdata som produktnavn eller sidetitler. Du kan vælge at begrænse tekst til et bestemt antal tegn for at holde layoutet intakt og formatere din tekst med klassiske formateringer som fed, kursiv m.m.

Farvevarianter #

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

Anmeldelser #

Tilføjer anmeldelsesstjerner til dit design, som indikerer, hvor meget købere kunne lide produktet. Anmeldelser vises som 5 stjerner, hvor den gennemsnitlige bedømmelse vises som sorte stjerner.

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

De kræver følgende to attributter for produkter:

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

Brugerdefineret HTML #

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

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

Kopiering af komponenter #

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

Hold blot musen over en komponent i dit kilde-design og klik på Copy-knappen. Gå til dit måldesign, og klik på Paste-knappen for at tilføje den i den komponent, hvor den skal vises.

Visning af kode #

Når som helst kan du inspicere den genererede kode for dit design ved at klikke på View code-knappen. Dette viser den genererede HTML og CSS.

Du kan bruge dette til at konvertere 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.

Fortryd / Gentag #

Hvis du laver en fejl, kan du altid fortryde dine seneste handlinger ved at klikke på Undo-knappen eller tilføje det igen med Redo-knappen. Begge findes lige under forhåndsvisningsvinduet.

Udgivelse #

Når du er klar til at bruge dit design, skal det udgives ved at klikke på Publish-knappen. Når du har foretaget ændringer, skal du også udgive dit design igen.

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