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

Du kan oprette lige så mange designs, du ønsker, og et hvilket som helst 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 Design Library 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 til 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 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å dit site.
• Layoutoversigten, der viser alle de komponenter, der udgør designet.

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

Hvis du holder musen over en hvilken som helst komponent i layoutoversigten, vil den blive fremhævet i forhåndsvisningsvinduet, så du kan se, hvad du arbejder med. Klik på et element i forhåndsvisningsvinduet åbner ligeledes indstillingerne for komponenten, der viser det.

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

Komponenter #

Hvert design består af et antal byggesten, 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 enhver anden.

Generelle indstillinger #

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

Betinget visning #

Dette lader dig vise eller skjule komponenten baseret på, 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 det, hvis prisen er over 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 har behov for tilpasninger, som indstillingerne ellers ikke tillader.

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, 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 template-sproget.

Dette inkluderer oprettelse af dynamiske tekstfelter som {{ headline }} eller tilføjelse af beregninger baseret på produktattributter 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.

Background #

Dette er en speciel komponent, som udgør basen for ethvert design. Baggrunden er den 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 loope over en type data og vise et valgt antal af dem. Dette kan bruges til at vise produkter, kategorier eller sider eller loope gennem en attribut som varianter eller farver.

Du kan sætte en index, hvis du vil starte fra et bestemt element i listen i stedet for det første, og du kan vælge antallet af elementer, der skal vises.

Denne komponent vil som standard vise elementer i en kolonne.

Grid of items #

Fungerer ligesom Data Loop, men viser elementerne i et gridlayout i stedet for én 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 samt 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 elementer, der skal vises pr. slide, baseret på skærmstørrelse, samt standardstylingen for knapperne. Der findes i øjeblikket 4 knaptyper:

• Standard
• Gul
• Med kant
• Ingen baggrund (hvis du vil tilpasse pilene 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.

Load more button #

Primært brugt til Search Page- og Category Page-designs, gør denne knap det muligt for brugere at se flere elementer end det standardantal, du har konfigureret.

Dette er god praksis, da det tillader dig at reducere indlæsningstiden ved først at vise et mindre antal elementer, og give brugerne mulighed for at se flere, hvis de ønsker det.

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

Box #

Disse fungerer som containere til andre komponenter. De kan bruges til at gruppere komponenter eller til at lave 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 box’ens dimensioner samt margin og padding.

Line #

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

Du kan styre dens farve og stil, f.eks. om den skal være solid, prikket, stippet 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 såsom rabatter, nyheder og mere.

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

Button #

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

onclick-eventen er et stykke Javascript, der køres, når knappen klikkes på, hvilket kan bruges til f.eks. tilføj til kurv, ønskeliste og anden Javascript-funktionalitet.

Image #

En visuel komponent, der viser et billede i en specificeret 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, når det klikkes på, og du kan vælge en hover-effekt, som gør billedet større, når besøgende holder musen over det.

Link #

Konfigurer en URL, som brugere sendes til, når en hvilken som helst komponent indeni den klikkes på.

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

Price #

Ofte brugt til at vise prisen på et produkt, indeholder denne komponent en række konfigurationsmuligheder, der er specifikke for priser.

Disse inkluderer antal decimaler, tusind- og decimaltegn samt valutasymbolet, der kan vises før eller efter prisen.

Text #

Tilføjer tekstblokke til dit design. De bruges til mange forskellige formål, for eksempel til at vise navnene på produkter eller sider, mærker, beskrivelser og andre data, du ønsker at vise som tekst.

Tekst kan baseres på statisk tekst, du vælger, eller attributdata som produktnavne eller sidetitler. Du kan også style tekst med klassiske formateringsmuligheder som fed, kursiv og mere.

Color variants #

Dette er en specialiseret Data Loop, der gør det muligt at loope gennem 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']

Reviews #

Tilføjer anmeldelsesstjerner til dit design, der viser, hvor meget købere synes om produktet. Anmeldelser vises som 5 stjerner, hvor gennemsnitsvurderingen vises som sorte stjerner.

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

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

• reviews_avg: Gennemsnitsvurderingen 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 til at tilføje specialiserede blokke, der ellers ville være svære at lave med de andre komponenter.

De understøtter også brug af Liquid-variabler for at få 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å én butik, men du kan også kopiere komponenter mellem butikker 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 inden i den komponent, hvor det skal vises.

Visning af kode #

Til enhver tid 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 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 igen med Redo-knappen. Begge findes lige under forhåndsvisningsvinduet.

Publicering #

Når du er klar til at bruge dit design, skal det publiceres ved at klikke på Publish-knappen. Efter ændringer skal du også publicere dit design igen.

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