Erste Schritte mit Omni-Search

Angetrieben von unserer Search 3.0, wird die Omni-search von Clerk Ihren Besuchern die relevantesten Ergebnisse und verwandte Inhalte für ihre Suchanfragen liefern.

Als E-Commerce-Manager bietet sie Ihnen die Flexibilität, die Sie brauchen, um das beste Sucherlebnis zu bieten:

• Sie lässt sich leicht in Ihre Website integrieren (siehe Einfügen Ihres Omni-Search-Inhalts in Ihre Website)
• Es ist vollständig anpassbar: Sie können mit einer unserer minimalistischen Vorlagen beginnen und das Design an Ihre Markenidentität anpassen, indem Sie nur ein paar Dinge ändern (Logo, Schriftarten, Farben…)
• Konzentriert sich auf die Bereitstellung der besten Benutzererfahrung durch Unterstützung:
  • Vorschläge für Suchanfragen (basierend auf Popularität, Suchhistorie, Autovervollständigung…): um Ihre Besucher auf ihrem Weg zu begleiten
  • Live-Ergebnisse: Ihre Besucher erhalten während der Eingabe schnelle Suchergebnisse sowie Vorschläge zu Kategorien, Marken und Inhalten.
  • Sortierung und Filterung: damit Ihre Besucher ihre Suche auf intuitive und einfache Weise verfeinern können.

So starten Sie mit Omni-Search

Erstellen eines Omni-Search-Designs

Ähnlich wie bei unseren Live- und Suchseiteninhalten benötigen Sie ein Omni-Search-Design, um einen Omni-Search-Inhalt zu erstellen. Aus diesem Grund ist es eine gute Idee, zunächst eine unserer Vorlagen anzupassen:

1. Navigieren Sie in Ihrem Clerk.io Konto zu Store > Search > Designs
2. Klicken Sie auf New Design
3. Wählen Sie den Designtyp Omni-search.
4. Wählen Sie eine Vorlage aus, mit der Sie beginnen möchten.
5. Klicken Sie auf “Create design”, um mit der Personalisierung Ihres Designs zu beginnen.

Was ist bei der Bearbeitung eines Omni-search zu beachten?

Alle Omni-Search-Designs bestehen aus einem allgemeinen Layout und einer Reihe von Unterdesigns, auf die im Hauptlayout verwiesen werden kann.

Hinweis: Nur die in Ihrem Omni-Search-Design verfügbaren Unterdesigns können im allgemeinen Layout referenziert werden.

Um ein bestimmtes Unterdesign zu bearbeiten, klicken Sie auf das Symbol Bearbeiten und Sie navigieren zur Seite des Unterdesigns. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf Save & close, und Sie befinden sich wieder in Ihrem allgemeinen Layout-Editor.

Sie können auch die Referenz eines Unterdesigns löschen, duplizieren und kopieren, indem Sie auf die Schaltfläche mit den drei Punkten klicken.

! [Screenshots der Sub-Design-Optionen] (sub-designs-options.png)

Beachten Sie beim Bearbeiten eines Omni-Search-Designs, dass einige Elemente bestimmte Clerk-IDs benötigen, damit Ihr Design funktioniert, z. B. das Eingabefeld (id=“clerk-omnisearch-input”) oder der Inhaltswrapper (id=“clerk-omnisearch-content”).

Zu Beginn möchten Sie vielleicht nur ein paar Dinge anpassen, um das Design an das Erscheinungsbild Ihrer Marke anzupassen - denken Sie daran, dass Sie Ihr Design später jederzeit bearbeiten können, nachdem Sie es auf Ihrer Website in der Vorschau angezeigt und getestet haben.

• Logo: Greifen Sie auf das TopBarSearchForm zu und ersetzen Sie das Standardlogo durch Ihres.
• Schriftarten: Passen Sie die Schriftarten bei Bedarf an das Erscheinungsbild Ihrer Website an.
• Farben: Sie können die Farben Ihrer Marke in den Elementen hinzufügen, die Sie hervorheben oder mit dem Rest Ihrer Website wie Schaltflächen und Tags optimieren möchten.
• Schaltflächen und Tag-Rahmen: Sie können ihre Farbe, ihren Radius, ihre Breite usw. anpassen.
• Links: Wenn Sie eine bestimmte Struktur für Ihre Links haben, können Sie diese auch bearbeiten.

Wann immer Sie Ihren Entwurf überprüfen möchten, können Sie auf die Schaltfläche “Preview design” klicken. Sie können dann die letzte gespeicherte Version Ihres Entwurfs überprüfen.

Sobald Sie das Gefühl haben, dass Ihr Entwurf fertig ist, können Sie zum nächsten Schritt übergehen: der Erstellung eines Inhalts für Ihre Omni-Search.

Erstellen eines Inhalts für die Omni-Search

Inhalte in Clerk.io können gewissermaßen als “Container” für die Elemente betrachtet werden, die Sie über Ihr Konto erstellen können (Suchdialoge oder Empfehlungskarussells). Für jedes Element, das Sie in Ihre Website einfügen möchten, müssen Sie einen Inhalt erstellen.

Um Omni-Search in Ihrem Shop zu verwenden, müssen Sie einen Inhalt dafür erstellen:

