Design Editor

Grundlagen #

Wenn Sie mit Content arbeiten, um Clerk.io-Elemente zu Ihrer Website hinzuzufügen, kann der Design-Editor verwendet werden, um das Aussehen und Verhalten der Elemente zu steuern.

Sie können beliebig viele Designs erstellen, und beliebig viele Content-Blöcke können das gleiche Design verwenden.

Wenn Sie auf die Seite Designs für Search / Recommendations / Email gehen, sehen Sie eine Liste all Ihrer Designs, einschließlich ihrer IDs.

Wenn Sie ein neues Design erstellen, können Sie eine Startvorlage aus unserer Design-Bibliothek auswählen oder einfach von Grund auf neu beginnen.

Bildschirmgrößen #

Rechts oben auf dem Bildschirm können Sie Ihre Designs für verschiedene Bildschirmgrößen in der Vorschau anzeigen. Viele der Komponenten unterstützen zudem eine individuelle Gestaltung für jede dieser Bildschirmgrößen, um Ihre Designs vollständig responsiv zu machen.

Sie können Styling für die folgenden Bildschirmgrößen hinzufügen:

• Desktop
• Tablet
• Mobilgerät

Layout-Übersicht #

Der Design-Editor selbst besteht aus:

• Einem Vorschaufenster, das das Design so anzeigt, wie es auf Ihrer Website aussehen wird.
• Der Komponentenübersicht, die alle Komponenten auflistet, aus denen das Design besteht.

Komponenten werden in der Regel in der Reihenfolge aufgelistet, in der sie angezeigt werden. Die einzige Ausnahme ist, wenn Sie schwebende Komponenten wie Badges verwenden, die über anderen Komponenten platziert werden können.

Das Überfahren einer Komponente im Komponentenbaum hebt sie im Vorschaufenster hervor, sodass Sie sehen, womit Sie arbeiten. Wenn Sie auf ein Element im Vorschaufenster klicken, wird die entsprechende Komponente ausgewählt und ihre Einstellungen geöffnet.

Sie können Komponenten per Drag & Drop im Komponentenbaum umsortieren oder in verschiedene übergeordnete Komponenten verschieben. Visuelle Indikatoren zeigen genau an, wo eine Komponente abgelegt wird, wenn Sie sie loslassen.

Der Komponentenbaum unterstützt auch die Tastaturnavigation. Verwenden Sie die Pfeiltasten, um zwischen Komponenten zu wechseln, und nutzen Sie Tastenkürzel für gängige Aktionen wie Kopieren, Einfügen und Löschen von Komponenten.

Komponenten #

Jedes Design besteht aus einer Anzahl von Bausteinen, den sogenannten Komponenten. Ein Design kann beliebig viele Komponenten enthalten, in beliebiger Reihenfolge.

Neue Komponenten werden durch Klicken auf die '+' Schaltfläche auf der rechten Seite entweder der Background-Komponente oder einer anderen hinzugefügt. Ein Komponenten-Picker öffnet sich, in dem Sie per Name nach einem bestimmten Komponententyp suchen können.

Allgemeine Einstellungen #

Neben ihren spezialisierten Einstellungen teilen die meisten Komponenten auch die nachfolgenden Standardeinstellungen.

Bedingte Anzeige #

Hiermit können Sie die Komponente anzeigen oder ausblenden, basierend darauf, ob eine Bedingung erfüllt ist. Es wird die Syntax unseres Filters-Systems verwendet und stets auf die Datenquelle item verwiesen.

Ein Beispiel könnte sein, eine Komponente nur anzuzeigen, wenn ein Produkt im Angebot ist: item.on_sale == true.

Oder sie nur anzuzeigen, wenn der Preis über 100 liegt und das Produkt auf Lager ist: item.price > 100 and item.in_stock == true.

Benutzerdefiniertes CSS #

