Deine Suche gestalten

Die Suche soll sich wie ein Teil deines Shops anfühlen, nicht wie ein Plugin. Übernimm deine Farben und deine Schrift, lege fest, was jede Produktkarte zeigt, und setz Badges, die Kunden auf Angebote und Neuheiten hinweisen.

Öffne Live on your store → Search, wähle eine Konfiguration und geh zu Configure → Design & Styling. Das Such-Widget steht live neben dem Editor, so siehst du jede Änderung sofort.

Branding

Du legst vier Farben fest, alle weiteren Abstufungen berechnet bluebarry selbst:

• Button and highlight color: Buttons, aktive Zustände und Hervorhebungen. Meist deine Markenfarbe.
• Background: der Hintergrund des Suchfensters.
• Text: Haupttext und Icons.
• Button text color: Text auf Buttons und anderen Elementen in deiner Akzentfarbe. Wähl eine Farbe, die darauf gut lesbar ist.

Mit einem Logo (PNG oder SVG) erscheint es in der Suchleiste. Das ist optional.

Form und Schrift

• Corner radius (Eckenradius): Sharp, Rounded oder Extra rounded, für Produktbilder und Labels. Orientier dich an den Buttons und Karten deines Themes.
• Font: Durchsuche den Google-Fonts-Katalog oder die gängigen Systemschriften nach der Schrift deines Shops, oder lass System default stehen.
• Currency: die Währung, in der Preise erscheinen. Hat dein Shop Märkte, zeigt die Suche die Währung des jeweiligen Markts und diese Einstellung entfällt.
• Language: die Sprache der Texte im Widget selbst, etwa Platzhalter, Buttons und Filterüberschriften. Wähle Dutch, English, German, French, Spanish, Italian, Swedish, Romanian oder Polish, oder lass Shopper's browser (default) stehen. Dann sieht jeder die Sprache seines Browsers, mit Englisch als Rückfall. Hat dein Shop Märkte, spricht das Widget stattdessen die Sprache der Seite und diese Einstellung entfällt. Produktnamen und Beschreibungen bleiben so, wie sie in deinem Katalog stehen.
• Image hover effect: was passiert, wenn jemand mit der Maus über ein Produktbild fährt. None, Show second image (zweites Bild zeigen), Cycle through images (Bilder durchwechseln) oder Zoom in. Das gilt nur am Desktop. Smartphones zeigen das erste Bild.

Die Produktkarte

Jedes Produkt erscheint in der Suche als Karte. Diese Einstellungen bestimmen, was darauf steht. Die meisten verweisen auf eine Produkteigenschaft: Du wählst, welches Feld in deinem Katalog Preis, Lagerbestand oder Bewertung enthält.

Preis und Lagerbestand

• Price property: der Preis auf der Karte. None blendet Preise aus.
• Compare-at price property: der Preis vor dem Rabatt, durchgestrichen dargestellt, wenn er vom Preis abweicht.
• Stock property: der Lagerbestand. Bei 0 oder weniger gilt ein Produkt als ausverkauft.

Preis- und Lagereigenschaft steuern auch die Filter für Preis und Verfügbarkeit, siehe Suchergebnisse und Filter einrichten.

Preisanzeige und Mehrwertsteuer

Du verkaufst an Geschäftskunden oder in einem Markt, in dem Nettopreise üblich sind? Wähle unter Show on cards Incl. VAT only (nur brutto), Incl. and excl. VAT (brutto und netto) oder Excl. VAT only (nur netto). Sobald du Nettopreise zeigst, wählst du eine Excl. VAT property, die den Nettopreis enthält, oder gibst eine VAT rate für den ganzen Katalog ein. Currency sign schaltet das €-Zeichen oder ein anderes Währungszeichen für alle Preise in der Suche ein oder aus.

Bilder, Bewertungen und Varianten

• Additional images: eine Eigenschaft mit weiteren Bild-URLs pro Produkt. Die Hover-Effekte nutzen diese Bilder.
• Reviews: Wähle eine Rating property und eine Review count property, um Sterne auf jeder Karte zu zeigen.
• Variants: Schalte Show variants ein, um Farb- oder Stil-Swatches auf jeder Karte zu zeigen.

Schnell in den Warenkorb

