Hey @mk798
Das klingt wie ein tolle Idee und Good News - ich habe zwei Apps mit denen du das sofort einrichten kannst. Siehe die App demos hier und auch hier.
Wenn du es lieber DIY machen möchtest:
Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um ein “Verified” Icon vor einer bestimmten Textzeile auf der Shopify-Produktseite hinzuzufügen und Metafields zu verwenden, kannst du die folgenden Schritte ausführen:
- Erstelle zunächst ein neues Metafield für das Produkt. Gehe dazu in das gewünschte Produkt im Admin und fuge das Bild Metafeld hinzu
Gebe beispielsweise als Namespace “product” und als Schlüssel “verified_text” ein und füge einen gewünschten Text mit dem “Verified” Symbol hinzu.
Um das Symbol vor der Textzeile einzufügen, suche im Theme Code die Datei “product.liquid” oder “product-template.liquid” im Ordner “sections” (je nach Theme).
Suche die Stelle im Code, an der die Textzeile angezeigt wird, vor der du das “Verified” Icon einfügen möchtest. Füge direkt davor einen Liquid-Code wie den folgenden ein:
{% if product.metafields.product.verified_text %}
{{ product.metafields.product.verified_text | escape }}
{% endif %}
Dieser Code überprüft, ob das Metafield “verified_text” für das Produkt vorhanden ist, und fügt den Inhalt des Metafields, einschließlich des “Verified” Icons, in einem HTML-Element mit der Klasse “verified-icon” ein. Um das Icon zu gestalten, füge entsprechenden CSS-Code zum CSS Editor im Theme hinzu. Zum Beispiel:
.verified-icon {
font-size: 14px;
color: #4caf50; /* oder eine andere Farbe Ihrer Wahl */
margin-right: 5px;
}
Passe den CSS-Code an, um das Aussehen des Icons zu ändern. Durch diesen Ansatz wird das “Verified” Icon nur vor der Textzeile angezeigt, die dem “verified_text” Metafield zugeordnet ist. Um das Icon für verschiedene Textzeilen anzuzeigen, kann man für jedes Produkt ein individuelles Metafield erstellen und den Liquid-Code entsprechend anpassen.
