Pop-up-Größentabelle zu Produktseiten hinzufügen

Metafelder helfen dir dabei, die Funktionalität und das Erscheinungsbild deines Shopify-Shops anzupassen, indem sie es dir ermöglichen, spezielle Informationen zu speichern, die normalerweise nicht im Shopify-Adminbereich erfasst werden. Metafelder können intern in deinem Shopify-Adminbereich verwendet werden und du kannst sie auch in deinem Onlineshop anzeigen.

Mit Metafeldern kannst du einem Pop-up-Block einen Seitenverweis hinzufügen, der einen Link auf deinen Produktseiten anzeigt. Wenn du auf den Link klickst, wird ein Pop-up geöffnet, das den Inhalt deiner Seite anzeigt. Du kannst Bilder und andere Medien über den Rich-Text-Editor für deine Seiten hinzufügen.

Im Folgenden findest du einige Beispiele für Pop-up-Informationen, die du deinen Produktseiten hinzufügen könntest:

Größentabellen
Pflegehinweise
Montageanleitungen
Produktspezifikationen
Häufig gestellte Fragen

Dies ist ein Tutorial in 4 Schritten, das die folgenden Themen behandelt: Seitenverweis-Metafelder, Erstellen eines Produkt-Metafelds für einen Seitenverweis, Erstellen einer Produktseitenvorlage für deinen Onlineshop, Hinzufügen einer neuen Seite, Verweisen auf die Seite in bestimmten Produkten und Anwenden der Produktseitenvorlage auf bestimmte Produkte. Du kannst dieses Tutorial verwenden, um beliebige Inhalte im Pop-up zu erstellen. In diesem Tutorial wird durchgehend das Beispiel der Größentabelle verwendet.

Für dieses Tutorial ist ein Theme erforderlich, das dynamische Quellen unterstützt. Wenn du ein Vintage-Theme verwendest oder Metafeldtypen hinzufügen möchtest, die von deinem Theme nicht unterstützt werden, kannst du deinen Theme-Code bearbeiten oder eine:n Shopify-Partner:in engagieren.

Auf dieser Seite

Schritt 1: Ein Produkt-Metafeld für eine Seite erstellen

Zuerst musst du eine Metafeld-Definition für einen Seitenverweis für deine Produktseiten erstellen. Das Produkt-Metafeld verlinkt auf eine bestimmte Seite und kann für jedes Produkt angepasst werden. Wenn du einem Produkt, das dieselbe Vorlage verwendet, keinen Seitenverweis hinzufügst, wird dein Pop-up-Linktext trotzdem so angezeigt, als ob Inhalt vorhanden wäre. Damit der Pop-up-Link nur bei bestimmten Produkten angezeigt wird, kannst du eine Produktvorlage erstellen und diese nur auf die relevanten Produkte anwenden.

Mit Seitenverweis-Metafeldern kannst du unterschiedliche Produktinformationen anzeigen, indem du unterschiedliche Seiten für unterschiedliche Produkttypen erstellst. Du kannst beispielsweise zwei verschiedene Größentabellenseiten für zwei verschiedene Altersgruppen erstellen, z. B. eine Größentabelle für Kleinkinder und eine für Säuglinge, und dann den Seitenverweis für Kleinkindergrößen nur zu Produkten für Kleinkinder hinzufügen.

Du musst eine Metafeld-Definition für einen Seitenverweis erstellen, um sie mit dem Pop-up-Block in deinem Theme-Editor zu verbinden. Der Storefront-Zugriff ist standardmäßig ausgewählt, wenn du deine Metafeld-Definition erstellst.

Schritte:

Desktop

Gehe in deinem Shopify-Adminbereich zu Einstellungen > Metafelder und Metaobjekte.
Klicke im Abschnitt Metafeld-Definitionen auf Produkte.
Klicke auf Definition hinzufügen.
Gib im Feld Name Größentabelle ein.
Klicke auf ⊕ Typ auswählen.
Wähle im Dropdown-Menü Seite aus. Eine Seite ist standardmäßig ausgewählt.
Klicke auf Speichern.

Mobil

Tippe in der Shopify app auf und dann auf „Einstellungen“.
Tippe im Bereich „Shop-Einstellungen“ auf „Metafelder und Meta-Objekte“.
Tippe im Abschnitt Metafeld-Definitionen auf Produkte.
Tippe auf +.
Gib im Feld Name Größentabelle ein.
Tippe auf + Typ auswählen.
Tippe, um im Dropdown-Menü Seite auszuwählen. Eine Seite ist standardmäßig ausgewählt.
Tippe auf Speichern oder ✓.

Schritt 2: Deine Produktseitenvorlage erstellen

Nachdem du einen Abschnitt oder Block hinzugefügt hast, kannst du ein Metafeld auswählen, indem du auf das Symbol für die dynamische Quelle klickst:

Symbol zum Verbinden der dynamischen Quelle

Wenn du den Popup-Link für die Größentabelle nicht zu all deinen Produkten hinzufügen möchtest, musst du eine neue Produktseitenvorlage erstellen. In den folgenden Schritten erstellst du eine neue Produktseitenvorlage, du kannst stattdessen aber auch eine vorhandene Produktseitenvorlage zum Anpassen auswählen.

