Design Editor

Grundlagen #

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

Sie können beliebig viele Designs erstellen, die Sie möchten, und beliebig viele Inhaltsblöcke können dasselbe Design verwenden.

Wenn Sie zur Designs-Seite für Search / Recommendations / Email gehen, 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-Bibliothek auswählen, um Ihnen den Einstieg zu erleichtern, oder einfach von Grund auf neu beginnen.

Bildschirmgrößen #

In der oberen rechten Ecke des Bildschirms können Sie Ihre Designs für verschiedene Bildschirmgrößen in der Vorschau anzeigen. Viele der Komponenten unterstützen auch individuelles Styling für jede dieser Bildschirmgrößen, um Ihre Designs vollständig responsiv zu gestalten.

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 zeigt, wie es auf Ihrer Website aussehen wird.
• Der Layout-Ü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.

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

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

Komponenten #

Jedes Design besteht aus einer Reihe von Bausteinen, die Komponenten genannt werden. Ein Design kann so viele enthalten, wie Sie möchten, in beliebiger Reihenfolge.

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

Allgemeine Einstellungen #

Neben ihren spezialisierten Einstellungen teilen die meisten Komponenten auch die unten aufgeführten Standard-Einstellungen.

Bedingte Anzeige #

Damit können Sie die Komponente basierend darauf anzeigen oder ausblenden, ob eine Bedingung erfüllt ist. Es verwendet die Syntax aus unserem Filters-System und verweist immer auf item als Datenquelle.

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 #

Damit können Sie spezifische CSS-Regeln auf die Komponente anwenden, wenn Sie Anpassungen vornehmen müssen, die die Einstellungen nicht zulassen.

Die CSS-Regeln, die Sie hinzufügen, beeinflussen nur die Komponente, zu der Sie sie hinzufügen.

Schriftarten #

Der Design-Editor wird mit einer breiten Palette von Schriftarten geliefert, die Sie verwenden können. Darüber hinaus können Sie einfach die Schriftart von Ihrem Webshop übernehmen, indem Sie Use webshop font. wählen.

Die einzige Einschränkung besteht bei Embedded Email Recommendations, wo 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 hinzuzufügen.

Dies umfasst die Erstellung dynamischer Textfelder wie {{ headline }} oder das Hinzufügen von Berechnungen basierend auf Produkteigenschaften wie: {{ 100-((item.list_price*100)/item.price) | round }} %

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

Hintergrund #

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

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

Daten-Schleife #

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

Sie können einen index festlegen, wenn Sie von einem bestimmten Element in der Liste starten möchten, das nicht das erste ist, und Sie können die Anzahl der anzuzeigenden Elemente auswählen.

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

Raster von Elementen #

Funktioniert genau wie die Daten-Schleife, zeigt jedoch Elemente in einem Rasterlayout anstelle einer einzelnen Spalte an. Dies ist nützlich, um ein Design für eine Suchseite oder Kategorieseite mit nebeneinander angezeigten Produkten zu erstellen.

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

Slider #

Zeigt Elemente in einer horizontalen Reihe mit Schiebepfeilen an, um durch sie zu scrollen.

Sie können die Anzahl der Elemente, die für jeden Slide basierend auf der Bildschirmgröße angezeigt werden sollen, und das Standardstyling für die Schaltflächen konfigurieren. Derzeit gibt es 4 Schaltflächentypen:

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

Verwenden Sie Button position, um auszuwählen, ob die Schaltflächen zentriert an einer der Seiten des Sliders oder in einer der 4 Ecken angezeigt werden sollen.

Mehr laden-Schaltfläche #

Hauptsächlich für Designs von Suchseiten und Kategorieseiten verwendet, ermöglicht diese Schaltfläche den Benutzern, mehr Elemente als die standardmäßig konfigurierte Anzahl zu sehen.

Dies ist eine gute Praxis, da es Ihnen ermöglicht, die Ladezeiten zu reduzieren, indem Sie zunächst eine kleinere Anzahl von Elementen anzeigen und den Benutzern ermöglichen, mehr zu sehen, wenn sie möchten.

Die Schaltfläche kann mit einem benutzerdefinierten Text und der Anzahl der Elemente konfiguriert werden, die jedes Mal geladen werden, wenn sie angeklickt wird. Es werden so viele Elemente geladen, wie die gewählte Produktlogik zurückgibt, bis keine weiteren Elemente 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.

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

Sie können auch die Abmessungen der Box sowie den Rand und die Polsterung steuern.

Linie #

Eine einfache Trennlinie, die verwendet wird, um Komponenten visuell zu trennen.

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

Badge #

Dies ist eine großartige Möglichkeit, Ihrem Design visuelle Stil zu verleihen, und es ist besonders nützlich, um Details zu Ihren Produkten wie Rabatte, Neuigkeiten und mehr zu bewerben.

