Pop-up-Größentabelle 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. Mit Hilfe dieses Tutorials kannst du beliebige Inhalte im Pop-up erstellen. In diesem Tutorial wird durchgehend das Beispiel der Größentabelle verwendet.

Diese Anleitung erfordert ein Online Store 2.0-Theme. 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:

Desktop

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

iPhone

Tippe in der Shopify-App auf … > Einstellungen.
Tippe auf Benutzerdefinierte Daten.
Tippe im Abschnitt Metafeld-Definitionen auf Produkte.
Tippe auf +.
Gib im Feld Name das Wort Größentabelle ein.
Tippe auf + Typ auswählen.
Tippe, um im Dropdown-Menü Seite auszuwählen. Standardmäßig wird Eine Seite ausgewählt.
Tippe auf Speichern.

Android

Tippe in der Shopify-App auf ☰ > Einstellungen.
Tippe auf Benutzerdefinierte Daten.
Tippe im Abschnitt Metafeld-Definitionen auf Produkte.
Tippe auf +.
Gib im Feld Name das Wort Größentabelle ein.
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

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-Link für die Größentabelle 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:

Desktop

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 im Feld Link-Label das Wort Größentabelle ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen.
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.

iPhone

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 im Feld Link-Label das Wort Größentabelle ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen.
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.

Android

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 im Feld Link-Label das Wort Größentabelle ein. Dabei handelt es sich um den Text, der angezeigt wird, um den Kunden zum Inhalt der Pop-up-Seite zu führen.
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 einer Größentabelle hinzufügen

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

Schritte:

Desktop

Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.
Klicke auf Seite hinzufügen.
Gib im Feld Titel das Wort Größentabelle ein und füge die Informationen für die Größentabelle unter Inhalt hinzu.
Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
Klicke auf Speichern.

iPhone

Tippe in der Shopify-App auf … > Onlineshop.
Tippe auf Seiten.
Tippe auf Seite hinzufügen.
Gib im Feld Titel das Wort Größentabelle ein und füge die Informationen für die Größentabelle unter Inhalt hinzu.
Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
Tippe auf Speichern.

Android

Tippe in der Shopify-App auf ☰ > Onlineshop.
Tippe auf Seiten.
Tippe auf Seite hinzufügen.
Gib im Feld Titel das Wort Größentabelle ein und füge die Informationen für die Größentabelle unter Inhalt hinzu.
Lege die Seite im Abschnitt Sichtbarkeit als Sichtbar fest.
Tippe zum Speichern auf ✓.

Du kannst so viele Größentabellen 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. Du kannst eine unterschiedliche Produktseitenvorlage für bestimmte Produkttypen mit Größentabellen verwenden, z. B. für Kleidung oder Schuhe, und eine Produktvorlage für andere Produkttypen wie z. B. Spielzeug, Schmuck und andere Accessoires.

Erfahre mehr über Vorlagen.

Schritte:

Desktop

Gehe im Shopify-Adminbereich zu Produkte.
Klicke auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
Klicke im Abschnitt Produkt-Metafelder auf den Seitenreferenz Größentabelle, klicke 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.

iPhone

Gib in der Shopify App auf Produkte > Alle Produkte.
Tippe auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
Tippe im Abschnitt Produkt-Metafelder auf die Seitenreferenz Größentabelle, tippe 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.

Android

Gib in der Shopify App auf Produkte > Alle Produkte.
Tippe auf das Produkt, dem du eine Seitenreferenz hinzufügen möchtest.
Tippe im Abschnitt Produkt-Metafelder auf die Seitenreferenz Größentabelle, tippe 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 zum Speichern auf ✓.

Du kannst diese Schritte für so viele Produkte wiederholen, wie du benötigst.