Design Editor

Grundlagen #

Wenn du mit Content arbeitest, um Clerk.io-Elemente zu deiner Seite hinzuzufügen, kannst du mit dem Design Editor das Aussehen der Elemente steuern.

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

Wenn du auf die Designs Seite für Search / Recommendations / Email gehst, siehst du eine Liste all deiner Designs, einschließlich ihrer IDs.

Wenn du ein neues Design erstellst, kannst du eine Startvorlage aus unserer Design Library auswählen oder einfach von Grund auf neu beginnen.

Bildschirmgrößen #

Oben rechts auf dem Bildschirm kannst du deine Designs für verschiedene Bildschirmgrößen in der Vorschau ansehen. Viele der Komponenten unterstützen auch eine individuelle Gestaltung für jede dieser Bildschirmgrößen, sodass deine Designs vollständig responsiv werden.

Du kannst Styling für folgende Bildschirmgrößen hinzufügen:

• Desktop
• Tablet
• Mobile

Layout-Übersicht #

Der Design Editor selbst besteht aus:

• Einem Vorschaubildschirm, der das Design so zeigt, wie es auf deiner Website aussehen wird.
• Der Layout-Übersicht, die alle Komponenten des Designs auflistet.

Komponenten werden in der Regel in der Reihenfolge aufgelistet, in der sie angezeigt werden. Die einzige Ausnahme ist, wenn du schwebende Komponenten wie Badges verwendest, die über andere Komponenten gelegt werden können.

Wenn du mit der Maus über eine beliebige Komponente in der Layout-Übersicht fährst, wird sie im Vorschaubildschirm hervorgehoben, sodass du sie sofort erkennst. Durch Klicken auf ein Element in der Vorschau öffnest du die Einstellungen für die entsprechende Komponente.

Du kannst Komponenten in der Layout-Übersicht ziehen, um ihre Position zu ändern.

Komponenten #

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

Neue Komponenten werden hinzugefügt, indem du auf die '+' Schaltfläche auf der rechten Seite der Background Komponente oder einer anderen klickst.

Allgemeine Einstellungen #

Neben ihren speziellen Einstellungen teilen die meisten Komponenten auch die folgenden Standard-Einstellungen.

Bedingte Anzeige #

Hiermit kannst du die Komponente anzeigen oder ausblenden, je nachdem, ob eine Bedingung erfüllt ist. Es wird die Syntax unseres Filters Systems verwendet und immer auf die Datenquelle item verwiesen.

Ein Beispiel: Eine Komponente soll nur angezeigt werden, wenn ein Produkt im Angebot ist: item.on_sale == true.

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

Benutzerdefiniertes CSS #

Hiermit kannst du bestimmte CSS-Regeln auf die Komponente anwenden, falls Anpassungen erforderlich sind, die die Einstellungen sonst nicht erlauben.

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

Schriften #

Der Design Editor enthält eine große Auswahl an Schriftarten, die du verwenden kannst. Zusätzlich kannst du einfach die Schriftart deines Webshops erben lassen, indem du Use webshop font. auswählst.

Die einzige Einschränkung besteht bei Embedded Email Recommendations, wo eine Schrift ausgewählt werden muss, da der Zugriff auf die Schriften deines Webshops nicht möglich ist.

Liquid-Variablen #

In jedem Textfeld hast du die Möglichkeit, Daten über die Liquid Template-Sprache hinzuzufügen.

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

Das obige Beispiel berechnet den gerundeten Prozentsatz, der beim Angebot eines Produkts gespart wird.

Hintergrund #

Dies ist eine spezielle Komponente, die die Basis eines jeden Designs bildet. Der Hintergrund ist der übergeordnete Container, in den der Rest des Designs eingefügt wird.

In der Regel ist der Hintergrund transparent, aber bei Bedarf kannst du eine Hintergrundfarbe auswählen.

Daten-Loop #

Hiermit kannst du über eine bestimmte Art von Daten iterieren und eine gewählte Anzahl davon anzeigen. Das ist nützlich, um Produkte, Kategorien oder Seiten anzuzeigen oder durch ein Attribut wie Varianten oder Farben zu iterieren.

Du kannst einen index festlegen, wenn du nicht beim ersten Element der Liste beginnen möchtest, und die Anzahl der anzuzeigenden Elemente auswählen.

Standardmäßig werden die Elemente in einer Spalte angezeigt.

Gitter von Elementen #

Funktioniert wie der Data Loop, zeigt die Elemente aber in einem Raster statt in einer einzelnen Spalte. Dies eignet sich z.B. für Search Page oder Category Page Designs, um Produkte nebeneinander darzustellen.

Du kannst die Spaltenanzahl je nach Bildschirmgröße festlegen sowie den horizontalen und vertikalen Abstand zwischen den Elementen konfigurieren.

Slider #

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

Du kannst die Anzahl der anzuzeigenden Elemente pro Slide je nach Bildschirmgröße festlegen und das Standard-Styling für die Buttons wählen. Es gibt aktuell 4 Button-Typen:

• Default
• Yellow
• Bordered
• Kein Hintergrund (zum eigenen Styling mit CSS)

Mit Button position kannst du festlegen, ob die Buttons zentriert auf beiden Seiten des Sliders oder in einer der vier Ecken angezeigt werden.

Load More Button #

Wird hauptsächlich bei Search Page und Category Page Designs verwendet. Mit dieser Schaltfläche können Nutzer mehr Elemente sehen als die von dir standardmäßig konfigurierte Anzahl.

Dies ist eine gute Praxis, da zunächst weniger Elemente geladen und die Ladezeiten somit verkürzt werden, während Nutzer bei Bedarf mehr anzeigen lassen können.

