Suche

Ausgewählte Links

1. Company XYZ-Dokumentation zu Einstellungen der vorausschauenden Suche
2. Search & Discovery-App
3. Company XYZ-Dokumentation zum Search-Block
4. Company XYZ-Dokumentation zur Verwendung von Video
5. Company XYZ-Dokumentation zu Icons
6. Company XYZ-Dokumentation zu Banner-Farbeinstellungen
7. Company XYZ-Dokumentation zu Karten-Einstellungen
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
9. Shopify-Dokumentation zu Abschnitten und Blöcken

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Dieser Block fügt ein Suchfeld mit optionalen Live-Ergebnissen, kuratierten Standardsuggestions und werblichen Bannerinhalten hinzu. Verwenden Sie ihn, wenn die Suche mehr tun soll, als nur Suchanfragen entgegenzunehmen, und stattdessen Kundinnen und Kunden aktiv zu Produkten, Kollektionen oder wichtigen Seiten führen soll. Einen umfassenderen Überblick darüber, wie Blöcke in Themes funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die wichtigsten Text-Einstellungen prägen den ersten Eindruck des Sucherlebnisses. Verwenden Sie den Platzhalter, um Kundinnen und Kunden mitzuteilen, wonach sie suchen können, und halten Sie die Schaltflächenbeschriftung kurz, damit sie sich in verschiedenen Layouts bequem einfügt.

In den meisten Fällen funktioniert eine einfache Formulierung am besten. Klare Hinweise sind leichter zu erfassen als gebrandete Phrasen, durch die das Feld weniger eindeutig wirkt.

Einstellungen für die prädiktive Suche

Diese Gruppe steuert das Live-Sucherlebnis, das angezeigt wird, während Kundinnen und Kunden tippen. Außerdem können Sie den Leerzustand mit kuratierten Standardlinks gestalten, damit der Block auch vor der Eingabe einer Suchanfrage nützlich bleibt.

Die prädiktive Suche in Echtzeit erfordert, dass die App Search & Discovery installiert und konfiguriert ist. Siehe die bereitgestellten Referenzen für Einstellungen für die prädiktive Suche, die App Search & Discovery und die kanonische Referenz zum Such-Block.

Die Einstellungen in dieser Gruppe gelten nur, wenn die prädiktive Suche aktiv ist. Wenn Live-Ergebnisse nicht verfügbar sind, ändern diese Steuerelemente das Sucherlebnis nicht wie erwartet.

Verwenden Sie die Menüs für Standard- und sekundäre Ergebnisse, um den leeren Suchzustand in ein hilfreiches Entdeckungs-Panel zu verwandeln. Beliebte Kollektionen, saisonale Ziele, Support-Seiten oder häufige Kategorien funktionieren hier in der Regel besser als lange, tief verschachtelte Menüs.

Wenn Sie den Titel der Standardergebnisse leer lassen, wird stattdessen der Menüname verwendet. Prüfen Sie diese Menübezeichnung sorgfältig, damit das Such-Panel weiterhin bewusst gestaltet wirkt.

Die optionale Banner- und Features-Leiste kann Merchandising und Beruhigung hinzufügen, sollte die Suche jedoch unterstützen und nicht mit ihr konkurrieren. Wenn das Panel überladen wirkt, vereinfachen Sie den umgebenden Inhalt, bevor Sie die Sichtbarkeit der Ergebnisse verringern.

Bannerhintergrund

Diese Gruppe steuert den Hintergrund für den optionalen Bannerbereich. Sie können ein Bild oder Video verwenden und anpassen, wie Hintergrundmedien in den Raum passen.

Gerätespezifische Hintergrundmedien für Mobilgeräte sind nützlich, wenn der Zuschnitt für den Desktop nicht gut auf kleinere Bildschirme übertragbar ist. Das ist besonders wichtig, wenn das Motiv Text, Personen oder Produkte nahe am Rand enthält.

Wählen Sie Medien, die weiterhin Platz für lesbaren Vordergrundinhalt lassen. Ein visuell starkes Asset ist nur dann hilfreich, wenn Überschriften, Schaltflächen und unterstützende Texte weiterhin leicht zu erfassen sind.

Tipp

Verwenden Sie spezielle Hintergrund-Assets für Mobilgeräte, wenn Ihre Desktop-Medien auf einem breiten Zuschnitt basieren. Das sorgt in der Regel für eine bessere Bildkomposition und einen klareren Textkontrast auf kleineren Bildschirmen.

Best Practices für die Videoeinrichtung finden Sie unter using video.

Banner-Vordergrund

Mit dieser Gruppe können Sie werbliche Inhalte über dem Bannerhintergrund platzieren. Sie können ein Symbol, eine Beschriftung, eine Überschrift, eine Unterüberschrift und einen Call-to-Action hinzufügen und diese Inhalte dann innerhalb des Banners positionieren.

Leere Felder werden einfach ausgeblendet, sodass Sie diesen Bereich minimal halten oder eine ausführlichere Werbebotschaft aufbauen können. In den meisten Fällen funktioniert eine klare Überschrift, eine kurze unterstützende Zeile und eine Aktion besser als ein dichter Inhaltsstapel.

Wählen Sie den Überschriftstyp passend zur Hierarchie der umgebenden Seite. Ziel ist es, dass das Banner strukturiert wirkt, ohne den Inhalt in der Nähe zu überlagern.

Wenn Sie eine Schaltfläche hinzufügen, halten Sie die Formulierung direkt und handlungsorientiert. Layout-, Symbol- und Stil-Einstellungen helfen dabei, die Darstellung zu verfeinern, aber der Linkstil hat den größten Einfluss darauf, wie sich das Banner verhält.

