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 die Haptik 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 die Seite Designs für Search / Recommendations / Email aufrufen, sehen Sie eine Liste aller Ihrer Designs, einschließlich ihrer IDs.

Wenn Sie ein neues Design erstellen, können Sie eine Startvorlage aus unserer Design Library auswählen, um den Einstieg zu erleichtern, oder einfach von Grund auf neu beginnen.

Bildschirmgrößen #

Oben rechts auf dem Bildschirm können Sie Ihre Designs für verschiedene Bildschirmgrößen in der Vorschau anzeigen. Viele der Komponenten unterstützen auch das individuelle Styling für jede 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 Vorschaufenster, das das Design so zeigt, wie es auf Ihrer Website aussehen wird.
• Dem Komponentenbaum, der alle Komponenten auflistet, aus denen das Design besteht.

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

Das Überfahren einer Komponente im Komponentenbaum hebt diese im Vorschaufenster hervor, damit Sie sehen, woran Sie arbeiten. Durch Klicken auf ein Element im Vorschaufenster wird die entsprechende Komponente ausgewählt und ihre Einstellungen geöffnet.

Sie können Komponenten im Komponentenbaum per Drag & Drop verschieben, um sie neu anzuordnen oder in andere übergeordnete Komponenten zu verschieben. Visuelle Indikatoren zeigen genau an, wo eine Komponente platziert wird, wenn Sie sie ablegen.

Der Komponentenbaum unterstützt außerdem Tastaturnavigation. Verwenden Sie die Pfeiltasten, um zwischen den Komponenten zu wechseln, und nutzen Sie Tastenkombinationen für häufige Aktionen wie Kopieren, Einfügen und Löschen von Komponenten.

Komponenten #

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

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

Allgemeine Einstellungen #

Neben ihren speziellen Einstellungen verfügen die meisten Komponenten auch über die unten aufgeführten Standardeinstellungen.

Bedingte Anzeige #

Damit können Sie eine Komponente ein- 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 wäre, eine Komponente nur anzuzeigen, wenn ein Produkt im Angebot ist: item.on_sale == true.

Oder sie nur anzuzeigen, 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 dem Element spezifische CSS-Regeln zuweisen, wenn Anpassungen erforderlich sind, die durch die Einstellungen nicht anders möglich wären. Das CSS wird in einem eigenen Code-Editor mit Syntax-Highlighting bearbeitet.

Die hinzugefügten CSS-Regeln beeinflussen nur die Komponente, der sie zugewiesen wurden.

Schriften #

Der Design Editor kommt mit einer großen Auswahl an Schriften, die Sie verwenden können. Außerdem können Sie einfach die Schrift Ihrer Webshop-Seite erben, 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 Schriften 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 auf Basis von Produktattributen, z. B.: {{ 100-((item.list_price*100)/item.price) | round }} %

Das obige Beispiel berechnet den gerundeten Prozentsatz der Ersparnis, wenn ein Produkt im Angebot ist.

Background #

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

Normalerweise ist der Hintergrund transparent, Sie können jedoch bei Bedarf eine Hintergrundfarbe auswählen.

Data Loop #

Ermöglicht das Durchlaufen einer Art von Daten und die Anzeige einer ausgewählten Anzahl davon. Dies kann verwendet werden, um Produkte, Kategorien oder Seiten anzuzeigen, oder um durch ein Attribut wie Varianten oder Farben zu iterieren.

Sie können einen index angeben, wenn Sie ab einem bestimmten Element in der Liste statt beim ersten starten möchten, und die Menge der anzuzeigenden Elemente wählen.

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

Grid of items #

Funktioniert genauso wie der Data Loop, zeigt die Elemente aber in einem Rasterlayout statt in einer einzelnen Spalte an. Dies ist nützlich, um z. B. ein Search Page- oder Category Page-Design zu erstellen, bei dem Produkte nebeneinander dargestellt werden.

Sie können die Spaltenanzahl je nach Bildschirmgröße sowie den Abstand zwischen den Elementen sowohl horizontal als auch vertikal konfigurieren.

Slider #

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

Sie können die für jeden Slide anzuzeigende Elementanzahl je Bildschirmgröße und die Standardoptik für die Buttons konfigurieren. Aktuell gibt es 4 Button-Typen:

• Standard
• Gelb
• Umrandet
• Kein Hintergrund (wenn Sie die Pfeile per CSS individuell gestalten wollen)

Über Button position wählen Sie, ob Buttons zentriert an den Seiten oder in einer der 4 Ecken des Sliders gezeigt werden.

Load more button #

Wird vor allem für Search Page- und Category Page-Designs verwendet; dieser Button ermöglicht es den Nutzern, mehr Elemente als die standardmäßig konfigurierte Anzahl zu laden.

Dies ist eine gute Praxis, da Sie so die Ladezeiten reduzieren können, indem zunächst weniger Elemente angezeigt werden und der Nutzer bei Wunsch selbst mehr laden kann.

Der Button kann mit benutzerdefiniertem Text und der Anzahl der bei jedem Klick zu ladenden Elemente konfiguriert werden. Es werden jeweils so viele Elemente geladen, wie die gewählte Product Logic zurückgibt, bis keine weiteren gefunden werden.

Box #

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

Sie können mit einer Hintergrundfarbe und einem Layout auf Basis des flexbox CSS-Layoutsystems konfiguriert werden.

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

Line #

Eine einfache Trennlinie, um Komponenten visuell zu trennen.

Die Farbe und der Stil (durchgezogen, gepunktet, gestrichelt oder doppelt) sind einstellbar.

Badge #

