Overview

Was ist ein Design? #

Ein Design ist die visuelle Darstellung eines Clerk-Elements wie Search, Recommendations oder Email. Es definiert das HTML und CSS, das das Element auf deiner Website darstellt.

• Ein Design kann mit dem visuellen Design Editor oder als HTML- & CSS-basierter Code Design erstellt werden.
• Jedes Design hat eine eindeutige ID und eine integrierte Vorschau, damit du es vor der Nutzung im Live-Betrieb testen kannst.
• Elemente auf deiner Website verwenden Designs über Elements. Mehrere Elements können das gleiche Design verwenden.

Designs und Komponenten #

Designs bestehen aus einem Haupt-Designblock und/oder kleineren Teilen, sogenannten Komponenten.

• Design: Ein Element auf oberster Ebene, das in einem Element ausgewählt und auf deiner Website angezeigt werden kann.
• Komponente: Ein Design, das in einem anderen Design erstellt oder hinzugefügt wird. Komponenten sind Bausteine und können nicht direkt in Elements ausgewählt werden.
• Sub-Designs: Jedes Design kann als Komponente in einem anderen Design verwendet werden, sodass du ganze Bereiche (z. B. eine gemeinsame Produktkarte) in mehreren Designs wiederverwenden kannst.

Auf der Designs-Seite findest du zwei Tabs:

• Designs: Elemente, die in Elements verwendet werden können.
• Komponenten: Elemente, die innerhalb anderer Designs für die Wiederverwendung erstellt wurden. Diese können nicht direkt in Elements verwendet werden.

Wenn ein Design in anderen Designs verwendet wird, siehst du einen Hinweis wie „In anderen Designs verwendet“. Wenn es mit Elements verbunden ist, siehst du „Im Element verwendet“.

Ein Design erstellen #

Wähle auf der Designs-Seite „Neues Design“. Du gelangst direkt in den Editor und kannst das Design jederzeit umbenennen. HTML & CSS-Designs öffnen sich im Code-Editor; visuelle Designs im Design Editor.

Während der Bearbeitung:

• Nutze die rechte Seitenleiste, um vorhandene Designs als Komponenten hinzuzufügen und größere Layouts zu erstellen.
• Verwalte HTML und CSS für Code Designs in separaten Fenstern.
• Sieh dir das Ergebnis in der Vorschau an und notiere dir die Design-ID zur Verwendung in Elements.

Ein Design mit einem Element verbinden #

So zeigst du ein Design auf deiner Website an:

1. Erstelle oder öffne ein Element im entsprechenden Bereich.
2. Wähle das Design aus.
3. Konfiguriere ggf. Variablen, die das Design bereitstellt (z. B. eine Überschrift), und veröffentliche es.

Da mehrere Elements auf dasselbe Design verweisen können, wirken sich Änderungen an einem geteilten Design auf alle Elements aus, die es nach der Veröffentlichung verwenden.

Hosting-Optionen #

Designs können auf zwei Arten gehostet werden:

• In Clerk: Die empfohlene Einrichtung für die meisten Shops. Designs werden in my.clerk.io gespeichert und verwaltet und beim Laden der Seite über das ausgewählte Element eingebunden.
• Im eigenen Quellcode: Nützlich, wenn du gemeinsame Templates über mehrere Websites hinweg verwendest. Siehe Code Designs für Details und Beispiele.

Best Practices für die Komposition #

• Erstelle kleine, wiederverwendbare Komponenten wie eine Produktkarte oder ein Badge und binde sie als Sub-Designs in Search und Recommendations ein.
• Begrenze die Styles auf das jeweilige Design oder die Komponente, um Nebenwirkungen zu vermeiden.
• Verwende Variablen für Texte (z. B. Überschriften), damit dasselbe Design mit unterschiedlichen Texten in Elements wiederverwendet werden kann.

Nächste Schritte:

• Baue visuell mit dem Design Editor.
• Baue mit HTML & CSS und Liquid unter Verwendung von Code Designs.

Designs finden #

Verwende das Suchfeld auf der Designs-Seite, um schnell ein Design zu finden.

• Name: Gib einen Teil des Designnamens ein
• ID: Füge die Design-ID ein oder tippe sie
• Element: Suche nach Text oder Code innerhalb eines Designs (HTML, CSS, Liquid)

Schritte:

1. Gehe zu Designs für Search / Recommendations / Email.
2. Gib einen Namen, eine ID oder einen Text-/Code-Schnipsel ins Suchfeld ein.
3. Die Liste filtert sofort zu passenden Designs.