Pop-up mit Metafeldern zu deinen Produktseiten hinzufügen
Mit Metafeldern kannst du die Funktionalität und das Erscheinungsbild deines Shopify-Shops anpassen, indem du spezielle Informationen speichern kannst, die normalerweise nicht im Shopify-Adminbereich erfasst werden. Metafelder können intern in deinem Shopify-Adminbereich verwendet werden. Du kannst auch auswählen, ob diese in deinem Onlineshop angezeigt werden sollen.
Mit Metafeldern kannst du eine Seitenreferenz zu einem Pop-up-Block hinzufügen, die einen Link auf deinen Produktseiten anzeigt. Wenn darauf geklickt wird, öffnet der Link ein Pop-up-Fenster, das den Inhalt deiner Seite anzeigt. Du kannst mit dem Rich-Text-Editor Bilder und andere Medien zu deinen Seiten hinzufügen.
Im Folgenden findest du einige Beispiele für Pop-up-Informationen, die du zu deinen Produktseiten hinzufügen kannst:
- Größentabellen
- Pflegeanweisungen
- Montageanweisungen
- Produktspezifikationen
- Häufig gestellte Fragen
In diesem 4-Schritte-Tutorial wird auf Metafelder für Seitenreferenzen, das Erstellen eines Produkt-Metafelfelds für eine Seitenreferenz, das Erstellen von Produktseitenvorlagen für deinen Onlineshop, das Hinzufügen einer neuen Seite, das Verweisen auf die Seite bei bestimmten Produkten und das Anwenden der Produktseitenvorlage auf bestimmte Produkte eingegangen.
Wenn du ein Onlineshop 2.0-Theme verwendest, kannst du die meisten Metafelder über den Theme-Editor mit deinem Theme verbinden. Wenn du ein Vintage-Theme verwendest oder Metafeld-Typen hinzufügen möchtest, die von deinem Theme nicht unterstützt werden, kannst du deinen Theme-Code bearbeiten oder einen Shopify-Partner engagieren.
Auf dieser Seite
Schritt 1: Produkt-Metafeld für eine Seite erstellen
Erstelle zunächst eine Seitenreferenz-Metafeld-Definition für deine Produktseiten. Das Produkt-Metafeld verweist auf eine bestimmte Seite und kann für jedes Produkt individuell angepasst werden. Wenn du keine Seitenreferenz zu einem Produkt hinzufügst, das dieselbe Vorlage verwendet, wird der Text deines Pop-up-Links weiterhin so angezeigt, als gäbe es einen Inhalt. Um den Pop-up-Link nur bei bestimmten Produkten anzuzeigen, kannst du eine Produktvorlage erstellen und diese nur auf relevante Produkte anwenden.
Mit Seitenreferenz-Metafeldern kannst du unterschiedliche Produktinformationen anzeigen, indem du verschiedene Seiten für verschiedene 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 die Seitenreferenz für Kleinkindergrößen nur zu Produkten hinzufügen, die für Kleinkinder bestimmt sind.
Du musst eine Metafeld-Definition für eine Seitenreferenz erstellen, um sie mit dem Pop-up-Block in deinem Theme-Editor zu verbinden. Der Storefront-Zugriff wird standardmäßig ausgewählt, wenn du deine Metafeld-Definition erstellst.
Schritte:
- Gehe in deinem Shopify-Adminbereich zu Einstellungen > Benutzerdefinierte Daten.
- Klicke im Abschnitt Metafeld-Definitionen auf Produkte.
- Klicke auf Definition hinzufügen.
- Gib der Metafeld-Definition im Feld Name einen Namen. Wenn du beispielsweise eine Größentabelle erstellst, kannst du die Definition zum Beispiel Größentabelle nennen.
- Klicke auf ⊕ Typ auswählen.
- Wähle im Dropdown-Menü Seite aus. Standardmäßig wird Eine Seite ausgewählt.
- Klicke auf Speichern.
- Tippe in der Shopify-App auf … > Einstellungen.
- Tippe auf Benutzerdefinierte Daten.
- Tippe im Abschnitt Metafeld-Definitionen auf Produkte.
- Tippe auf +.
- Benenne die Definition. Wenn du beispielsweise eine Größentabelle erstellst, kannst du die Definition zum Beispiel Größentabelle nennen.
- Tippe auf + Typ auswählen.
- Tippe, um im Dropdown-Menü Seite auszuwählen. Standardmäßig wird Eine Seite ausgewählt.
- Tippe auf Speichern.
- Tippe in der Shopify-App auf ☰ > Einstellungen.
- Tippe auf Benutzerdefinierte Daten.
- Tippe im Abschnitt Metafeld-Definitionen auf Produkte.
- Tippe auf +.
- Benenne die Definition. Wenn du beispielsweise eine Größentabelle erstellst, kannst du die Definition zum Beispiel Größentabelle nennen.
- Tippe auf + Typ auswählen.
- Tippe, um im Dropdown-Menü Seite auszuwählen. Standardmäßig wird Eine Seite ausgewählt.
- Tippe zum Speichern auf ✓.
Schritt2 : Produktseitenvorlage erstellen
Wenn du ein Onlineshop 2.0-Theme verwendest, kannst du Seitenreferenz über den Theme-Editor mit deinem Theme verbinden. Wenn du ein Vintage-Theme verwendest oder Metafeld-Typen hinzufügen möchtest, die von deinem Theme nicht unterstützt werden, kannst du deinen Theme-Code bearbeiten oder einen Shopify-Partner engagieren.
Nachdem du einen Abschnitt oder einen Block hinzugefügt hast, kannst du ein Metafeld auswählen, indem du auf das Symbol für die dynamische Quelle klickst:
Wenn du den Pop-up-Block nicht zu allen deinen Produkten hinzufügen möchtest, musst du eine neue Produktseitenvorlage erstellen. Mit diesen Schritten erstellst du eine neue Produktseitenvorlage. Du kannst jedoch auch eine vorhandene Produktseitenvorlage auswählen und diese stattdessen anpassen.
Schritte:
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Klicke im Dropdown-Menü Startseite, das du oben im Editor findest, auf Produkte und anschließend auf ⊕ Vorlage erstellen, um eine neue Vorlage zu erstellen und anzupassen.
- Gehe in der Navigationsseitenleiste "Abschnitte" zu den Blöcken Vorlage > Produktinformationen und klicke auf ⊕ Block hinzufügen.
- Klicke auf Pop-up.
- Gib ein Link-Label ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen. Wenn die Pop-up-Seite beispielsweise eine Größentabelle ist, sollte das Link-Label möglicherweise die Bezeichnung Größentabelle anzeigen.
- Klicke neben Seite auf das Symbol für die dynamische Quelle und klicke dann erneut, um das von dir erstellte Seitenreferenz-Metafeld auszuwählen.
- Klicke auf Speichern.
- Tippe in der Shopify-App auf … > Onlineshop.
- Tippe auf Alle Themes verwalten.
- Tippe neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Tippe im Dropdown-Menü Startseite, das du oben im Editor findest, auf Produkte und anschließend auf ⊕ Vorlage erstellen, um eine neue Vorlage zu erstellen und anzupassen.
- Gehe in der Navigationsseitenleiste "Abschnitte" zu den Blöcken Vorlage > Produktinformationen und tippe auf ⊕ Block hinzufügen.
- Tippe auf Pop-up.
- Gib ein Link-Label ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen. Wenn die Pop-up-Seite beispielsweise eine Größentabelle ist, sollte das Link-Label möglicherweise die Bezeichnung Größentabelle anzeigen.
- Tippe neben Seite auf das Symbol für die dynamische Quelle und tippe dann erneut, um das von dir erstellte Seitenreferenz-Metafeld auszuwählen.
- Tippe auf Speichern.
- Tippe in der Shopify-App auf ☰ > Onlineshop.
- Tippe auf Alle Themes verwalten.
- Tippe neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Tippe im Dropdown-Menü Startseite, das du oben im Editor findest, auf Produkte und anschließend auf ⊕ Vorlage erstellen, um eine neue Vorlage zu erstellen und anzupassen.
- Gehe in der Navigationsseitenleiste "Abschnitte" zu den Blöcken Vorlage > Produktinformationen und tippe auf ⊕ Block hinzufügen.
- Tippe auf Pop-up.
- Gib ein Link-Label ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen. Wenn die Pop-up-Seite beispielsweise eine Größentabelle ist, sollte das Link-Label möglicherweise die Bezeichnung Größentabelle anzeigen.
- Tippe neben Seite auf das Symbol für die dynamische Quelle und tippe dann erneut, um das von dir erstellte Seitenreferenz-Metafeld auszuwählen.
- Tippe auf ✓, um dein Theme zu speichern.
Schritt 3: Seite mit deinen Produktinformationen hinzufügen
Du musst eine Seite mit Inhalt erstellen, auf die das Metafeld verweist. Wenn du bereits eine Seite erstellt hast, kannst du diesen Schritt überspringen und mit Schritt 4 fortfahren.
Schritte:
- Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.
- Klicke auf Seite hinzufügen.
- Benenne deine Seite und erstelle den Inhalt, den du in einem Pop-up-Fenster auf deiner Produktseite anzeigen möchtest.
- Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
- Klicke auf Speichern.
- Tippe in der Shopify-App auf … > Onlineshop.
- Tippe auf Seiten.
- Tippe auf Seite hinzufügen.
- Benenne deine Seite und erstelle den Inhalt, den du in einem Pop-up-Fenster auf deiner Produktseite anzeigen möchtest.
- Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
- Tippe auf Speichern.
- Tippe in der Shopify-App auf ☰ > Onlineshop.
- Tippe auf Seiten.
- Tippe auf Seite hinzufügen.
- Benenne deine Seite und erstelle den Inhalt, den du in einem Pop-up-Fenster auf deiner Produktseite anzeigen möchtest.
- Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
- Tippe zum Speichern auf ✓.
Du kannst so viele Seiten erstellen, auf die du mit dem Metafeld verweisen kannst, wie du benötigst. Du kannst jedoch nur eine Seite im Produkt-Metafeld verlinken.
Schritt 4: Auf die Seite verweisen und Produktvorlage auf bestimmte Produkte anwenden
Wenn du eine Seitenreferenz zu einem bestimmten Produkt hinzufügst, werden die Informationen auf dieser Seite nur für dieses Produkt angezeigt. Wenn du die Seitenreferenz für ein Produkt leer lässt, das diese Produktvorlage verwendet, wird der Link-Text dennoch als Link angezeigt. Das Pop-up-Fenster ist ohne Seitenreferenz jedoch leer und kann bei deinen Kunden Verwirrung stiften. In diesem Fall kannst du eine andere Produktseitenvorlage für bestimmte Produkttypen verwenden. Du kannst beispielsweise eine Produktvorlage für Bekleidung mit der Größentabellenseite in deinem Pop-up-Block erstellen und dann eine Produktvorlage für Taschen erstellen, bei denen du den Pop-up-Block nicht hinzufügen musst.
Erfahre mehr über Vorlagen.
Schritte:
- Gehe im Shopify-Adminbereich zu Produkte.
- Klicke auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
- Klicke im Abschnitt Produkt-Metafelder auf das von dir erstellte Seitenreferenz-Metafeld und anschließend auf Seiten auswählen.
- Wähle aus dem Dropdown-Menü die Seite aus, die du erstellt hast.
- Wähle im Abschnitt Theme-Vorlage die Produktseitenvorlage aus, die du in Schritt 2 erstellt hast.
- Klicke auf Speichern.
- Gib in der Shopify App auf Produkte > Alle Produkte.
- Tippe auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
- Tippe im Abschnitt Metafelder auf Alle anzeigen.
- Tippe auf das Seitenreferenz-Metafeld, das du erstellt hast, und tippe dann erneut, um die von dir erstellte Seite auszuwählen.
- Wähle im Abschnitt Theme-Vorlage die Produktseitenvorlage aus, die du in Schritt 2 erstellt hast.
- Tippe auf Speichern.
- Gib in der Shopify App auf Produkte > Alle Produkte.
- Tippe auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
- Tippe im Abschnitt Metafelder auf Alle anzeigen.
- Tippe auf das Seitenreferenz-Metafeld, das du erstellt hast, und tippe dann erneut, um die von dir erstellte Seite auszuwählen.
- Wähle im Abschnitt Theme-Vorlage die Produktseitenvorlage aus, die du in Schritt 2 erstellt hast.
- Tippe zum Speichern auf ✓.
Du kannst diese Schritte für so viele Produkte wiederholen, wie du benötigst.