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, der 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 et unikt ID og en indbygget forhåndsvisning, så du kan teste det, før du tager det i brug.
• Elementer på dit site bruger designs via Elements. Flere Elements kan anvende det samme design.

Designs og Komponenter #

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

• Design: Et top-niveau element, der kan vælges i et Element og vises på dit site.
• Component: 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 en komponent inde i et andet design, så du kan genbruge hele dele (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.
• Components: Elementer, der er oprettet inden for 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 som ”Brugt i andre designs”. Når det er tilknyttet til Elements, vil du se ”Brugt i element”.

Oprettelse af et Design #

Fra Designs-siden vælg Nyt design. Du kommer 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.

Under redigering:

• Rediger designnavnet over kodeeditoren.
• I Search kode designs, brug HTML, CSS, HTML - Mobile og CSS - Mobile fanerne over editoren. Scroll nedenfor editoren for Available Designs and Components.
• I Recommendation kode designs, brug fanerne HTML og CSS. Denne editor viser ikke Available Designs and Components.
• Åbn Preview fra sidehovedet eller dens handlingsmenu.
• Find Design ID i handlingsmenuen. Hovedet giver også adgang til information om Elements, der bruger designet.

Tilkobling af et Design til et Element #

For at vise et design på dit site:

1. Opret eller åbn et Element under det relevante afsnit.
2. Vælg designet.
3. Konfigurer eventuelle variabler, som designet tilbyder (for eksempel en overskrift) og publicer.

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 butikker. Designs lagres og administreres i my.clerk.io og indlæses på siden via det valgte Element.
• I din kildekode: Nyttigt hvis du vedligeholder delte skabeloner på tværs af flere sites. Se Code Designs for detaljer og eksempler.

Best practice for opbygning #

• Opret små, genanvendelige komponenter som et produktkort eller et badge. Search kode designs viser komponenter under editoren. Recommendation kode designs har ikke denne komponentsektion.
• Hold stilarter begrænset til designet eller komponenten for at undgå bivirkninger.
• Brug variabler til tekst (f.eks. overskrifter), så det samme design kan genbruges med forskellig tekst i forskellige Elements.

Næste skridt:

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

Find designs #

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

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

Trin:

1. Gå til Designs for Search / Recommendations / Email.
2. Skriv et navn, et ID eller et uddrag af tekst/kode i søgefeltet.
3. Listen filtreres straks til de designs, der matcher.