Der Button kann mit eigenem Text versehen und die Anzahl der pro Klick zu ladenden Elemente angepasst werden. Es werden so viele Elemente nachgeladen, wie es die gewählte Product Logic erlaubt, bis keine mehr gefunden werden.

Box #

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

Du kannst eine Hintergrundfarbe und ein Layout konfigurieren, das auf dem CSS-Layoutsystem flexbox basiert.

Auch Größen, Abstände und Innenabstände der Box lassen sich steuern.

Linie #

Eine einfache Trennlinie, um Komponenten visuell zu trennen.

Du kannst Farbe und Stil (z. B. durchgezogen, gepunktet, gestrichelt oder doppelt) wählen.

Badge #

Dies ist eine hervorragende Möglichkeit, deinem Design einen visuellen Akzent zu verleihen, besonders um Produkt-Highlights wie Rabatte, Neuheiten und mehr zu promoten.

Badges verfügen über zahlreiche Einstellungen zur Steuerung von Stil, Position, Anzeigetext und mehr. Sie können in einer der vier Ecken eines Elements angezeigt werden und entweder als abgerundete Box oder diagonales Banner erscheinen.

Button #

Ein einfacher Button, der als effektiver Call-to-Action für Besucher dienen kann. Du kannst den anzuzeigenden Text, einen benutzerdefinierten Link oder ein onclick-Event sowie die Hintergrundfarbe konfigurieren, damit er zu deiner Marke passt.

Das onclick-Event ist ein JavaScript-Code, der beim Klick auf den Button ausgeführt wird, zum Beispiel für Funktionen wie “In den Warenkorb” oder Wunschliste und andere JavaScript-Aktionen.

Image #

Ein visuelles Element, das ein Bild in einer bestimmten Größe auf Basis eines Attributs (z.B. Produktbild) oder einer bestimmten URL anzeigt.

Du kannst dem Bild einen eigenen Link hinzufügen, z.B. um Kunden beim Klick zur Produktseite zu führen, und einen Hover-Effekt wie eine Vergrößerung beim Überfahren mit der Maus wählen.

Link #

Konfiguriere eine URL, zu der Besucher weitergeleitet werden, wenn ein beliebiges enthaltenes Element angeklickt wird.

Du kannst einen Attributwert (z.B. Produkt-URL), eine bestimmte URL oder ein onclick-Event wählen.

Price #

Wird meist zur Anzeige des Produktpreises verwendet; diese Komponente enthält mehrere spezifische Einstellungen wie Dezimalstellen, Tausender- und Dezimaltrennzeichen und das Währungssymbol, das entweder vor oder nach dem Preis angezeigt werden kann.

Text #

Fügt deinem Design Textblöcke hinzu. Sie können für viele Zwecke verwendet werden – z.B. um Produkt- oder Seitennamen, Marken, Beschreibungen oder beliebige andere Daten als Text darzustellen.

Text kann statisch oder auf Attributdaten wie Produktnamen oder Seitentitel basieren. Du kannst die maximale Zeichenanzahl begrenzen, um Layouts zu wahren, und den Text klassisch formatieren (z. B. fett, kursiv etc.).

Farbvarianten #

Dies ist ein spezieller Data Loop, mit dem du über eine Liste von Farbcodes iterierst und diese als Farbauswahl anzeigen kannst. Am besten funktioniert dies, wenn du pro Produkt eine Liste von Farbcodes sendest, z.B. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Fügt Bewertungssterne zu deinem Design hinzu, die zeigen, wie zufrieden Kunden mit dem Produkt sind. Reviews werden als 5 Sterne angezeigt, wobei die durchschnittliche Bewertung mit schwarzen Sternen dargestellt wird.

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

Für Produkte müssen dazu folgende Attribute verfügbar sein:

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

Benutzerdefiniertes HTML #

Dies ist eine spezielle Komponente, mit der du beliebigen HTML-Code zu deinem Design hinzufügen kannst. Das kann zum Einfügen eigener Skripte oder spezieller Blöcke genutzt werden, die mit den anderen Komponenten schwer zu erstellen wären.

Auch Liquid-Variablen werden unterstützt, um auf Datenobjekte wie Produkte, Kategorien und Seiten zuzugreifen.

Komponenten kopieren #

Wenn du Komponenten aus einem anderen Design wiederverwenden möchtest, kannst du sie zwischen Designs kopieren. Das funktioniert sowohl zwischen verschiedenen Designs innerhalb eines Stores als auch sogar zwischen Stores deines Accounts.

Fahre einfach mit der Maus über eine Komponente im Quell-Design und klicke den Copy Button. Wechsle zu deinem Ziel-Design und klicke den Paste Button, um sie innerhalb einer Komponente anzuzeigen.

Code anzeigen #

Du kannst den generierten Code deines Designs jederzeit einsehen, indem du auf den View code Button klickst. Damit werden dir das generierte HTML und CSS angezeigt.

So kannst du dein Design aus dem Design Editor in ein Code Design umwandeln, indem du das HTML und CSS kopierst, ein neues leeres Code Design erstellst und den Code dort einfügst.

Rückgängig / Wiederholen #

Falls du einen Fehler machst, kannst du deine letzten Aktionen immer mit dem Undo Button rückgängig machen oder mit dem Redo Button wiederherstellen. Beide Buttons findest du direkt unter dem Vorschaubildschirm.

Veröffentlichen #

Wenn du dein Design verwenden möchtest, musst du es durch Klicken des Publish Buttons veröffentlichen. Nach Änderungen solltest du dein Design ebenfalls erneut veröffentlichen.

Danach kannst du entweder den Design Editor verlassen oder weitere Änderungen vornehmen.