Schritte:

Desktop

Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Klicke oben im Editor im Dropdown-Menü Startseite auf Produkte und dann auf ⊕ Vorlage erstellen, um eine neue Vorlage zu erstellen und anzupassen.
Gehe in der Navigations-Seitenleiste für Abschnitte zu den Blöcken Vorlage > Produktinformationen und klicke dann auf ⊕ Block hinzufügen.
Klicke auf Popup.
Gib in das Feld Link-Bezeichnung Größentabelle ein. Dies ist der Text, der angezeigt wird und auf den Kund:innen klicken, um den Inhalt der Popup-Seite aufzurufen.
Klicke neben Seite auf das Symbol für die dynamische Quelle und wähle dann das von dir erstellte Seitenreferenz-Metafeld aus.
Klicke auf Speichern.

Mobil

Tippe in der Shopify app auf das Symbol .
Tippe im Bereich „Vertriebskanäle“ auf „Onlineshop“ > „Alle Themes verwalten“.
Tippe bei dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Tippe oben im Editor im Dropdown-Menü Startseite auf Produkte und dann auf ⊕ Vorlage erstellen, um eine neue Vorlage zu erstellen und anzupassen.
Gehe in der Navigations-Seitenleiste für Abschnitte zu den Blöcken Vorlage > Produktinformationen und tippe dann auf ⊕ Block hinzufügen.
Tippe auf Popup.
Gib in das Feld Link-Bezeichnung Größentabelle ein. Dies ist der Text, der angezeigt wird und auf den Kund:innen klicken, um den Inhalt der Popup-Seite aufzurufen.
Tippe neben Seite auf das Symbol für die dynamische Quelle und wähle dann das von dir erstellte Seitenreferenz-Metafeld aus.
Tippe auf Speichern oder ✓.

Schritt 3: Eine Seite mit deiner Größentabelle hinzufügen

Du musst eine Seite mit dem Inhalt der Größentabelle erstellen, auf die das Metafeld verweist. Wenn du bereits eine Seite erstellt hast, kannst du mit Schritt 4 fortfahren.

Schritte:

Desktop

Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.
Klicke auf Seite hinzufügen.
Gib in das Feld Titel den Text Größentabelle ein und füge dann unter Inhalt die Informationen zur Größentabelle hinzu.
Stelle die Seite im Abschnitt Sichtbarkeit auf Sichtbar ein.
Klicke auf Speichern.

Mobil

Tippe in der Shopify app auf das Symbol .
Tippe im Abschnitt Vertriebskanäle auf Onlineshop > Seiten.
Tippe auf Seite hinzufügen.
Gib in das Feld Titel den Text Größentabelle ein und füge dann unter Inhalt die Informationen zur Größentabelle hinzu.
Stelle die Seite im Abschnitt Sichtbarkeit auf Sichtbar ein.
Tippe auf Speichern oder ✓.

Du kannst beliebig viele Seiten mit Größentabellen erstellen, auf die im Metafeld verwiesen wird. Du kannst im Produkt-Metafeld jedoch nur eine Seite verknüpfen.

Schritt 4: Auf die Seite verweisen und die Produktvorlage auf bestimmte Produkte anwenden

Wenn du einem bestimmten Produkt eine Seitenreferenz hinzufügst, werden die Informationen von dieser Seite nur bei diesem Produkt angezeigt. Wenn du die Seitenreferenz für ein Produkt, das diese Produktvorlage verwendet, leer lässt, wird der Linktext trotzdem als Link angezeigt. Das Popup ist dann jedoch leer, da keine Seitenreferenz vorhanden ist, was deine Kundschaft verwirren könnte. Du kannst eine Produktseitenvorlage für bestimmte Produkttypen mit Größentabellen (z. B. Kleidung oder Schuhe) und eine andere Produktvorlage für andere Produkttypen (z. B. Kinderspielzeug oder Schmuck und andere Accessoires) verwenden.

Mehr Informationen über Vorlagen.

Schritte:

Desktop

Gehe in deinem Shopify-Adminbereich zu Produkte.
Klicke auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
Klicke im Abschnitt Produkt-Metafelder auf die Seitenreferenz Größentabelle, klicke dann auf Seiten auswählen und wähle die Seite Größentabelle aus.
Wähle im Abschnitt Theme-Vorlage die Produktseitenvorlage Größentabelle aus, die du in Schritt 2 erstellt hast.
Klicke auf Speichern.

Mobil

Tippe in der Shopify App auf das -Symbol .
Tippe auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
Tippe im Abschnitt Produkt-Metafelder auf die Seitenreferenz Größentabelle, tippe dann auf Seiten auswählen und wähle die Seite Größentabelle aus.
Wähle im Abschnitt Theme-Vorlage die Produktseitenvorlage Größentabelle aus, die du in Schritt 2 erstellt hast.
Tippe auf Speichern oder ✓.

Du kannst diese Schritte für beliebig viele Produkte wiederholen.