Liquid, JavaScript, Themes
Hi,
gibt es eine Möglichkeit bei Variantenartikeln, die in der Shop-Suche gesucht werden, einen kleinen Untertext einzufügen? Hier wäre das zum Beispiel: "Weitere Größen erhältlich"
Für eure Hilfe bin ich schonmal vorab dankbar.
Hey @der-farbenonkel
Danke für das Bild und an erster stelle ist es eine Sache des Themes dass du verwendest. Versch. Themes (Free Themes oder Premium Themes) machen das unterschiedlich, wie z. B. wie die Suchergebnisse im Storefront Search angezeigt werden. Unsere Free Themes sind da nicht schlecht, haben aber weinger Features, vor allem im Customer Search.
Du kannst aber deine Suchergebnisse mit unserer Search & Discovery-App anpassen. Die App bietet eine Reihe von Suchfunktionen und Einstellungen, die das Verhalten deiner Onlineshop-Suche ändern. Für erweiterte Anpassungen kannst du deinen Theme-Code bearbeiten, um die Art und Weise zu ändern, wie Suchergebnisse angefordert werden. Weitere Informationen zum Anpassen findest du unter Shopify.dev.
Um die Suchergebnisse in deinem Shopify-Shop anzupassen, kannst du den Theme-Code ändern. Die Shopify Developer Dokumentation erklärt, wie man Suchanfragen durch Query-Parameter anpassen kann, wie das Einbeziehen von Produkttypen, die Anzeige von nicht verfügbaren Produkten und die Aktivierung von teilweisen Wortübereinstimmungen. Du kannst das Suchformular durch ein <form>
-Element mit action="/search"
anpassen und Inputs für jeden Query-Parameter hinzufügen. Für eine präzisere Suche ist auch die Implementierung einer prädiktiven Suche im Theme möglich.
Um weitere Angaben in den Suchergebnissen deines Shopify-Themes anzuzeigen, musst du den Theme-Code anpassen. Dies erfordert Kenntnisse in HTML, Liquid, und eventuell JavaScript. Grundsätzlich beinhaltet das Vorgehen die Anpassung des Suchformulars und der Suchergebnisseite.
Anpassung des Suchformulars: Du kannst das Suchformular bearbeiten, indem du ein <form>
-Element mit action="/search"
in deinen Theme-Code einfügst. Zusätzlich zu einem Standard-Suchfeld kannst du Inputs für spezielle Suchparameter hinzufügen, die deine Suchanfrage genauer steuern.
Bearbeitung der Suchergebnisseite: Die Anzeige der Suchergebnisse wird im Theme-Code unter der Datei für die Suchergebnisseite (oft search.liquid
) gesteuert. Hier kannst du den Liquid-Code anpassen, um zusätzliche Informationen oder spezifische Details zu Produkten anzuzeigen. Dies kann das Hinzufügen von zusätzlichen Produktattributen, Beschreibungen oder Metafeldern beinhalten.
Weitere Informationen findest du in der Shopify Developer Dokumentation: Storefront search.
Für die spezifische Implementierung eines kleinen Buttons oder einer Infobox, wie von einem Nutzer in der Shopify-Community diskutiert, wäre es notwendig, ein wenig JavaScript oder Liquid-Code in deine Produktvorlage einzubauen. Ein Beispiel hierfür wäre ein kleiner "Info"-Button, der bei Klick eine Infobox mit weiteren Details zu den Varianten öffnet.
Du kannst z. B. den Liquid-Code innerhalb des {% for item in search.results %}
Blocks anpassen. Dieser Block steuert, wie jedes Suchergebnis dargestellt wird. Hier einige Schritte, die du folgen kannst:
Erweitere den {% for item in search.results %}
Block: Innerhalb dieses Blocks kannst du zusätzliche Produktinformationen hinzufügen, wie z.B. Varianten, Preise, Verfügbarkeit oder spezielle Tags.
Verwende Liquid Variablen und Filter: Du kannst auf verschiedene Produktattribute zugreifen und diese mit Liquid Variablen anzeigen. Zum Beispiel item.price
, item.available
oder item.tags
.
Benutzerdefinierte Felder oder Metafields: Falls du zusätzliche Daten, die nicht standardmäßig verfügbar sind, anzeigen möchtest, kannst du auf Metafields oder benutzerdefinierte Felder zurückgreifen.
Anpassen des Layouts und Stils: Neben den Daten selbst, kannst du auch das HTML/CSS Layout des Suchergebnisses anpassen, um die Präsentation der Daten zu verbessern.
Denke daran, bei Anpassungen vorsichtig zu sein, um keine bestehenden Funktionen zu beeinträchtigen. Teste alle Änderungen in einer Vorschau oder in einem Entwicklungsthema, bevor du sie auf dein Live-Theme anwendest.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Wenn du Hilfe bei der Anpassung der Suche in deinem Shop benötigst, kannst du einen Shopify-Partner engagieren. Erhalte mehr Informationen über das Engagieren unserer zertifizierten und deutschen Shopify-Partnern.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024