GPSR Shopify: Anleitung zur Einbindung relevanter Informationen zur Erfüllung der GPSR-Vorgaben mittels Metafeldern in Shopify

Hier ist eine ausführlichere Schritt-für-Schritt-Anleitung, wie du die neue GPSR Produktsicherheitsverordnung (General Product Safety Regulation) mit Metafeldern in Shopify implementieren kannst. Neben einer Anleitung wie du Metafelder statisch einfügen und nutzen kannst, findest du am Ende dieser Seite ebenfalls einen Weg, Metafelder dynamisch für die Einbindung von GPSR-relevanten Inhalten nutzen zu können.

Metafelder in Shopify einrichten

Zugriff auf Metafelder im Admin-Bereich

  • Melde dich bei deinem Shopify-Admin-Konto an.
  • Navigiere zu Einstellungen > Metafelder.
  • Wähle im Metafelder-Bereich die Kategorie Produkte, da die GPSR-Informationen auf den Produktseiten angezeigt werden sollen.

    Neue Metafelder für GPSR-relevante Informationen erstellen

    Hier erstellst du Metafelder, um Informationen zu speichern, die die Produktsicherheitsverordnung fordert.

    Klicke auf die Schaltfläche Metafeld hinzufügen.

    Fülle die Eingabefelder wie folgt aus:

    Metafeld 1: Sicherheitsinformationen

    • Bezeichnung: Sicherheitsinformationen
    • Namespace und Schlüssel: product.gpsr_info (dieser Name ist einzigartig und dient als Referenz für das Metafeld im Theme-Code).
    • Beschreibung: (Optional) „Informationen zur sicheren Nutzung des Produkts.“
    • Content-Typ: Wähle Rich-Text, damit du Absätze, Listen und Formatierungen einfügen kannst.
    • Validierung: Wenn es für alle Produkte erforderlich ist, wähle „Pflichtfeld“.

    Metafeld 2: Warnhinweise

    • Bezeichnung: Warnhinweise
    • Namespace und Schlüssel: product.warnings.
    • Content-Typ: Textfeld.
    • Beschreibung: „Zeigt Warnhinweise für die Nutzung des Produkts an.“
    Metafeld 3: Verwendungszweck
    • Bezeichnung: Verwendungszweck
    • Namespace und Schlüssel: product.usage_instructions.
    • Content-Typ: Rich-Text.
    • Beschreibung: „Anweisungen zur sicheren Handhabung und Verwendung des Produkts.“
    • Klicke auf Speichern, um die Metafelder zu erstellen.

    Zusätzliche Metafelder erstellen (optional)

    Je nach spezifischen GPSR-Anforderungen kannst du weitere Felder hinzufügen, wie z. B.:

    Metafeld 4: CE-Kennzeichnung
    • Bezeichnung: CE-Kennzeichnung
    • Namespace und Schlüssel: product.ce_label.
    • Content-Typ: Datei, falls du eine Grafik für das CE-Zeichen hochladen möchtest.
    Metafeld 5: Herstellerinformationen
    • Bezeichnung: Herstellerinformationen
    • Namespace und Schlüssel: product.manufacturer_details.
    • Content-Typ: Text oder Rich-Text.

      Metafelder mit Produkten verknüpfen

      Produkte bearbeiten

      • Gehe im Shopify-Admin-Bereich zu Produkte.
      • Öffne ein Produkt, für das du die GPSR-Informationen hinzufügen möchtest.
      • Scrolle nach unten zu Metafelder. Dort siehst du die zuvor erstellten Felder.

        Informationen einfügen

        Fülle die jeweiligen Metafelder aus:

        • Sicherheitsinformationen: Detaillierte Angaben zu Risiken oder Sicherheitsmaßnahmen.
        • Warnhinweise: Kurz und prägnant formulierte Warnungen (z. B. „Nicht für Kinder unter 3 Jahren geeignet“).
        • Verwendungszweck: Hinweise zur ordnungsgemäßen Nutzung.
        • CE-Kennzeichnung: Hochladen eines Logos, falls erforderlich.
        • Herstellerinformationen: Name, Adresse und Kontaktinformationen des Herstellers.
        • Speichere die Änderungen.

        Wiederholen

        Wiederhole diesen Vorgang für alle Produkte, die GPSR-relevante Informationen benötigen.

        Theme-Code anpassen

        Zugriff auf den Theme-Code

        • Gehe zu Onlineshop > Themes.
        • Wähle dein aktives Theme aus und klicke auf Aktionen > Code bearbeiten.

        Produktvorlage bearbeiten

        Öffne die Datei product.liquid (bei älteren Themes) oder main-product.liquid (bei modernen Themes).

        Füge an der Stelle, wo die GPSR-Informationen erscheinen sollen, den folgenden Code ein:

        <div class="product-gpsr-info"> <h3>Sicherheitsinformationen</h3> <p>{{ product.metafields.product.gpsr_info.value }}</p> </div> <div class="product-warnings"> <h3>Warnhinweise</h3> <p>{{ product.metafields.product.warnings.value }}</p> </div> <div class="product-usage"> <h3>Verwendungszweck</h3> <p>{{ product.metafields.product.usage_instructions.value }}</p> </div> {% if product.metafields.product.ce_label %} <div class="product-ce"> <h3>CE-Kennzeichnung</h3> <img src="{{ product.metafields.product.ce_label.value }}" alt="CE-Kennzeichnung"> </div> {% endif %} <div class="product-manufacturer"> <h3>Herstellerinformationen</h3> <p>{{ product.metafields.product.manufacturer_details.value }}</p> </div>

        Optional: Abschnitte konditionieren

        Wenn ein Metafeld leer ist, kannst du es ausblenden, indem du den Code mit einer {% if %}-Bedingung versiehst:

        {% if product.metafields.product.gpsr_info %} <div class="product-gpsr-info"> <h3>Sicherheitsinformationen</h3> <p>{{ product.metafields.product.gpsr_info.value }}</p> </div> {% endif %}

        Speichern: Klicke auf Speichern, um die Änderungen zu übernehmen.

        Styling der Metafelder (optional)

        CSS-Datei bearbeiten

        • Öffne die Datei theme.css oder theme.scss.liquid.
        • Füge benutzerdefiniertes CSS hinzu, um die Darstellung der neuen Informationen anzupassen:
        .product-gpsr-info, .product-warnings, .product-usage, .product-ce, .product-manufacturer { margin: 20px 0; } .product-gpsr-info h3, .product-warnings h3, .product-usage h3, .product-ce h3, .product-manufacturer h3 { font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; } .product-gpsr-info p, .product-warnings p, .product-usage p, .product-manufacturer p { font-size: 1rem; line-height: 1.5; }
        • Speichere die Datei.

          Testen und Veröffentlichen

          Produktseite testen

          • Öffne die Produktseite im Frontend.
          • Überprüfe, ob alle Informationen korrekt angezeigt werden.
          • Stelle sicher, dass die Darstellung klar und nutzerfreundlich ist.

            Änderungen veröffentlichen

            • Nach dem Testen kehre zum Admin-Bereich zurück.
            • Veröffentliche dein Theme, wenn alles wie gewünscht funktioniert.

              Metafelder dynamisch in Shopify einrichten

              Die Schritte zur Einrichtung der Metafelder sind identisch:

              Zugriff auf Metafelder:

              Gehe in den Admin-Bereich zu Einstellungen > Metafelder > Produkte.

              Neue Metafelder erstellen:

              Beispielhafte Metafelder:

              • Sicherheitsinformationen: Namespace product.gpsr_info, Typ Rich-Text.
              • Warnhinweise: Namespace product.warnings, Typ Text.
              • Verwendungszweck: Namespace product.usage_instructions, Typ Rich-Text.
              • Optional: CE-Kennzeichnung als Bild (product.ce_label) oder Herstellerinformationen (product.manufacturer_details).
              • Speichern und Verknüpfen mit Produkten:
              • Gehe zu einem Produkt, scrolle zum Bereich Metafelder, und füge die Inhalte in die entsprechenden Felder ein.
              • Wiederhole dies für alle relevanten Produkte.

              Dynamische Inhalte im Theme-Editor einbinden

              Mithilfe des Shopify-Theme-Editors kannst du die GPSR-Metafelder dynamisch auf der Produktseite anzeigen, ohne den Code manuell bearbeiten zu müssen.

              Theme-Editor öffnen

              • Gehe in den Shopify-Admin-Bereich zu Onlineshop > Themes.
              • Wähle dein aktives Theme aus und klicke auf Anpassen, um den Theme-Editor zu öffnen.

              Produktseite auswählen

              • Wähle oben im Theme-Editor im Dropdown-Menü die Ansicht für Produktseiten aus.
              • Klicke auf den Bereich, in dem du die Sicherheitsinformationen und anderen Metafelder hinzufügen möchtest (z. B. Hauptbeschreibung, zusätzlicher Abschnitt).

              Dynamische Inhalte hinzufügen

              Abschnitt für Metafelder erstellen:

              • Klicke im Theme-Editor auf Abschnitt hinzufügen.
              • Wähle einen Abschnitt, der Text oder Rich-Text unterstützt (z. B. „Textblock“, „Benutzerdefinierter Text“ oder „Details“).

              Dynamisches Metafeld einfügen:

              • Bearbeite den Inhalt des Textblocks.
              • Klicke auf das Symbol Dynamische Quelle verbinden (ein kleiner Button mit drei Kreisen).
              • Wähle eines der zuvor erstellten Metafelder aus, z. B. „Sicherheitsinformationen“ (Namespace: product.gpsr_info).
              • Beispiel:
              • Wähle „Sicherheitsinformationen“, und der Text aus diesem Metafeld wird auf der Produktseite angezeigt.
              Weitere Metafelder einfügen:
              • Füge weitere Abschnitte für andere Informationen wie „Warnhinweise“ oder „Verwendungszweck“ hinzu.
              • Wiederhole den Vorgang, indem du die dynamischen Quellen mit den jeweiligen Metafeldern verknüpfst.

              Abschnittsreihenfolge und Darstellung anpassen

              Ordne die Abschnitte in der gewünschten Reihenfolge, z. B.:
              • Sicherheitsinformationen
              • Warnhinweise
              • Verwendungszweck
              • CE-Kennzeichnung (falls zutreffend)
              • Passe die Darstellung an, indem du die Stiloptionen des Abschnitts nutzt (z. B. Schriftgröße, Farben, Abstände).

              Vorschau prüfen

              • Verwende die Vorschau-Funktion im Theme-Editor, um sicherzustellen, dass die Informationen korrekt und ansprechend angezeigt werden.
              • Prüfe auch Produkte, bei denen nicht alle Metafelder ausgefüllt sind – Shopify blendet dynamische Inhalte automatisch aus, wenn keine Werte vorhanden sind.

              Änderungen speichern und veröffentlichen

              • Nachdem du die dynamischen Inhalte auf der Produktseite hinzugefügt und getestet hast, klicke auf Speichern im Theme-Editor.
              • Die Metafelder werden nun automatisch auf den Produktseiten angezeigt, ohne dass der Theme-Code manuell bearbeitet werden musste.

              Vorteile der dynamischen Methode

              • Kein Code-Wissen erforderlich.
              • Änderungen an den Metafeldern werden sofort auf der Produktseite sichtbar.
              • Flexibilität: Die Abschnitte können jederzeit über den Theme-Editor angepasst, verschoben oder entfernt werden.

              Mit dieser Methode kannst du die GPSR-Vorgaben in Shopify schnell und einfach umsetzen. Hier gehts zur Anleitung als PDF, gratis natürlich.