Gestaltung Ihrer Onsite-Designs in Clerk.io

Designs bestimmen, wie Produkte in Ihren Clerk.io-Empfehlungen, -Suchen und -E-Mails visuell dargestellt werden sollen. Ein Design kann für mehrere Inhaltsblöcke verwendet werden.

Die Designsprache ist eine modifizierte Version von Handlebars. Sie können über die Website Design Language hier lesen.

Erstellen eines neuen Designs

Wählen Sie im Menü auf der linken Seite von my.clerk.io Design aus, entweder unter Suche, Empfehlungen oder E-Mail - je nachdem, für welchen Inhalt Sie ein Design erstellen möchten.

Auf der nächsten Seite wählen Sie Neues Design in der oberen rechten Ecke.

Wählen Sie als Nächstes den Inhaltstyp aus, mit dem Sie für Ihr Design beginnen möchten. In diesem Beispiel verwenden wir den Produktslider.

Wählen Sie dann Next in der rechten unteren Ecke.

Im nächsten Abschnitt können Sie Ihren Entwurf benennen. Sobald Sie dies getan haben, wählen Sie Weiter.

Sie haben dann die Wahl, ob Sie mit dem Design-Editor oder mit Code an Ihrem Entwurf arbeiten möchten.

HINWEIS: Wenn Sie wenig Erfahrung mit Code haben, insbesondere mit HTML und CSS, empfehlen wir Ihnen, den Design Editor zu verwenden.

Sobald Sie Ihre Auswahl getroffen haben, wählen Sie Design erstellen. Ihr vorgefertigtes Design wird angezeigt, und Sie können mit wenigen Klicks Änderungen am Design vornehmen.

Ändern verschiedener Teile eines Entwurfs im Code

HTML

Der HTML-Code wird verwendet, um den HTML-Code des Clerk.io-Blocks zu rendern, einschließlich der Produktdaten und des Containers, der ihn umgibt.

Attribute können über unsere Templating-Sprache eingefügt und dann als Teil des Designs verwendet werden. Stellen Sie sicher, dass alle benutzerdefinierten Attribute, die Sie in Ihren Designs verwenden möchten, mit Clerk.io synchronisiert sind.

CSS

Mit diesem Editor können Sie benutzerdefinierte CSS für die Verwendung in Ihren Vorlagen schreiben. Jedes CSS, das Sie schreiben, wird in den oberen Bereich der Seite eingefügt.

Die Einbettungscodes von Clerk.io binden einfach alles in Ihren Webshop ein, was bedeutet, dass alle Ihre vorhandenen CSS in Ihrem Design verfügbar gemacht werden können.

Um ein CSS in Ihrem Design anzupassen, suchen Sie zunächst die Klasse oder den ID-Wert, den Sie ändern möchten, im CSS-Container des Designs. Anschließend können Sie die vorhandenen CSS-Bestandteile dieses Elements anpassen oder Elemente zur Anzeige in dieser Klasse/ID hinzufügen.

Kopieren eines bestehenden Designs und Konvertieren in ein Clerk.io Design

Wenn Sie vorhandene Designs in Ihrem Webshop haben, die Sie mit Clerk.io verwenden möchten, haben Sie die Möglichkeit, diese zu konvertieren und in Ihre Clerk.io Designs zu kopieren. Dies kann besonders hilfreich sein, wenn Sie das Design für die Suchseite Ihres Webshops in Betracht ziehen.

Nachdem Sie das Design, das Sie kopieren möchten, identifiziert haben, erfolgt das Kopieren und Ändern Ihres Designs in ein Clerk.io Design in 3 Hauptschritten:

1. Kopieren Sie Ihr bestehendes Design

Identifizieren Sie zunächst das Design, das derzeit in den Themendateien für Ihren Webshop verwendet wird und das Sie in Clerk.io kopieren möchten, und fügen Sie es dann in den HTML-Container in einem leeren Clerk.io-Design ein.

Wenn Sie CSS mit dem Design verknüpft haben, fügen Sie diese in den CSS-Container unter dem HTML ein.

2. Ersetzen Sie die Variablenwerte durch den Wert und die Syntax des Clerk.io-Attributs

Um die Attribute Ihres Ladens in Ihrem Clerk.io-Design zu verwenden, müssen Sie den Namen des Wertes in den Namen ändern, der in Ihren Clerk.io-Daten verwendet wird, und die Syntax {%raw%} {{ attribute }} anpassen.

• Wenn Sie zum Beispiel in Ihrem Webshop auf eine Liste Preis verweisen, kann das Attribut in Ihren Clerk.io Daten Liste_Preis heißen und müsste dann in Ihrem Clerk.io Design als {{ product.list_price }} referenziert werden.{%endraw%}

3. Das Design in eine Produktschleife verpacken

Der letzte Schritt besteht darin, eine for-Schleife zu Ihrem kopierten und geänderten Design hinzuzufügen, um sicherzustellen, dass der Design-Code für die Produkte iteriert, die in Ihrem Such- oder Empfehlungsinhalt zutreffen.

Fügen Sie dazu einfach {%raw%} {% for product in products %} vor Ihrem Haupt-Slider