1. Navigieren Sie zu Search > Content.
2. Klicken Sie auf “New content” oben rechts auf der Seite
3. Füllen Sie die erforderlichen Felder aus:
   • Name: er wird Ihnen helfen, Ihren Inhalt zu identifizieren, falls Sie mehr als einen erstellen möchten (er kann später geändert werden)
   • Inhaltstyp: Standardmäßig ist dies Omni-Search, Sie müssen also nichts weiter tun.
   • Design: Alle Inhalte benötigen ein kompatibles Design. Klicken Sie auf das Feld und Sie sollten in der Lage sein, es unter allen Omni-Search-Designs, die Sie erstellt haben, auszuwählen.
     • Wenn Ihr Design irgendwelche Variablen enthält, geben Sie deren Werte hier ein.
     • Entscheiden Sie, wie viele Produkte wir pro Ladevorgang anzeigen sollen. Jede Suchanfrage kann sehr viele Treffer liefern. Um die beste Leistung zu gewährleisten, werden wir nicht alle auf einmal laden, sondern bei Bedarf, wenn Ihre Besucher auf die Schaltfläche Mehr laden klicken.
     • Begrenzen Sie die Suchvorschläge, die Anzahl der Kategorien und die Anzahl der Inhaltsseiten, die auf einmal angezeigt werden können. Dadurch wird sichergestellt, dass Ihre Besucher unabhängig von der Abfrage nicht mit zu vielen Informationen überschüttet werden und dass Ihr Design nicht kaputt geht.
     • Wählen Sie die Attribute, die Sie als Facetten (Filter) einbeziehen möchten, und geben Sie ihnen lesbare Namen. Wenn Sie ein bestimmtes Attribut nicht in der Liste finden, kann es sein, dass Sie vergessen haben, es in die Liste der “filterbaren Attribute” in der Suchkonfiguration aufzunehmen.

Fügen Sie den Inhalt in Ihre Website ein

Der letzte Schritt, um einen Inhalt von Clerk.io in Ihren Webshop einzubinden, ist das Einfügen in Ihre Website.

Für Ihre Omni-Search-Inhalte ist die Standardmethode “Injektion verwenden”, aber Sie können den Inhalt auch über “Eingebetteten Code verwenden” in Ihre Website einfügen.

Einfügen durch Injektion:

Dies ist die einfachste Methode, um Ihrer Website einen Clerk.io-Inhalt hinzuzufügen. Sie müssen nur angeben:

• Das Ereignis, das die Anzeige des Inhalts auslösen soll (höchstwahrscheinlich möchten Sie, dass er angezeigt wird, wenn Ihre Besucher auf Ihr Suchsymbol oder Eingabefeld klicken)
• Das Element, auf dem dieses Ereignis stattfinden wird. Wenn Sie beispielsweise möchten, dass Ihre Omni-Search-Inhalte nur angezeigt werden, wenn Ihre Besucher mit Ihrer Suchleiste interagieren (klicken oder darauf fokussieren), müssen Sie nur den eindeutigen CSS-Selektor finden, der darauf angewendet wird (er sieht in etwa wie #search, #search_bar aus…). Wenn Sie unterschiedliche IDs für Mobilgeräte und Desktops haben, fügen Sie beide hinzu. Wie finde ich den CSS-Selektor meiner Suchleiste? 1. Überprüfen Sie den Code Ihrer Website; 2. Suchen Sie das Element, auf das Sie abzielen möchten. 3. Klicken Sie mit der rechten Maustaste darauf und suchen Sie die Option Kopieren > Kopierselektor.

!

Hinweis: Stellen Sie sicher, dass Sie einen CSS-Selektor finden, der eine eindeutige Kennung der Elemente ist, auf die Sie abzielen möchten. Sie können jeden CSS-Selektor verwenden, der von der Methode querySelector() unterstützt wird.

• Stellen Sie die Sichtbarkeit des Inhalts ein:
  • In der Vorschau: ermöglicht es Ihnen, Ihre Inhalte zu testen, ohne Ihre Live-Website zu beeinträchtigen. Sie können Ihre Website in der Vorschau öffnen, indem Sie auf “Open site in preview” klicken oder der URL Ihrer Website /?clerk_preview=true hinzufügen.
  • Auf meiner Live-Site: Sobald Sie Ihre Inhalte getestet haben und bereit sind, sie öffentlich zu machen, ist es an der Zeit, diese Option zu wählen.

Einfügen mit eingebettetem Code:

Dies ist die Alternative zum Hinzufügen des Inhalts zu Ihrer Website mithilfe der Injektion. Es erfordert einige weitere Schritte und die Bearbeitung des Codes Ihrer Website.

So fügen Sie den eingebetteten Code zu Ihrer Website hinzu:

1. Erweitern Sie den Abschnitt “In Website einfügen” und wählen Sie die Option “Eingebetteten Code verwenden”.
2. Wenn Sie nicht gespeicherte Änderungen haben, speichern Sie diese und generieren Sie den eingebetteten Code. Andernfalls erhalten Sie standardmäßig den Code. Kopieren Sie den eingebetteten Code.

! [Inhalt in Ihre Website einfügen] (insert-into-site.png)

3. Greifen Sie auf das Backend Ihres Webshops zu
4. Fügen Sie den Einbettungscode in die Datei ein, die alle Seiten des Webshops generiert, unter dem clerk.js Injektionscode.
5. Ersetzen Sie INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH durch den CSS-Selektor des HTML-Elements, das Ihren Omni-Search-Inhalt aktivieren soll.