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 Merchandising → 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.
- Language: die Sprache der Texte im Widget selbst, etwa Platzhalter, Buttons und Filterüberschriften. Wähle Dutch, English, German, French, Spanish oder Italian, oder lass Shopper's browser (default) stehen. Dann sieht jeder die Sprache seines Browsers, mit Englisch als Rückfall. 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 und CCV Shop landet das Produkt direkt im Warenkorb deines Shops.
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 Data → Products, ob die gewählte Eigenschaft bei deinen Produkten befüllt ist.