Zum Inhalt springen

Suchergebnisse

Optimieren Sie Layout, Filter, Sortierung und Karten der Suchergebnisse für schnelleres Browsen.

Verwenden Sie diesen Abschnitt, um zu steuern, wie Ergebnisse dargestellt werden und wie einfach Kundinnen und Kunden sie eingrenzen können. Er eignet sich am besten, um die Scan-Geschwindigkeit zu verbessern, Unordnung zu reduzieren und die Suchseite konsistent mit dem Rest Ihres Stores wirken zu lassen.

Dieser Abschnitt hat vor seinen Haupt-Einstellungsgruppen keine separaten eigenständigen Einstellungen. Der Großteil der Einrichtung erfolgt in den unten aufgeführten Steuerungen für Layout, Filter und gemeinsame Darstellung. Einen umfassenderen Überblick über Abschnittssteuerungen finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Diese Einstellungen bestimmen das Standard-Layout der Ergebnisse auf Desktop und Mobilgeräten und steuern außerdem, ob Kundinnen und Kunden dieses Layout selbst ändern können. Das ist nützlich, wenn Sie eine ausgewogene Standardansicht möchten, den Käuferinnen und Käufern aber dennoch etwas Kontrolle darüber geben wollen, wie dicht das Raster wirkt.

Aktivieren Sie die Oberfläche für die Rastergröße, wenn Ihr Katalog eine große Bandbreite an Produkttypen oder Bildstilen enthält. Lassen Sie sie deaktiviert, wenn Sie eine stärker festgelegte, geführte Erfahrung mit einer einzelnen Layout-Auswahl wünschen.

Die Sticky-Oberfläche hält die Steuerelemente sichtbar, während Kundinnen und Kunden durch längere Ergebnisseiten scrollen. Das kann das Filtern und Ändern des Layouts erleichtern, aber Sie sollten die mobile Erfahrung prüfen, damit die Steuerelemente nicht zu gedrängt wirken.

Diese Einstellungen fügen der Ergebnisseite Filter- und Sortierwerkzeuge hinzu. Sie funktionieren am besten, wenn Kundinnen und Kunden wahrscheinlich breite Suchbegriffe verwenden und Möglichkeiten benötigen, die gefundenen Ergebnisse einzugrenzen oder neu anzuordnen. Einzelheiten zur Einrichtung finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Filter erfordern eine zusätzliche Einrichtung, bevor sie hier nützlich sind. Sobald diese Einrichtung abgeschlossen ist, können Sie wählen, ob Filtergruppen standardmäßig geöffnet sein sollen und ob ein Verfügbarkeitsfilter für vorrätige Artikel enthalten sein soll.

Es lohnt sich in der Regel, die Sortierung bei größeren Katalogen aktiviert zu lassen, insbesondere wenn Kundinnen und Kunden die Reihenfolge der Ergebnisse ändern möchten. Wenn die Sortierung in der Vorschau des Editors inkonsistent wirkt, prüfen Sie sie in der Live-Storefront-Ansicht, bevor Sie die endgültige Erfahrung beurteilen.

Schalten Sie Filter erst ein, nachdem die zugehörige Filtereinrichtung abgeschlossen ist. Andernfalls sehen Kundinnen und Kunden möglicherweise Steuerelemente, die keine sinnvolle Eingrenzung bieten.

Verwenden Sie die gemeinsamen Karten-Einstellungen, um Ihre übliche Kartendarstellung nur für Suchergebnisse zu überschreiben. Das ist hilfreich, wenn die Suchseite ein anderes Gleichgewicht aus Bildgröße, Textdichte oder Schaltflächenbehandlung benötigt als andere Produktgitter.

Sie können Ergebnis-Karten kompakter für schnelleres Scannen oder beschreibender für entscheidungsintensive Produkte gestalten. Karten im Banner-Stil unterstützen außerdem eine zusätzliche vertikale Textplatzierung. Testen Sie diesen Stil daher sorgfältig, wenn der Text über Bildern stehen soll.

Verwenden Sie Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Ergebnisbereichs zu steuern. Kleinere Abstände funktionieren hier oft gut, da Suchseiten meist stärker auf Nutzen als auf Werbung ausgerichtet sind.

