Nährwerttabelle (HTML-Code-Tabelle) als Metafeld (Rich-Text) dardstellen

[JSIM]

Hallo zusammen,

ich habe folgendes Problem zu lösen:

Ich will in Zukunft Sportnahrung und Supplements vertreiben, mein Plan war auf der Produktseite einen ausklappbaren Reiter mit einem Metafeld anzulegen in dem eine Nährwerttabelle dargestellt wird.

Nur leider wird die Tabelle unformatiert dargestellt und die Werte nur hintereinander geschrieben ohne Zeilen und Spalten anzuzeigen...

Momentan habe ich die Nährwerttabelle noch in der Beschreibung dargestellt da dort die HTML-Formatierung gut funktioniert nur leider ist das optisch nicht so schön und erschlägt den Kunden mit Informationen.

Ich habe schon einige Metafelder ausprobiert und dachte die Formatierung Rich-Text bei Metafeldern könnte das gleiche wie der Rich-Text in der Produktbeschreibung...

Gibt es eine Möglichkeit eine Nährwerttabelle in einem Metafeld anzuzeigen?

Danke schonmal im vorraus!

[Gabe · Accepted solution]

Hey @JSIM 

Danke für die Frage und Nährwerttabelle, oder Größentabellen usw. sind sehr wichtige Tabellen-Information für die Kunden, um weitere Informationen über die Produkte zu erhalten.

HTML wird in manchen ("Rich Text") Metafelder in der Tat nicht übernommen, nur normaler Text mit Fett, Kursiv, und Link. Somit werden HTML Tags wie <ul> und <li> usw. nicht übernommen. Eine Lösung wäre es die Nährwerttabelle als Bild Datei zum Metafeld zu fugene und das gehe ich unten ein.

Oder einen Benutzerdefiniertes Liquid Abschnitt auf der Produktseite zu verwenden. Hier ein Beispiel wie ich die PayMent icons eingebungen habe:

Bestimmte Metafields erlauben in der Tat nur formatierte Texte. Man kann eine Dateireferenz als Wert zum Feld hinzufügen wie man hier lesen kann. Siehe Schritte hier:

1. Gehe im Shopify-Adminbereich zu dem Teil deines Shops, dem du einen Metafeldwert hinzufügen möchtest, zum Beispiel einem bestimmten Produkt, einer bestimmten Kategorie oder einem bestimmten Kunden.

2. Klicke auf das Metafeld "Dateireferenz" und dann auf Bild auswählen oder Datei auswählen.

3. Optional: Um eine Datei von deinem Gerät hochzuladen, klicke auf Bild hochladen oder Datei hochladen. Wähle eine Datei auf deinem Gerät aus und klicke dann auf Öffnen.

4. Wähle die Datei aus, die du hinzufügen möchtest, und klicke dann auf Fertig.

5. Optional: Um ALT-Text zu einem Bild hinzuzufügen, klicke auf das Vorschaubild, gib eine Beschreibung in das Feld Alt-Text ein und klicke dann auf Fertig.

6. Klicke auf Speichern.

Dein Theme bietet ggf. auch Collapsible Tabs an wie ich jetzt in meinem eigene Testshop getestet habe. Könnten diese für eure Nährwerttabellen geeignet sein? Diese Tabs kann man auch mit den obigen Metafelder ergänzen:

Es kann auch sein, dass wenn man ein Collapsible Tab auswählt, es dann das Meta-Feld mit der Datei nicht anzeigt, sondern nur Metafeld Titel, oder Metafeld Text. 

Das würde folgendermaßen funktionieren:

• Unter Onlineshop -> Seiten erstellt Du eine Seite mit dem Titel "Nährwerttabelle".
• Auf dieser Seite baust Du mithilfe des Texteditors deine Tabelle.
• Im Theme-Editor gehst Du dann auf die Produktseite und fügst einen neuen Produkt-Abschnitt hinzu -> Seite -> "Nährwerttabelle".
• Wenn Du dann auf das Element gehst, kannst Du (wahrscheinlich rechts) eine Seite auswählen, welche den Inhalt der Nährwerttabelle enthält.

Wie wäre es mit einer Nährwerttabelle als Popup Lightbox?

Eine tolle Customer Experience kannst du anbieten mit einer Nährwerttabelle als Lightbox Popup in der Produktbeschreibung und die Clean Size Charts App kann das für euch. Gerne kann ich dir etwas Coding Tipps dafür geben falls du das DIY machen möchtest. Hier ist ein Beispiel einer Grössentabelle, man kann das aber genauso mit einer Nährwerttabelle machen:

Hoffe da ist was für euch dabei! 😉

----
Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

[JSIM]

Hey @Gabe,

Vielen dank für die Optionen und deren ausführlichen Beschreibungen!

Ich schau mir mal genau an welche Option für mich die beste zu sein scheint.