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 Ihrer Seite rendert.

• Ein Design kann mit dem visuellen Design Editor oder als HTML- & CSS-basiertes Code Design erstellt werden.
• Jedes Design hat eine eindeutige ID und eine integrierte Vorschau, sodass Sie es testen können, bevor Sie es in der Produktion verwenden.
• Elemente auf Ihrer Seite verwenden Designs über Elements. Mehrere Elements können dasselbe 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 Ihrer Seite angezeigt werden kann.
• Komponente: Ein Design, das innerhalb eines anderen Designs 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 Sie ganze Elemente (z. B. eine gemeinsame Produktkarte) in mehreren Designs wiederverwenden können.

Auf der Designs-Seite finden Sie zwei Tabs:

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

Wenn ein Design in anderen Designs verwendet wird, sehen Sie einen Hinweis wie „Wird in anderen Designs verwendet“. Wenn es mit Elements verbunden ist, sehen Sie „Wird im Element verwendet“.

Ein Design erstellen #

Wählen Sie auf der Designs-Seite Neues Design. Sie gelangen direkt in den Editor und können das Design jederzeit umbenennen. HTML- & CSS-Designs öffnen sich im Code-Editor; visuelle Designs öffnen sich im Design Editor.

Während der Bearbeitung:

• Bearbeiten Sie den Designnamen über dem Code-Editor.
• In Search-Code-Designs verwenden Sie die HTML, CSS, HTML - Mobile und CSS - Mobile Tabs über dem Editor. Unterhalb des Editors finden Sie Available Designs and Components.
• In Recommendation-Code-Designs verwenden Sie die HTML und CSS Tabs. Dieser Editor zeigt nicht Available Designs and Components an.
• Öffnen Sie Preview aus der Seitenüberschrift oder über das Aktionsmenü.
• Finden Sie Design ID im Aktionsmenü. Die Überschrift bietet zudem Zugriff auf Informationen zu Elements, die das Design verwenden.

Ein Design mit einem Element verbinden #

So zeigen Sie ein Design auf Ihrer Seite an:

1. Erstellen Sie ein Element oder öffnen Sie eines im passenden Bereich.
2. Wählen Sie das Design aus.
3. Konfigurieren Sie alle vom Design bereitgestellten Variablen (z. B. eine Überschrift) und veröffentlichen Sie.

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

Hosting-Optionen #

Designs können auf zwei Arten gehostet werden:

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

Best Practices für die Strukturierung #

• Erstellen Sie kleine, wiederverwendbare Komponenten wie eine Produktkarte oder ein Badge. Search-Code-Designs zeigen Komponenten unterhalb des Editors an. Recommendation-Code-Designs bieten diesen Komponentenbereich nicht.
• Schränken Sie Styles auf das Design oder die Komponente ein, um Seiteneffekte zu vermeiden.
• Verwenden Sie Variablen für Inhalte (z. B. Überschriften), sodass dasselbe Design mit unterschiedlichem Text in verschiedenen Elements wiederverwendet werden kann.

Nächste Schritte:

• Gestalten Sie visuell mit dem Design Editor.
• Erstellen Sie Designs mit HTML & CSS und Liquid mit Code Designs.

Designs finden #

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

• Name: Geben Sie einen beliebigen Teil des Designnamens ein
• ID: Fügen Sie die Design-ID ein oder tippen Sie sie ein
• Element: Suchen Sie nach Text oder Code innerhalb eines Designs (HTML, CSS, Liquid)

Schritte:

1. Gehen Sie zu Designs für Search / Recommendations / Email.
2. Geben Sie einen Namen, eine ID oder einen Text-/Codeausschnitt in das Suchfeld ein.
3. Die Liste wird sofort auf passende Designs gefiltert.