Overview

Hvad er et design? #

Et design er den visuelle repræsentation af et Clerk-element såsom Search, Recommendations eller Email. Det definerer HTML og CSS, som gengiver elementet på dit website.

• Et design kan oprettes med den visuelle Design Editor eller som et HTML & CSS baseret Code Design.
• Hvert design har en unik ID og en indbygget forhåndsvisning, så du kan teste det, før du bruger det i produktionen.
• Elementer på dit website bruger designs via Elements. Flere Elements kan bruge det samme design.

Designs og komponenter #

Designs er sammensat af et hoveddesign-blok og/eller mindre dele kaldet komponenter.

• Design: En øverste element, som kan vælges i et Element og vises på dit website.
• Komponent: Et design, der oprettes eller tilføjes inde i et andet design. Komponenter er byggesten og kan ikke vælges direkte i Elements.
• Sub-designs: Ethvert design kan bruges som komponent inde i et andet design, så du kan genbruge hele stykker (for eksempel et delt produktkort) på tværs af flere designs.

På Designs-siden finder du to faner:

• Designs: Elementer, der kan bruges i Elements.
• Komponenter: Elementer oprettet inde fra andre designs til genbrug. Disse kan ikke bruges direkte i Elements.

Når et design bruges inde i andre designs, vil du se en indikator såsom “Bruges i andre designs”. Når det er tilknyttet Elements, vil du se “Bruges i element”.

Oprettelse af et design #

Fra Designs-siden vælger du Nyt design. Du går direkte ind i editoren og kan omdøbe designet når som helst. HTML & CSS designs åbner i kodeeditoren; visuelle designs åbner i Design Editor.

Mens du redigerer:

• Brug sidepanelet til højre til at tilføje eksisterende designs som komponenter for at sammensætte større layouts.
• Administrér HTML og CSS for code designs i separate paneler.
• Forhåndsvis resultatet og noter designets ID til brug i Elements.

Tilknytning af et design til et element #

For at vise et design på dit website:

1. Opret eller åbn et Element under den relevante sektion.
2. Vælg designet.
3. Konfigurér eventuelle variabler, som designet eksponerer (for eksempel en overskrift) og publicér.

Fordi flere Elements kan pege på det samme design, vil ændringer i et delt design påvirke alle Elements, der bruger det, når designet er publiceret.

Hosting-muligheder #

Designs kan hostes på to måder:

• I Clerk: Den anbefalede opsætning for de fleste shops. Designs gemmes og administreres i my.clerk.io og tilføres ved sideindlæsning via det valgte Element.
• I din kildekode: Nyttigt hvis du vedligeholder delte templates på tværs af flere sites. Se Code Designs for detaljer og eksempler.

Best practices for sammensætning #

• Opret små, genanvendelige komponenter såsom et produktkort eller badge, og inkluder dem som sub-designs i Search og Recommendations.
• Hold styles afgrænset til designet eller komponenten for at undgå sideeffekter.
• Brug variabler til tekst (f.eks. overskrifter), så det samme design kan genbruges med forskellig tekst på tværs af Elements.

Næste skridt:

• Byg visuelt med Design Editor.
• Byg med HTML & CSS og Liquid med Code Designs.

Find designs #

Brug søgefeltet på Designs-siden for hurtigt at finde et design.

• Navn: Skriv en del af designets navn
• ID: Indsæt eller skriv designets ID
• Element: Søg efter tekst eller kode inde i et design (HTML, CSS, Liquid)

Trin:

1. Gå til Designs for Search / Recommendations / Email.
2. Skriv et navn, et ID eller et tekst-/kodeudsnit i søgefeltet.
3. Listen filtreres straks til matchende designs.