Hiermit können Sie spezifische CSS-Regeln auf die Komponente anwenden, falls Anpassungen erforderlich sind, die mit den Einstellungen sonst nicht möglich sind. Die CSS-Regeln werden in einem eigenen Code-Editor mit Syntaxhervorhebung bearbeitet.

Die hinzugefügten CSS-Regeln beeinflussen nur die jeweilige Komponente.

Schriftarten #

Der Design-Editor enthält eine Vielzahl von Schriftarten, die Sie verwenden können. Außerdem können Sie einfach die Schriftart Ihres Webshops erben, indem Sie Use webshop font. auswählen.

Einzige Ausnahme sind Embedded Email Recommendations, bei denen Sie eine Schriftart auswählen müssen, da diese keinen Zugriff auf die Schriftarten Ihres Webshops haben.

Liquid-Variablen #

In jedem Textfeld können Sie Daten über die Liquid-Templating-Sprache hinzufügen.

Dies umfasst das Erstellen dynamischer Textfelder wie {{ headline }} oder das Hinzufügen von Berechnungen basierend auf Produktattributen, wie zum Beispiel: {{ 100-((item.list_price*100)/item.price) | round }} %

Das obige Beispiel würde den gerundeten Prozentsatz berechnen, der beim Kauf eines reduzierten Produkts gespart wird.

Hintergrund #

Dies ist eine spezielle Komponente und bildet die Basis jedes Designs. Der Hintergrund ist der gesamte Container, in den der Rest des Designs eingefügt wird.

In der Regel ist der Hintergrund transparent, aber bei Bedarf können Sie eine Hintergrundfarbe auswählen.

Daten-Loop #

Dies ermöglicht Ihnen, über einen Datentyp zu iterieren und eine ausgewählte Anzahl davon anzuzeigen. Dies kann zur Anzeige von Produkten, Kategorien oder Seiten verwendet werden oder, um beispielsweise durch ein Attribut wie Varianten oder Farben zu iterieren.

Sie können einen index festlegen, wenn Sie nicht beim ersten Element in der Liste starten möchten, und Sie können die Anzahl der anzuzeigenden Elemente wählen.

Diese Komponente zeigt Elemente standardmäßig in einer Spalte an.

Raster von Elementen #

Funktioniert genauso wie der Data Loop, zeigt Elemente jedoch in einem Rasterlayout statt in einer einzelnen Spalte an. Dies ist nützlich, um ein Search Page- oder Category Page-Design mit nebeneinander angezeigten Produkten zu erstellen.

Sie können die Anzahl der Spalten je nach Bildschirmgröße und den Abstand sowohl horizontal als auch vertikal konfigurieren.

Slider #

Zeigt Elemente in einer horizontalen Reihe mit Slider-Pfeilen zum Durchblättern an.

Sie können konfigurieren, wie viele Elemente pro Slide angezeigt werden sollen, abhängig von der Bildschirmgröße sowie die Standardgestaltung der Schaltflächen. Zurzeit gibt es 4 Schaltflächentypen:

• Standard
• Gelb
• Umrandet
• Kein Hintergrund (wenn Sie die Pfeile mit CSS gestalten möchten)

Mit Button position können Sie wählen, ob Schaltflächen zentriert an beiden Seiten des Sliders oder in einer der 4 Ecken angezeigt werden sollen.

Load More-Schaltfläche #

Hauptsächlich für Search Page- und Category Page-Designs verwendet, ermöglicht diese Schaltfläche den Nutzern, mehr Elemente zu sehen als die von Ihnen voreingestellte Standardanzahl.

Dies ist gängige Praxis, da Sie dadurch die Ladezeit verringern, indem anfänglich weniger Elemente angezeigt werden und die Nutzer bei Bedarf mehr laden können.

Die Schaltfläche kann mit einem individuellen Text und der Anzahl der pro Klick zu ladenden Elemente konfiguriert werden. Es werden so viele Elemente geladen, wie die gewählte Product Logic zurückgibt, bis keine weiteren Elemente gefunden werden.

