Design Editor

Grundlagen #

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

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

Wenn Sie zur Designs Seite 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 zur schnellen Einrichtung eine Vorlage aus unserer Design Library auswählen oder einfach von Grund auf neu beginnen.

Bildschirmgrößen #

Oben rechts auf dem Bildschirm können Sie Ihre Designs in verschiedenen Bildschirmgrößen anzeigen. Viele der Komponenten unterstützen auch die individuelle Gestaltung für jeden dieser Bildschirmgrößen, damit Ihre Designs vollständig responsiv sind.

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

• Desktop
• Tablet
• Mobil

Layout-Übersicht #

Der Design Editor selbst besteht aus:

• Einem Vorschaubereich, der das Design so zeigt, wie es auf Ihrer Seite aussieht.
• Der Layout-Übersicht, die alle Komponenten auflistet, aus denen das Design besteht.

Komponenten sind in der Regel in der Reihenfolge gelistet, in der sie angezeigt werden. Die einzige Ausnahme sind schwebende Komponenten wie Badges, die über anderen Komponenten platziert werden können.

Wenn Sie mit der Maus über eine Komponente in der Layout-Übersicht fahren, wird sie im Vorschaubereich hervorgehoben, sodass Sie sehen können, womit Sie arbeiten. Wenn Sie ein Element im Vorschaubereich anklicken, werden die Einstellungen für die Komponente geöffnet, die es anzeigt.

Sie können Komponenten ziehen in der Layout-Übersicht, um ihre Position zu ändern.

Komponenten #

Jedes Design besteht aus mehreren Bausteinen, den sogenannten Komponenten. Ein Design kann beliebig viele Komponenten enthalten und in jeder gewünschten Reihenfolge angeordnet werden.

Neue Komponenten werden hinzugefügt, indem Sie auf die '+' Schaltfläche rechts neben entweder der Background Komponente oder einer beliebigen anderen klicken.

Allgemeine Einstellungen #

Zusätzlich zu ihren speziellen Einstellungen teilen die meisten Komponenten auch die unten stehenden Standard-Einstellungen.

Bedingte Anzeige #

Damit können Sie eine Komponente anzeigen oder ausblenden, je nachdem, ob eine Bedingung erfüllt ist. Es wird die Syntax unseres Filters-Systems verwendet und immer item als Datenquelle referenziert.

Ein Beispiel wäre, eine Komponente nur anzuzeigen, wenn ein Produkt im Angebot ist: item.on_sale == true.

Oder nur anzeigen, wenn der Preis mehr als 100 beträgt und das Produkt auf Lager ist: item.price > 100 and item.in_stock == true.

Benutzerdefiniertes CSS #

Damit können Sie der Komponente spezifische CSS-Regeln zuweisen, falls Sie Anpassungen vornehmen müssen, die sich nicht über die Einstellungen abdecken lassen.

Die hinzugefügten CSS-Regeln wirken sich nur auf die jeweilige Komponente aus.

Schriftarten #

Der Design Editor enthält eine große Auswahl an Schriftarten, die Sie verwenden können. Zusätzlich können Sie auch einfach die Schriftart Ihres Webshops übernehmen, indem Sie Use webshop font. auswählen.

Die einzige Einschränkung gilt für Embedded Email Recommendations, bei denen Sie eine Schriftart auswählen müssen, da sie keinen Zugriff auf die Schriftarten Ihres Webshops haben.

Liquid-Variablen #

In jedem Textfeld haben Sie die Möglichkeit, Daten über die Liquid-Template-Sprache einzufügen.

Dazu gehört das Erstellen dynamischer Textfelder wie {{ headline }} oder das Hinzufügen von Berechnungen basierend auf Produktattributen wie: {{ 100-((item.list_price*100)/item.price) | round }} %

Das obige Beispiel würde den gerundeten Prozentsatz berechnen, der eingespart wird, wenn ein Produkt im Angebot ist.

Hintergrund #

Dies ist eine spezielle Komponente und bildet die Grundlage jedes Designs. Der Hintergrund ist der übergeordnete Container, in den das restliche Design eingefügt wird.

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

Daten-Loop #

Damit können Sie über einen Datentyp iterieren und eine gewählte Anzahl davon anzeigen. Dies kann verwendet werden, um Produkte, Kategorien oder Seiten anzuzeigen oder durch ein Attribut wie Varianten oder Farben zu iterieren.

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

Standardmäßig zeigt diese Komponente Elemente in einer Spalte an.

Grid von Elementen #

Funktioniert wie der Daten-Loop, zeigt die Elemente jedoch in einem Rasterlayout statt in einer einzelnen Spalte an. Das ist praktisch, um ein Search Page oder Kategorie-Seiten-Design mit nebeneinander dargestellten Produkten zu erstellen.

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

Slider #

Zeigt Elemente in einer horizontalen Reihe mit Pfeilen zum Durchscrollen an.

Sie können die Anzahl der pro Slide angezeigten Elemente abhängig von der Bildschirmgröße sowie das Standard-Button-Styling konfigurieren. Es gibt derzeit 4 Button-Varianten:

• Standard
• Gelb
• Gerahmt
• Kein Hintergrund (wenn Sie die Pfeile per CSS anpassen möchten)

Verwenden Sie Button position, um auszuwählen, ob die Navigations-Buttons mittig auf beiden Seiten des Sliders stehen oder in einer der 4 Ecken platziert werden.

“Mehr laden”-Button #