Getrennte Padding-Werte für Desktop und Mobilgeräte helfen dabei, die Seite angenehm zu halten, ohne Platz zu verschwenden. Wenn es sich so anfühlt, als kämen Sie nur langsam zu den Ergebnissen, reduzieren Sie zuerst den Außenabstand.

Verwenden Sie Abschnittshintergrund-Einstellungen, um Farbe, Farbverlauf, Bild oder Video hinter dem Abschnitt hinzuzufügen. Das kann dazu beitragen, dass sich die Ergebnisseite stärker an Ihre Marke anlehnt, besonders wenn das umliegende Seitenlayout visuell minimal gehalten ist.

Halten Sie Hintergründe auf ergebnisreichen Seiten dezent. Starke Bilder, schwere Overlays oder Videos können mit Karten und Steuerelementen konkurrieren und das Scannen der Ergebnisse erschweren.

Verwenden Sie Trennlinien-Einstellungen, um oben oder unten am Abschnitt eine Linie zu platzieren. Das ist eine einfache Möglichkeit, den Ergebnisbereich von benachbarten Inhalten oder von einem starken Seitenhintergrund abzugrenzen.

Eine dezente Trennlinie reicht in der Regel aus. Wenn Sie keine benutzerdefinierte Farbe festlegen, kann der Abschnitt auf die übergeordnete Rahmenstilgebung zurückgreifen, um ein konsistenteres Erscheinungsbild zu erzielen.

Verwenden Sie Breiten-Einstellungen, um zu steuern, wie breit der Abschnitt und seine Inhalte erscheinen können. Das hat einen großen Einfluss auf die Kartendichte, die Lesbarkeit und darauf, wie großzügig die Ergebnisseite wirkt.

Die Inhaltsbreite ist die wichtigste Einstellung für die Lesbarkeit, während die Abschnittsbreite vor allem dann relevant ist, wenn Sie zusätzlich eine Hintergrundgestaltung verwenden. Prüfen Sie Breitenänderungen in der Live-Storefront, da der Editor die Layoutbreite stärker eingegrenzt erscheinen lassen kann, als sie tatsächlich ist.

  1. Passen Sie die Dichte an den Katalog an. Verwenden Sie engere Raster für große Sortimente, lassen Sie aber mehr Platz, wenn Produkttitel, Auszüge oder Bilder wichtige Details tragen.
  2. Aktivieren Sie Filter mit Absicht. Schalten Sie Filter nur dann ein, wenn die verfügbaren Filteroptionen Kundinnen und Kunden wirklich dabei helfen, breite Suchen einzugrenzen.
  3. Prüfen Sie Mobilgeräte sorgfältig. Sticky-Steuerelemente, geöffnete Filter und dichte Kartenlayouts können auf kleineren Bildschirmen zusammengedrängt wirken.
  4. Verwenden Sie Kartenüberschreibungen strategisch. Ändern Sie hier Kartenstil, Text und Schaltflächenbehandlung nur dann, wenn Suchergebnisse ein anderes Browsing-Erlebnis benötigen als andere Raster.
  5. Setzen Sie auf schnelles Scannen. Halten Sie Hintergründe, Abstände und dekorative Gestaltungen gegenüber der Klarheit von Ergebnissen und Steuerelementen im Hintergrund.
  6. Prüfen Sie beide Ergebniszustände. Suchseiten können vor der Eingabe einer Suchanfrage und nach dem Laden von Ergebnissen unterschiedlich aussehen und funktionieren. Prüfen Sie daher den Leerzustand und den Zustand mit eingegebener Suchanfrage getrennt.
  7. Vergleichen Sie Editor- und Storefront-Ansichten. Die Vorschau kann Ihnen helfen, den Abschnitt frühzeitig einzurichten, aber bestätigen Sie die endgültige Erfahrung dort, wo Live-Inhalte und tatsächliche Ergebnisse angezeigt werden.
  8. Testen Sie beide Viewports. Desktop und Mobilgeräte können sich in Layout, Ausrichtung, Sichtbarkeit und Medienverarbeitung unterscheiden. Stellen Sie daher sicher, dass Steuerelemente und Karten auf beiden Bildschirmgrößen klar bleiben.