Eine ausgezeichnete Möglichkeit, dem Design einen optischen Akzent zu verleihen; besonders nützlich, um Details zu Produkten wie Rabatten, Neuheiten und mehr hervorzuheben.

Badges bieten zahlreiche Einstellmöglichkeiten für Stil, Position, angezeigten Text und mehr. Sie können in jeder der 4 Ecken eines Elements sowie als abgerundete Box oder diagonales Banner dargestellt werden.

Button #

Ein einfacher Button als Call-to-Action für Besucher. Sie können Text, einen benutzerdefinierten Link oder ein onclick-Event für den Klick sowie die Hintergrundfarbe passend zu Ihrer Marke konfigurieren.

Das onclick-Event ist JavaScript-Code, der beim Klick ausgeführt wird und z. B. für Add-to-Cart- oder Wishlist-Funktionen und andere JavaScript-Funktionalitäten genutzt werden kann.

Image #

Visuelle Komponente zur Anzeige eines Bildes in einer vorgegebenen Größe, basierend auf einem Attribut (z. B. Produktbild) oder einer spezifischen URL.

Sie können einen individuellen Link zum Bild hinzufügen, wenn Sie z. B. Kunden beim Klick auf die Produktseite leiten möchten, und einen Hover-Effekt wählen, wie z. B. eine Vergrößerung des Bildes bei Mouseover.

Link #

Konfigurieren Sie eine URL, zu der Besucher gelangen, wenn ein beliebiges darin enthaltenes Element geklickt wird.

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

Price #

Hauptsächlich zur Anzeige des Produktpreises, enthält diese Komponente zahlreiche preisbezogene Konfigurationsoptionen.

Dazu gehören die Anzahl der Dezimalstellen, Tausender- und Dezimaltrennzeichen sowie das vor oder nach dem Preis anzuzeigende Währungssymbol.

Text #

Fügt Ihrem Design Textblöcke hinzu. Sie werden für verschiedene Zwecke verwendet, z. B. zur Anzeige von Namen von Produkten oder Seiten, Marken, Beschreibungen und aller Daten, die Sie als Text darstellen möchten.

Der Text kann auf von Ihnen bereitgestelltem statischem Text oder Attributdaten wie Produktnamen oder Seitentiteln basieren. Sie können Text außerdem klassisch formatieren, z. B. fett, kursiv usw.

Color variants #

Dies ist ein spezialisierter Data Loop, mit dem Sie über eine Liste von Farb-Codes iterieren und diese als Farbauswahl anzeigen können. Am besten funktioniert dies, wenn Sie für jedes Produkt eine Liste von Farb-Codes übermitteln, z. B. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Fügt Ihrem Design Bewertungssterne hinzu und zeigt so, wie gut das Produkt bei Käufern ankam. Reviews werden als 5 Sterne dargestellt, wobei der Durchschnitt als schwarz gefärbte Sterne angezeigt wird.

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

Folgende zwei Attribute müssen bei den Produkten verfügbar sein:

• reviews_avg: Der Durchschnitt der Bewertungen des Produkts (maximal 5 Sterne).
• reviews_amount: Die Gesamtzahl der Bewertungen für das Produkt.

Custom HTML #

Dies ist eine spezialisierte Komponente, mit der Sie beliebigen HTML-Code zu Ihrem Design hinzufügen können. Das eignet sich z. B. für eigene Skripte oder spezielle Blöcke, die mit den anderen Komponenten nur schwer realisierbar sind.

Sie unterstützen außerdem 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 verschiedenen Designs eines einzelnen Shops als auch zwischen Shops auf Ihrem Account.

Fahren Sie mit der Maus über eine Komponente im Komponentenbaum und klicken Sie auf die Copy-Schaltfläche oder verwenden Sie das Tastaturkürzel. Wechseln Sie zu Ihrem Zieldesign und klicken Sie auf die Paste-Schaltfläche, um die Komponente an gewünschter Stelle einzufügen. Sie können auch die Standard-Tastaturkürzel zum Kopieren und Einfügen verwenden.

Code anzeigen #

Sie können jederzeit den generierten Code für Ihr Design einsehen, indem Sie auf die View code-Schaltfläche klicken. Es öffnet sich ein Quellcode-Viewer mit Syntaxhervorhebung, der den generierten HTML- und CSS-Code Ihres Designs anzeigt.

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

Rückgängig/Wiederherstellen #

Wenn Sie einen Fehler machen, können Sie Ihre letzten Schritte jederzeit mit dem Undo-Button rückgängig machen oder mit dem Redo-Button wiederherstellen.

Das Rückgängig-/Wiederherstellungssystem beinhaltet eine visuelle Zeitleiste, die eine Liste Ihrer Änderungen anzeigt. Sie können auf jeden Punkt der Zeitleiste klicken, um zu diesem Zustand zurückzuspringen. So behalten Sie den Überblick und können durch die Bearbeitungshistorie navigieren.

Dark Mode #

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

Tastaturkürzel #

Der Design Editor unterstützt Tastenkombinationen für häufige Aktionen. So können Sie schneller arbeiten, ohne die Maus zu verwenden.

Übliche Kurzbefehle sind:

• Kopieren einer Komponente
• Einfügen einer Komponente
• Löschen einer Komponente
• Rückgängig/Wiederherstellen von Änderungen
• Pfeiltasten zur Navigation im Komponentenbaum

Veröffentlichen #

Wenn Sie Ihr Design verwenden möchten, muss es durch Klick auf den Publish-Button in der Editor-Toolbar veröffentlicht werden. Nach Änderungen sollten Sie Ihr Design erneut veröffentlichen.

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