Design Editor

Grundlæggende #

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

Du kan oprette et vilkårligt antal designs, du ønsker, og et vilkårligt antal Indholdsblokke kan bruge det samme design.

Når du går til Designs-siden for Søgning / Anbefalinger / 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 du kan simpelthen 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 for at gøre dine designs fuldt responsive.

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

• Desktop
• Tablet
• Mobil

Layoutoversigt #

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 er generelt opført i den rækkefølge, de vises. Den eneste undtagelse er, når du bruger flydende komponenter som Badges, der kan placeres over andre komponenter.

Når du holder musen over en 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 for at åbne indstillingerne for den komponent, der viser det.

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

Komponenter #

Hvert design består af et antal byggesten, kaldet komponenter. Et design kan indeholde så mange, som du ønsker, i den rækkefølge, du ønsker.

Nye komponenter tilføjes ved at klikke på '+'-knappen i højre side af enten Baggrund-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 baseret på, om en betingelse er opfyldt. Det bruger syntaksen fra vores Filtre-system og refererer altid til item som datakilde.

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

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

Tilpasset CSS #

Dette lader dig anvende specifikke CSS-regler på komponenten, hvis du har brug for at foretage justeringer, 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 simpelthen at arve skrifttypen fra din webshop ved at vælge Brug webshop skrifttype.

Den eneste begrænsning ved dette er for Indlejrede Email Anbefalinger, 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 at oprette dynamiske tekstfelter som {{ headline }} eller tilføje beregninger baseret på produktegenskaber som: {{ 100-((item.list_price*100)/item.price) | round }} %

Det ovenstående eksempel ville beregne den afrundede procentdel, der er sparet, når et produkt er på udsalg.

Baggrund #

Dette er en speciel komponent, som er grundlaget 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.

Dataloop #

Dette giver dig mulighed for 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 egenskab som varianter eller farver.

Du kan indstille en index, hvis du vil starte fra et bestemt element i listen, der ikke er det første, og du kan vælge mængden af elementer, der skal vises.

Denne komponent vil som standard vise elementer i en kolonne.

Gitter af elementer #

Fungerer ligesom Dataloop, men viser elementer i et gitterlayout i stedet for en enkelt kolonne. Dette er nyttigt til at oprette et søgeside- eller kategorisidedesign med produkter vist ved siden af hinanden.

Du kan konfigurere mængden 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 sliderpile til at rulle gennem dem.

Du kan konfigurere mængden af elementer, der skal vises for hver slide baseret på skærmstørrelse, og den standard styling for knapperne. I øjeblikket er der 4 knaptyper:

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

Brug Knapposition til at vælge, om knapperne skal være centreret på hver side af slideren, eller vises i en af dens 4 hjørner.

Indlæs flere knap #

Bruges primært til søgeside- og kategorisidedesign, giver denne knap brugerne mulighed for at se flere elementer end den standardmængde, du har konfigureret.

Dette er god praksis, da det giver dig mulighed for at reducere indlæsningstider ved at vise en mindre mængde elementer i starten og lade brugerne se flere, hvis de ønsker det.

Knapen kan konfigureres med en tilpasset tekst og mængden af elementer, der skal indlæses hver gang, den klikkes. Den vil indlæse så mange elementer, som den valgte Produktlogik returnerer, indtil der ikke findes flere elementer.

Kasse #

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

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

Du kan også kontrollere dimensionerne af kassen samt margin og polstring.

Linje #

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

Du kan kontrollere dens farve og stil, som om den skal være solid, prikket, streg eller dobbelt.

Badge #

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

Badges har en række indstillinger til at kontrollere stil, position, tekst der skal vises og mere. De kan vises i en 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 opfordring til handling for besøgende. Den giver dig mulighed for at konfigurere teksten, der skal vises, et tilpasset link eller onclick-begivenhed, der skal bruges, når den klikkes, og baggrundsfarven, så den matcher dit brand.

onclick-begivenheden er et stykke Javascript, der skal køre, når knappen klikkes, hvilket kan bruges til tilføjelsesfunktioner til indkøbskurven, ønskelistefunktioner og anden Javascript-funktionalitet.

Billede #

En visuel komponent, der viser et billede i en specificeret størrelse baseret på en egenskab (som et produktbillede) eller en specifik 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 til at sende besøgende til, når en hvilken som helst komponent inden i den klikkes.

Du kan vælge værdien af en egenskab (som en produkt-URL), en specifik URL eller en onclick-begivenhed.

Pris #

Ofte brugt til at vise prisen på et produkt, indeholder denne komponent en række pris-specifikke konfigurationsindstillinger.

Disse inkluderer antallet af decimaler, tusinde- og decimal-separatorer og valutasymbolet, der skal vises enten før eller efter prisen.

Tekst #

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

Teksten kan være baseret på statisk tekst efter dit valg eller attributdata som produktnavne eller sidetitler. Du kan vælge at begrænse teksten til et bestemt antal tegn for at holde layouts intakte og style din tekst med klassisk formatering som fed, kursiv og mere.

Farvevarianter #

Dette er en specialiseret Dataloop, der giver dig mulighed for at loope over en liste af farvekoder og vise dem som farveindstillinger. 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, der angiver, hvor meget købere kunne lide produktet. Anmeldelser vises som 5 stjerner, med den gennemsnitlige vurdering vist som sorte stjerner.

Desuden viser det antallet af anmeldelser, som produkterne har modtaget ved siden af stjernerne.

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

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

Tilpasset 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 tilpassede scripts eller til at tilføje eventuelle specialiserede blokke, der ellers ville være svære at oprette med de andre komponenter.

De understøtter også brugen 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 fungerer både mellem forskellige designs på en enkelt butik, men du kan også kopiere komponenter mellem butikker på din konto.

Hold simpelthen musen over en komponent i dit kilde-design og klik på Kopier-knappen. Gå til dit mål-design og klik på Indsæt-knappen for at tilføje inden for 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å Vis kode-knappen. Dette vil vise dig den genererede HTML og CSS henholdsvis.

Du kan bruge dette til at konvertere dit Design Editor-design til et Kode-design ved at kopiere HTML og CSS, oprette et nyt tomt Kode-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å Fortryd-knappen eller tilføje det tilbage med Gentag-knappen. Begge findes lige under forhåndsvisningsvinduet.

Offentliggørelse #

Når du er klar til at bruge dit design, skal det offentliggøres ved at klikke på Offentliggør-knappen. Efter at have foretaget ændringer, bør du også offentliggøre dit design igen.

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