Vor allem für Search Page und Kategorie-Seiten-Designs verwendet, ermöglicht dieser Button es den Nutzern, mehr Artikel als die von Ihnen standardmäßig konfigurierte Anzahl anzuzeigen.

Dies ist eine gute Praxis, da dadurch zunächst weniger Produkte geladen werden und Nutzer bei Interesse mehr anzeigen lassen können.

Der Button kann mit einem eigenen Text konfiguriert werden sowie der Anzahl der Produkte, die bei jedem Klick geladen werden. Es werden so lange weitere Artikel nachgeladen, wie die gewählte Product Logic Produkte zurückliefert.

Box #

Diese dienen 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 auf Basis des flexbox-CSS-Systems konfiguriert werden.

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

Linie #

Eine einfache Trennlinie, um Komponenten optisch voneinander zu trennen.

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

Badge #

Dies ist eine hervorragende Möglichkeit, Ihrem Design einen visuellen Stil zu verleihen – besonders praktisch, um Details wie Rabatte, Neuheiten und mehr zu promoten.

Badges bieten zahlreiche Einstellungsmöglichkeiten für Stil, Position, anzuzeigenden Text usw. Sie können in einer der vier Ecken eines Elements erscheinen und entweder als abgerundetes Feld oder als diagonales Banner dargestellt werden.

Button #

Ein einfacher Button, der als wirkungsstarker “Call to Action” für Besucher fungieren kann. Sie können den anzuzeigenden Text, einen benutzerdefinierten Link oder ein onclick-Event beim Klicken konfigurieren und die Hintergrundfarbe an Ihre Marke anpassen.

Das onclick-Event ist ein Javascript, das ausgeführt wird, wenn der Button angeklickt wird. Es kann für “In den Warenkorb”-Funktionen, Wunschliste und andere Javascript-Logiken verwendet werden.

Bild #

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

Sie können einen individuellen Link zum Bild hinzufügen, z. B. um den Kunden auf die Produktseite zu leiten, wenn er das Bild anklickt. Sie können außerdem einen Hovereffekt einstellen, z. B. dass das Bild beim Mouseover größer wird.

Link #

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

Sie können den Wert eines Attributs (z. B. Produkt-URL), eine spezifische URL oder ein onclick-Event wählen.

Preis #

Wird meistens verwendet, um den Preis eines Produkts anzuzeigen. Diese Komponente enthält eine Reihe spezifischer Einstellungsmöglichkeiten für Preise.

Dazu gehören die Anzahl der Nachkommastellen, Tausender- und Dezimaltrennzeichen sowie das Währungssymbol, das vor oder nach dem Preis angezeigt werden kann.

Text #

Fügt Textblöcke zu Ihrem Design hinzu. Diese werden für verschiedene Zwecke verwendet, z. B. zur Anzeige von Produkt- oder Seitennamen, Marken, Beschreibungen und beliebigen anderen Daten, die Sie als Text darstellen möchten.

Text kann auf statischem Freitext oder Attributdaten wie Produktnamen oder Seitentiteln basieren. Außerdem können Sie Text mit Formatierungsoptionen wie Fett, Kursiv usw. gestalten.

Farbvarianten #

Das ist ein spezialisierter Daten-Loop, mit dem Sie über eine Liste von Farbcodes iterieren und diese als Farboptionen anzeigen können. Am besten funktioniert das, wenn Sie für jedes Produkt eine Liste von Farben übermitteln, z. B. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Fügt Bewertungssterne zu Ihrem Design hinzu, die zeigen, wie gut Käufern das Produkt gefallen hat. Die Bewertungen werden als 5 Sterne dargestellt, wobei der Durchschnitt als schwarze Sterne angezeigt wird.

Außerdem wird die Anzahl der Bewertungen, die das Produkt erhalten hat, neben den Sternen angezeigt.

Dafür werden folgende zwei Attribute für die Produkte benötigt:

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

Benutzerdefiniertes HTML #

Dies ist eine spezialisierte Komponente, mit der Sie beliebigen HTML-Code in Ihr Design einfügen können. Dies eignet sich für individuelle Skripte oder spezielle Blöcke, die mit den anderen Komponenten schwer umzusetzen wären.

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

Komponenten kopieren #

Wenn Sie Komponenten aus einem anderen Design wiederverwenden möchten, können Sie diese zwischen Designs kopieren. Dies funktioniert sowohl zwischen Designs innerhalb eines einzelnen Stores als auch zwischen Stores in Ihrem Account.

Fahren Sie einfach mit der Maus über die gewünschte Komponente im Quell-Design und klicken Sie auf den Copy-Button. Gehen Sie zum Ziel-Design und klicken Sie auf den Paste-Button, um die Komponente einzufügen.

Code anzeigen #

Sie können jederzeit den generierten Code Ihres Designs einsehen, indem Sie auf den View code-Button klicken. Sie sehen dann das jeweilige HTML und CSS.

Das können Sie verwenden, um Ihr Design Editor Design in ein Code Design umzuwandeln, indem Sie das HTML und das CSS kopieren, ein neues, leeres Code Design erstellen und den Code einfügen.

Rückgängig / Wiederherstellen #

Wenn Ihnen ein Fehler unterläuft, können Sie Ihre letzten Aktionen immer mit dem Undo-Button rückgängig machen oder mit dem Redo-Button wiederherstellen. Beide befinden sich direkt unter dem Vorschaubereich.

Veröffentlichen #

Wenn Ihr Design einsatzbereit ist, muss es durch Klick auf den Publish-Button veröffentlicht werden. Nach Änderungen sollten Sie Ihr Design ebenfalls erneut veröffentlichen.

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