Badges haben eine Reihe von Einstellungen, um den Stil, die Position, den anzuzeigenden Text und mehr zu steuern. Sie können in einer der 4 Ecken eines Elements angezeigt werden und entweder als abgerundetes Feld oder als diagonales Banner angezeigt werden.

Schaltfläche #

Eine einfache Schaltfläche, die als effektiver Call-to-Action für Besucher fungieren kann. Sie ermöglicht es Ihnen, den anzuzeigenden Text, einen benutzerdefinierten Link oder ein onclick-Ereignis festzulegen, das verwendet wird, wenn sie angeklickt wird, sowie die Hintergrundfarbe, damit sie zu Ihrer Marke passt.

Das onclick-Ereignis ist ein Stück Javascript, das ausgeführt werden sollte, wenn die Schaltfläche angeklickt wird, und das für Funktionen wie “In den Warenkorb” oder Wunschlisten verwendet werden kann.

Bild #

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

Sie können einen einzigartigen Link zum Bild hinzufügen, wenn Sie z. B. Kunden zur Produktseite weiterleiten möchten, wenn es angeklickt wird, und Sie können einen Hover-Effekt auswählen, wie z. B. das Bild größer zu machen, wenn Besucher mit der Maus darüber fahren.

Link #

Konfigurieren Sie eine URL, um Besucher zu senden, wenn auf eine Komponente innerhalb davon geklickt wird.

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

Preis #

Am häufigsten verwendet, um den Preis eines Produkts anzuzeigen, enthält diese Komponente eine Reihe von preis-spezifischen Konfigurationseinstellungen.

Diese umfassen die Anzahl der Dezimalstellen, die Tausender- und Dezimaltrennzeichen sowie das Währungssymbol, das entweder vor oder nach dem Preis angezeigt wird.

Text #

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

Text kann auf statischem Text Ihrer Wahl oder Attributdaten wie Produktnamen oder Seitentiteln basieren. Sie können den Text auf eine bestimmte Anzahl von Zeichen beschränken, um Layouts intakt zu halten, und Ihren Text mit klassischer Formatierung wie fett, kursiv und mehr gestalten.

Farbvarianten #

Dies ist eine spezialisierte Daten-Schleife, die es Ihnen ermöglicht, über eine Liste von Farbcode zu iterieren und diese als Farboptionen anzuzeigen. Sie funktionieren am besten, wenn Sie eine Liste von Farbcode für jedes Produkt senden. Z. B. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Bewertungen #

Fügt Ihrem Design Bewertungssterne hinzu, die anzeigen, wie sehr Käufern das Produkt gefallen hat. Bewertungen werden als 5 Sterne angezeigt, wobei die durchschnittliche Bewertung als schwarze Sterne angezeigt wird.

Darüber hinaus wird die Anzahl der Bewertungen angezeigt, die das Produkt erhalten hat, neben den Sternen.

Sie benötigen die folgenden beiden Attribute, die für Produkte verfügbar sein müssen:

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

Benutzerdefiniertes HTML #

Dies ist eine spezialisierte Komponente, die es Ihnen ermöglicht, beliebigen HTML-Code zu Ihrem Design hinzuzufügen. Dies kann verwendet werden, um benutzerdefinierte Skripte hinzuzufügen oder um spezielle Blöcke hinzuzufügen, die andernfalls schwierig mit den anderen Komponenten zu erstellen 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 diese zwischen Designs kopieren. Dies funktioniert sowohl zwischen verschiedenen Designs in einem einzelnen Store, aber Sie können auch Komponenten zwischen Stores in Ihrem Konto kopieren.

Fahren Sie einfach mit der Maus über eine Komponente in Ihrem Quell-Design und klicken Sie auf die Copy-Schaltfläche. Gehen Sie zu Ihrem Ziel-Design und klicken Sie auf die Paste-Schaltfläche, um sie innerhalb der Komponente hinzuzufügen, wo sie angezeigt werden soll.

Code anzeigen #

Zu jeder Zeit können Sie den generierten Code für Ihr Design anzeigen, indem Sie auf die View code-Schaltfläche klicken. Dies zeigt Ihnen den generierten HTML- und CSS-Code an.

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

Rückgängig / Wiederholen #

Wenn Sie einen Fehler machen, können Sie Ihre letzten Aktionen immer rückgängig machen, indem Sie auf die Undo-Schaltfläche klicken oder sie mit der Redo-Schaltfläche wieder hinzufügen. Beide befinden sich direkt unter dem Vorschaufenster.

Veröffentlichen #

Wenn Sie bereit sind, Ihr Design zu verwenden, muss es veröffentlicht werden, indem Sie auf die Publish-Schaltfläche klicken. Nach Änderungen sollten Sie Ihr Design auch erneut veröffentlichen.

Sie können dann wählen, ob Sie den Design-Editor verlassen oder bleiben und zusätzliche Änderungen vornehmen möchten.