Mit Quick add button bekommt jede Karte einen Button „In den Warenkorb“. So kaufen Kunden, ohne die Suche zu verlassen. Produkte, bei denen noch eine Wahl nötig ist, etwa eine Größe, öffnen stattdessen die Produktseite. Bei Shopify, WooCommerce, CCV Shop und Magento landet das Produkt direkt im Warenkorb deines Shops.

Produktdetails auf der Karte

Zeige Produktdetails auf jeder Karte, etwa die Marke über dem Titel, Größe oder Material darunter oder die Lieferzeit unter dem Preis. Produktdetails gehören zu einem Storefront-Profil und erscheinen deshalb in den Suchergebnissen und auf den Kollektionsseiten, die es nutzen. Öffne Store data → Storefront profiles, öffne ein Profil und gehe zu Product cards. Wähle unter Card properties eine Eigenschaft bei Add a property to the card. Jede Eigenschaft funktioniert: Text, Zahlen, Listen und Ja/Nein-Eigenschaften. Danach wählst du:

• Position: Above title, Below title oder Below price.
• Style: Text zeigt den Wert, Label: value stellt das Label davor, und Pills setzt jeden Wert in eine eigene Pille, ideal für Listen wie Größen.
• Label: der Name, den Kunden sehen. Eine Ja/Nein-Eigenschaft zeigt ihr Label bei den Produkten, bei denen sie Ja ist. Eine Eigenschaft „Vegan“ zeigt also „Vegan“ auf veganen Produkten und nichts auf den anderen.
• Format: Text rund um den Wert, mit {value} an der Stelle des Werts. {value} ml zeigt also „500 ml“.
• Text color und, bei Pills, Pill color. Reset stellt die Farben des Widgets wieder her.

Mit den Pfeilen änderst du die Reihenfolge. Jede Eigenschaft belegt eine Zeile, und ein Produkt ohne Wert behält eine leere Zeile, damit Preise und Buttons in einer Reihe auf einer Höhe bleiben. Labels und Formate werden mit den übrigen Suchtexten übersetzt. Entwickler können eine einzelne Eigenschaft mit eigenem CSS gestalten: Jede trägt ihren Namen, wie in .sb-product-prop[data-property="marke"].

Badges

Badges sind kleine Labels oben links auf einer Produktkarte. Klicke auf Add badge und wähle einen Type:

• Sale: erscheint auf reduzierten Produkten. Mit Minimum discount % zeigst du es nur bei echten Angeboten (0 zeigt es bei jedem Rabatt). Schreib {discount} ins Label, um den Prozentsatz zu zeigen: Aus -{discount}% wird „-20%“.
• Tag: erscheint auf Produkten mit den gewählten Tags, etwa „Neu“ oder „Bestseller“.
• Sold out: erscheint auf Produkten mit Lagerbestand 0 oder weniger. Produkte ohne Lagerwert gelten als vorrätig.

Wähle Background color und Text color und prüf das Ergebnis in der Live preview. Du möchtest Badges, die davon abhängen, wer gerade einkauft, etwa „Für trockene Haut“? Das sind personalisierte Badges, siehe Suchergebnisse personalisieren.

Eigenes CSS

Die Einstellungen oben reichen für die meisten Shops. Wenn du oder dein Entwickler weiter gehen wollt, gibt es zwei CSS-Felder: Search box CSS für das Dropdown und Results page CSS für die Ergebnisseite. Dein CSS lädt nach unserem, einfache Regeln gewinnen also ohne !important.

Die Suche läuft in einer eigenen, abgeschirmten Ebene auf deiner Seite. Das CSS deines Themes kann sie also nicht versehentlich zerschießen, und diese Felder sind der Weg, sie zu gestalten. bluebarry pflegt eine Reihe stabiler Klassennamen, die alle mit sb- beginnen und auf die sich Entwickler auch nach Updates verlassen können. Klassen mit sb-i- sind intern und können sich jederzeit ändern. Lass die also besser in Ruhe.

Gut zu wissen

• Änderungen speichern automatisch. Im Schritt Preview prüfst du das Ergebnis auf Desktop und Mobil, oder du öffnest es in deinem eigenen Shop, ohne dass Kunden es sehen, siehe Suche einrichten.
• Zeigt eine Karte keinen Preis oder keine Sterne, prüf unter Store data → Products, ob die gewählte Eigenschaft bei deinen Produkten befüllt ist.