Box #

Dient als Container für andere Komponenten. Sie können verwendet werden, um Komponenten zu gruppieren oder ein Layout mit mehreren Spalten zu erstellen.

Sie können mit einer Hintergrundfarbe und einem Layout konfiguriert werden, das auf dem CSS-Layoutsystem flexbox basiert.

Außerdem können Sie die Dimensionen der Box sowie deren Margin und Padding steuern.

Linie #

Eine einfache Trennlinie, die zur optischen Abgrenzung von Komponenten dient.

Sie können ihre Farbe und ihren Stil steuern, z.B. ob sie durchgezogen, gepunktet, gestrichelt oder doppelt sein soll.

Badge #

Eine ausgezeichnete Möglichkeit, Ihrem Design einen visuellen Stil zu verleihen, und besonders nützlich, um Details zu Ihren Produkten wie Rabatte, Neuheiten und mehr hervorzuheben.

Badges bieten viele Einstellungen, um Stil, Position, anzuzeigenden Text und mehr zu steuern. Sie können in einer der vier Ecken eines Elements und entweder als abgerundetes Feld oder diagonales Banner angezeigt werden.

Button #

Eine einfache Schaltfläche, die als effektiver Call-to-Action für Besucher dienen kann. Sie können den anzuzeigenden Text, einen individuellen Link oder ein onclick-Ereignis konfigurieren, das beim Klick ausgeführt wird, sowie die Hintergrundfarbe passend zu Ihrer Marke.

Das onclick-Ereignis ist ein Stück Javascript, das beim Klicken auf die Schaltfläche ausgeführt wird und zum Beispiel für “In den Warenkorb”-Funktionen, Wunschlisten oder andere Javascript-Funktionalitäten verwendet werden kann.

Bild #

Eine visuelle Komponente, die ein Bild in einer bestimmten Größe basierend auf einem Attribut (wie einem Produktbild) oder einer bestimmten URL anzeigt.

Sie können dem Bild einen einzigartigen Link hinzufügen, z.B. um Kunden durch Klick auf das Produktbild zur Produktseite zu führen, und Sie können einen Hover-Effekt wählen, z.B. das Bild beim Überfahren mit der Maus vergrößern.

Link #

Konfigurieren Sie eine URL, zu der Besucher weitergeleitet werden, wenn auf eine beliebige Komponente darin geklickt wird.

Sie können den Wert eines Attributs (wie eine Produkt-URL), eine bestimmte URL oder ein onclick-Ereignis wählen.

Preis #

Wird meist verwendet, um den Preis eines Produkts anzuzeigen. Diese Komponente enthält eine Reihe preisspezifischer Einstellungen.

Dazu gehören die Anzahl der Dezimalstellen, Tausender- und Dezimal-Trennzeichen sowie das Währungssymbol, das entweder vor oder nach dem Preis angezeigt wird.

Text #

Fügt Textblöcke zu Ihrem Design hinzu. Diese werden für viele verschiedene Zwecke verwendet, wie das Anzeigen der Namen von Produkten oder Seiten, Marken, Beschreibungen und aller anderen Daten, die Sie als Text darstellen möchten.

Text kann auf statischem Text Ihrer Wahl basieren oder auf Attributdaten wie Produktnamen oder Seitentiteln. Sie können Text zudem mit klassischen Formatierungsoptionen wie Fett, Kursiv und mehr gestalten.

Farbvarianten #

Dies ist eine spezialisierte Data Loop, mit der Sie eine Liste von Farbcodes durchlaufen und diese als Farbauswahl anzeigen können. Am besten funktioniert das, wenn Sie für jedes Produkt eine Liste von Farbcodes senden, z.B. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Bewertungen #

Fügt Bewertungssterne zu Ihrem Design hinzu, die anzeigen, wie sehr Käufer das Produkt mögen. Die Bewertungen werden als 5 Sterne angezeigt, wobei die durchschnittliche Bewertung als schwarze Sterne dargestellt wird.