Achtung

Wenn Sie einen Linkstil für den gesamten Block wählen, werden Links aus dem Unterüberschriftstext entfernt. Verwenden Sie dies nur, wenn der gesamte Bannerbereich als primäres Klickziel dienen soll.

Wenn Sie Symbole verwenden, können Sie ein Emoji oder einen unterstützten Symbolnamen eingeben. Hinweise zu Symbolen finden Sie unter icons.

Medien im Banner-Vordergrund

Verwenden Sie diese Gruppe, um neben dem Bannertext ein Vordergrundbild hinzuzufügen, etwa ein Logo, ein Badge, einen Produkt-Ausschnitt oder eine Kampagnen-Grafik. Diese Medien erscheinen mit dem Vordergrundinhalt und nicht dahinter.

Kleinere Bildbreiten eignen sich gut für Logos und dekorative Akzente, während größere Breiten für Produktgrafiken oder markante Werbebilder geeignet sind. Wenn Sie die Breite auf 0 setzen, kann sich das Bild über den verfügbaren Platz erstrecken. Prüfen Sie das Ergebnis daher auf kleineren Bildschirmen sorgfältig.

Wenn Sie dem Bild einen Link hinzufügen, halten Sie ihn an die Bannerbotschaft angepasst. Unterschiedliche Zielseiten innerhalb eines kompakten Banners können den Fokus des Blocks schwächen.

Bannerfarben

Diese Gruppe ermöglicht es Ihnen, übergeordnete Theme-Farbentscheidungen für den Bannerbereich zu überschreiben. Verwenden Sie sie, wenn das Such-Banner ein stärkeres Branding benötigt oder wenn Ihre Hintergrundmedien zusätzliche Kontrastunterstützung brauchen.

Overlay- und Textfarben sind hier in der Regel die wichtigsten Steuerelemente. Ein dezentes Overlay kann die Wirkung eines Bildes oder Videos erhalten und gleichzeitig Überschriften, Texte und Aktionen wesentlich besser lesbar machen.

Stellen Sie die Lesbarkeit über dekorative Farbanpassungen. Wenn das Banner Text oder Aktionen enthält, stellen Sie sicher, dass diese sowohl in der Desktop- als auch in der mobilen Ansicht klar erkennbar bleiben.

Weitere Informationen zu diesen Steuerelementen finden Sie unter Bannerfarben.

Standard-Block-Einstellungen

Karten-Einstellungen

Diese gemeinsamen Einstellungen steuern, wie kartenbasierte Ergebnisse in diesem Block dargestellt werden. Verwenden Sie sie, um Ergebnis-Karten an den Rest Ihres Shops anzupassen oder Suchergebnisse visuell stärker hervorzuheben.

Die wirkungsvollsten Optionen sind Kartenstil, Bildverhältnis und wie viel Text jede Karte anzeigt. Wenn Kundinnen und Kunden wahrscheinlich mehrere Ergebnisse schnell durchsuchen, sollten Sie gut erfassbare Karten bevorzugen statt Layouts, bei denen jedes Ergebnis zu hoch wird.

Für die gemeinsame Referenz siehe Karten-Einstellungen.

Sichtbarkeitseinstellungen

Verwenden Sie diese Einstellungen, um den Block je nach Gerätegröße ein- oder auszublenden. Sie sind besonders nützlich, wenn Sie auf Desktop und Mobilgeräten unterschiedliche Suchdarstellungen wünschen.

Wenn Sie diesen Block bei einer Gerätegröße ausblenden, stellen Sie sicher, dass dort ein anderer klarer Einstiegspunkt zur Suche verfügbar ist. Für die gemeinsame Referenz siehe Sichtbarkeitseinstellungen.

Editor-Einstellungen

Diese Einstellungen beeinflussen nur, wie der Block im Editor beschriftet wird. Ein benutzerdefinierter Editor-Titel ist hilfreich, wenn Sie mehrere Search-Blöcke verwenden oder eine kampagnenspezifische Version leichter identifizieren möchten.

Nutzungshinweise

1. Planen Sie für zwei Suchzustände. Der Leerzustand und der Zustand mit eingegebener Suchanfrage können unterschiedliche Ziele erfüllen, daher sollten beide bewusst gestaltet sein.
   1. Verwenden Sie kuratierte Standardinhalte, um Erstbesuche zu lenken.
   2. Halten Sie Live-Ergebnisse auf die nützlichsten Treffer fokussiert.
2. Prüfen Sie beide Ansichtsfenster. Desktop- und Mobilsteuerungen können Layout, Ausrichtung und Medienverhalten ändern. Prüfen Sie daher beide Größen vor der Veröffentlichung.
   1. Bestätigen Sie, dass der Bannertext lesbar bleibt.
   2. Stellen Sie sicher, dass die Zuschnitte der Medien die Botschaft weiterhin unterstützen.
3. Halten Sie Stilentscheidungen bewusst. Leere oder Standardwerte bewahren in der Regel die Fallback-Darstellung des Themes, während explizite Farben, Verläufe oder Medienüberschreibungen den Bereich individueller wirken lassen.
4. Gehen Sie sorgfältig mit Medien um. Bilder und Videos können Zuschnitt, Ladeverhalten, Fallback und Lesbarkeit beeinflussen, insbesondere wenn sich Desktop- und Mobile-Assets unterscheiden.
5. Unterstützen Sie die Klarheit des Formulars. Halten Sie Beschriftungen, Hinweise und alle Erfolgsmeldungen oder Fehlermeldungen leicht lesbar, damit Kundinnen und Kunden ohne Verwirrung suchen können.