Design Editor
Med vores designeditor kan du skabe indholdet til dine Clerk.io-elementer uden at kode.
Grundlæggende #
For at bruge New Design Editor skal du gå til my.clerk.io og klikke på enten [Search > Designs] eller [Recommendations > Designs] .
Klik på [New Design]
Herfra kan du vælge enten at starte med en skabelon eller med et helt tomt design:
Hvis du vælger Blank, kan du enten oprette et design i Design Editor eller direkte via kodetilstand.
Hvis du vælger at bruge skabelon, skal du vælge en af de tilgængelige startstilarter:
Klik på [Next] , giv dit design et navn, og klik derefter på [Create Design] .
Du kan nu se Design Editor som nedenfor:
Ved siden af din designtitel øverst til venstre kan du vælge at se designet og redigere stylingen specifikt til Skrivebord, mobil og tablet - stylingen vil blive brugt til hver type enhed.
Du finder også en “tree-view” sammenklappelig menu til højre, som viser alle de elementer, du har inkluderet i dit design.
Klik på et element i dit design for at gå til Ændre.
For at Slet et element skal du klikke på Papirkurv-ikon ved siden af “+”.
Hvis du vil Tilføj eller ændre et element, skal du klikke på "+", og du får tre forskellige kategorier som vist nedenfor.
Når du klikker på “+” og tilføjer, placeres elementet inde i den komponent, du vælger at tilføje fra, og bliver en del af din “tree-view”-struktur.
Vis flere #
Med Display Multiple kan du vælge forskellige muligheder for at vise dit indhold i designet (f.eks. vil Slider vise produkter på en vandret linje ved siden af hinanden, Grid data list vil vise dem i grids og så videre).
Når du vælger elementet Vis flere, skal du sørge for at klikke på det og klikke på Vælg element for at gentage Ved f.eks. at trykke på biblioteker over og derefter vælge produkt får du vist alle de produkter, der er tilgængelige i dit katalog.
Komponenter #
Fra denne menu kan du vælge nye elementer til dit design. For at Flyt placering elementet i designet skal du trække det fra menuen i højre side af træet som nedenfor:
Layout #
Layout har tre forskellige muligheder (boks, boks med to kolonner og boks med tre kolonner).
En boks kan bruges til indeholder forskellige elementer i den.
Hvis du f.eks. vil vise en overstreget pris for et produkt på udsalg og den faktiske nedsatte pris, skal du bruge en boks med to kolonner og tildele de forskellige pris-attribut til hver af kolonnerne.
Badge #
Badge-komponenten er sandsynligvis en af de bedste måder, hvorpå du kan tilføje et unikt visuelt udtryk til din webshop. Badge-komponenten indeholder forskellige underkomponenter som stil, placering, tekstboks, baggrundsfarve, padding, runde hjørner og betinget visning.
| Component | Description |
|---|---|
| Badge Style | Setting the angle of which the badge is attached onto the element (default or diagonal) |
| Badge Placement | Setting which corner of the element you want to place badge (top-left, top-right, bottom-left or bottom-right) |
| Text box | A text box which can contain any text such as “On sale” or “New”, and it also supports our template language which will be shown in an example in the next section |
| Background Color | Setting the background color in hexcode |
| Padding | Set the padding inside your badge to make space from the text to the edge |
| Round Corners | Makes either hard or soft corners based pixels |
Betinget visning #
Conditional Display giver dig mulighed for at viser kun elementer, når et bestemt kriterium er opfyldt, f.eks. når et produkt er på udsalg, eller hvis det ikke er på lager.
For at indsætte en betingelse skal du åbne et af dine elementer, som f.eks. et badge i eksemplet, og skrive din attribut eller betingelse i feltet som vist nedenfor.
Betinget visning er valgfri, så hvis du f.eks. skriver hvis efterladt tom på et badge, vil badget blive vist på alle gentagne elementer i dit design.
Når du bruger betinget visning, er syntaksen altid vare.attribut, da den kan bruges på alle datatyper: produkter, kategorier, forslag og sider.
Hvis du bruger vare.attribut, bruger du data fra de data, der aktuelt gennemløbes.
Nedenstående eksempel viser, hvordan du kan oprette en betingelse, hvis et produkt er til salg i produktkataloget. Hvis du indstiller betingelsen til at være item.on_sale=true eller vare.pris < vare.liste_pris, så vises badget eller andre komponenter som det på hvert produkt, der opfylder denne betingelse.
Hvad hvis jeg vil angive en rabatprocent for produkter inde i et badge?
Når du har indstillet betingelsen for, at et badge skal vises, når et produkt er på udsalg, kan du redigere i tekstfeltet for dette element.
Dette er blot et eksempel, hvis du vil vise rabatprocenten for et produkts før- og nu-pris:
Indsæt nedenstående eksempel i tekstboksen, og den vil vise teksten sammen med en rabatprocent for de enkelte produkter:
SAVE {{ parseInt(100-((item.price*100)/item.list_price)) }}%
Eller du kan også gøre det for at vise almindelig prisforskel:
SAVE {{ (product.list_price - product.price) | money }}
Du kan se nærmere på, hvad de forskellige formateringer gør, i vores dokumentation om skabelonsprog her.
Gem og udgiv #
Når du er færdig med dit design og er klar til at bruge det i din butik som et Clerk -indhold, skal du klikke på den blå [Publish] -knap nederst til højre.
Dit design vil nu blive gemt og udgivet sammen med dine gamle eksisterende designs under Design og er klar til at blive brugt i dit indhold.
Hvis du vil bruge det, skal du gøre som tidligere med det gamle design under Content > Edit > Select Design .
Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.