Außerdem wird die Anzahl der abgegebenen Bewertungen neben den Sternen angezeigt.

Dafür sind folgende zwei Attribute für Produkte erforderlich:

• reviews_avg: Die durchschnittliche Bewertung des Produkts (bis zu 5 Sterne).
• reviews_amount: Die Gesamtanzahl der Bewertungen für das Produkt.

Benutzerdefiniertes HTML #

Eine spezialisierte Komponente, mit der Sie beliebigen HTML-Code zu Ihrem Design hinzufügen können. Dies kann für die Integration eigener Skripte oder zum Hinzufügen spezialisierter Blöcke verwendet werden, die mit den anderen Komponenten schwer umsetzbar wären.

Sie unterstützen auch die Verwendung von Liquid-Variablen, um auf Datenobjekte wie Produkte, Kategorien und Seiten zuzugreifen und mit ihnen zu arbeiten.

Komponenten kopieren #

Wenn Sie Komponenten aus einem anderen Design wiederverwenden möchten, können Sie sie zwischen Designs kopieren. Das funktioniert sowohl zwischen verschiedenen Designs in einem Store als auch zwischen Stores in Ihrem Konto.

Fahren Sie mit der Maus über eine Komponente im Komponentenbaum und klicken Sie auf die Copy-Schaltfläche oder nutzen Sie die Tastenkombination. Wechseln Sie zu Ihrem gewünschten Design und klicken Sie auf die Paste-Schaltfläche, um die Komponente an der gewünschten Stelle einzufügen. Sie können auch die Standard-Tastenkombinationen für Kopieren und Einfügen verwenden.

Codeansicht #

Sie können jederzeit den generierten Code Ihres Designs einsehen, indem Sie auf die View code-Schaltfläche klicken. Dies öffnet einen Quelltext-Viewer mit Syntaxhervorhebung, der das generierte HTML und CSS Ihres Designs anzeigt.

Sie können dies nutzen, um Ihr Design-Editor-Design in ein Code-Design zu konvertieren, indem Sie das HTML und CSS kopieren, ein neues leeres Code-Design erstellen und den Code einfügen.

Rückgängig/Wiederherstellen #

Falls Ihnen ein Fehler unterläuft, können Sie Ihre letzten Aktionen jederzeit mit der Undo-Schaltfläche rückgängig machen oder mit der Redo-Schaltfläche wiederherstellen.

Das Rückgängig/Wiederherstellungssystem enthält eine visuelle Zeitleiste, die alle Ihre getätigten Änderungen auflistet. Sie können jeden beliebigen Zeitpunkt in der Zeitleiste anklicken, um zu einem bestimmten Stand zurückzuspringen. So lässt sich Ihre Bearbeitungshistorie einfach nachvollziehen und navigieren.

Dark Mode #

Der Design-Editor unterstützt ein Dark Mode-Theme. Sie können diesen über die Editor-Toolbar aktivieren, um zwischen heller und dunkler Ansicht zu wechseln.

Tastenkombinationen #

Der Design-Editor unterstützt Tastenkombinationen für gängige Aktionen. Damit können Sie schneller arbeiten, ohne die Maus verwenden zu müssen.

Häufige Tastenkürzel sind:

• Komponente kopieren
• Komponente einfügen
• Komponente löschen
• Änderungen rückgängig/wiederherstellen
• Pfeiltasten zur Navigation im Komponentenbaum

Veröffentlichung #

Wenn Ihr Design einsatzbereit ist, muss es veröffentlicht werden. Klicken Sie dazu auf die Publish-Schaltfläche in der Editor-Toolbar. Nach Änderungen sollten Sie Ihr Design erneut veröffentlichen.

Sie können dann entweder den Design-Editor verlassen oder bleiben und weitere Änderungen vornehmen.