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 Designbibliothek auswählen, um zu beginnen, oder einfach von Grund auf neu starten.

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, die das Design ausmachen.

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, mit was 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 Anzahl 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 folgenden 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, nur anzuzeigen, wenn der Preis mehr als 100 beträgt und das Produkt auf Lager ist: item.price > 100 and item.in_stock == true.

Benutzerdefinierte CSS #

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

Die CSS-Regeln, die Sie hinzufügen, beeinflussen nur die Komponente, auf die Sie sie anwenden.

Schriftarten #

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

Die einzige Einschränkung besteht für 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 Produktattributen 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 darstellt. 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 eine Art von Daten iterieren und eine bestimmte 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, das nicht das erste ist, starten möchten, 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 Suchseiten- oder Kategorieseiten-Design 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 anzuzeigenden Elemente für jeden Slide basierend auf der Bildschirmgröße 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 auf einer der beiden Seiten des Sliders zentriert oder in einer der 4 Ecken angezeigt werden sollen.

Mehr laden-Schaltfläche #

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

Dies ist eine gute Praxis, da Sie die Ladezeiten reduzieren können, 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. Sie lädt so viele Elemente, 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 um 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 Abstand und das Padding 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 dargestellt 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 werden soll, 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 “Wunschzettel” 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 einen einzigartigen Link zum Bild hinzufügen, wenn Sie z. B. die Kunden zur Produktseite senden möchten, wenn es angeklickt wird, und Sie können einen Hover-Effekt auswählen, 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 eine Komponente darin angeklickt wird.

Sie können den Wert eines Attributs (wie eine Produkt-URL), eine bestimmte 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 preisbezogenen Konfigurationseinstellungen.

Dazu gehören die Anzahl der Dezimalstellen, die Tausender- und Dezimaltrennzeichen und 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 auf Attributdaten wie Produktnamen oder Seitentiteln basieren. Sie können auch wählen, den Text auf eine bestimmte Anzahl von Zeichen zu beschränken, um Layouts intakt zu halten, und Ihren Text mit klassischer Formatierung wie fett, kursiv und mehr zu gestalten.

Farbvarianten #

Dies ist eine spezialisierte Daten-Schleife, die es Ihnen ermöglicht, über eine Liste von Farbcode zu iterieren und sie 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 des Produkts 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 sonst schwierig 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 sie zwischen Designs kopieren. Dies funktioniert sowohl zwischen verschiedenen Designs in einem einzelnen Store, als auch zwischen Stores in Ihrem Konto.

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 aus dem 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 / Wiederherstellen #

Wenn Sie einen Fehler machen, können Sie Ihre letzten Aktionen jederzeit rückgängig machen, indem Sie auf die Undo-Schaltfläche klicken oder sie mit der Redo-Schaltfläche wiederherstellen. 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 weitere Änderungen vornehmen möchten.