Shopify Search&Discovery Erscheinungsbild von ergänzenden Produkten anpassen

[der-farbenonkel]

Hallo zusammen,

Ich möchte gerne bei den ergänzenden Produkten den jeweiligen Hersteller des ergänzenden Produkts und den Grundpreis mit angeben. Momentan wird nur der Name und Preis ausgegeben.

Wie kann man das realisieren?

Vielen Dank für die Hilfe.

[Gabe]

Hey @der-farbenonkel 

Danke für die Frage und du meinst den "Das könnte dir auch gefallen" Abschnitt auf der PDP ist das korrekt?

Um Herstellerinformationen und Grundpreise in den Empfehlungen für ergänzende Produkte mit der Shopify Search & Discovery App anzuzeigen, kannst du die Funktion für benutzerdefinierte Empfehlungen nutzen. In den Einstellungen der App kannst du anpassen, welche Produkteigenschaften in den Empfehlungen auf der Produktdetailseite gezeigt werden. 

Dazu kann es notwendig sein, Metafelder für deine Produkte einzurichten, die den Hersteller und den Grundpreis enthalten, und sicherzustellen, dass diese Informationen in den Produkt-Empfehlungen erscheinen. Mehr dazu und wie du die App genau anpasst, findest du im Shopify Help Center unter dem Abschnitt Shopify Search & Discovery​ (Shopify Help)​.

Wenn es trotzdem nicht so geht wie du es dir vorstellst, und du es DIY im Theme Code mit Metafelder machen möchtest

Um Herstellerinformationen und Grundpreise in den Empfehlungen für ergänzende Produkte auf deiner Shopify-Seite anzuzeigen, kannst du dies tun, indem du Metafelder für die Produkte anlegst und dann die entsprechenden Metafelder-Werte im HTML-Code deiner Seite referenzierst.

Hier die schnellen Schritte, wie du das umsetzen kannst:

1. Metafelder hinzufügen:

   • Gehe in deinem Shopify-Adminbereich zu "Produkte".
   • Wähle ein Produkt aus und scrolle nach unten zum Abschnitt "Metafelder".
   • Lege Metafelder für den Hersteller und den Grundpreis an.
2. HTML-Anpassung:
   • In der Liquid-Vorlage deines Shops müsstest du den Code für die Produktkarten finden.
   • Dort kannst du Liquid-Variablen verwenden, um die Werte der Metafelder auszugeben.
   • Zum Beispiel: {{ product.metafields.namespace.key }} ersetzt du namespace und key mit den entsprechenden Namen deiner Metafelder.
3. Anpassen der 'product-recommendations'-Komponente:
   • Such im HTML-Code nach der Stelle, wo der Produkttitel und der Preis ausgegeben werden.
   • Füge dort die Liquid-Abfragen ein, um Herstellerinformationen und Grundpreis unter dem Produkttitel anzuzeigen.

Um die Herstellerinformationen und den Grundpreis unter dem Produkttitel anzuzeigen, musst du Liquid-Code verwenden, der auf die entsprechenden Metafelder deiner Produkte zugreift. Hier ist ein Beispiel, wie der Liquid-Code aussehen könnte:

<div class="product-metafields">
  <p class="product-vendor">
    Hersteller: {{ product.vendor }}
  </p>
  <p class="product-unit-price">
    Grundpreis: {{ product.metafields.custom_namespace.unit_price.value }} pro {{ product.metafields.custom_namespace.unit_price.unit }}
  </p>
</div>

In diesem Code ist product.vendor ein integriertes Liquid-Objekt, das den Hersteller eines Produkts zurückgibt. Für den Grundpreis verwende ich product.metafields.custom_namespace.unit_price.value und product.metafields.custom_namespace.unit_price.unit, wobei custom_namespace der von dir definierte Namensraum für das Metafeld ist, unit_price der Schlüssel für den Metafeld-Wert des Grundpreises und unit der Schlüssel für die Maßeinheit (z. B. kg, l, usw.)

Diesen Liquid-Code fügst du in die HTML-Struktur deiner Produktkarte an der Stelle ein, wo du diese zusätzlichen Informationen anzeigen möchtest, direkt unter dem Element <div class="card-information">. Bitte denk daran, dass du die custom_namespace, unit_price.value und unit_price.unit entsprechend anpassen musst, damit sie mit den Metafeldern übereinstimmen, die du für deine Produkte definiert hast.

Bitte beachte, dass die genaue Vorgehensweise je nach Theme und vorhandenen Anpassungen in deinem Shopify-Shop variieren kann. Es kann nötig sein, die Dokumentation deines Themes zu konsultieren oder einen Entwickler um Hilfe zu bitten, wenn du nicht vertraut mit der Bearbeitung von Liquid- oder HTML-Code bist.

Wenn du es selber auf deiner Produktseite 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!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.