Gewährleistungslabel in Shopify einfügen

Für Shopify Händler stellt sich beim neuen Gewährleistungslabel vor allem die Frage, wie sich die Vorgaben praktisch im eigenen Shopify Shop umsetzen lassen, ohne dass daraus unnötiger Pflegeaufwand entsteht oder wichtige Bereiche übersehen werden. Dabei kommen grundsätzlich unterschiedliche Wege infrage, denn die Einbindung kann sowohl über eine Shopify App als auch manuell im Theme Code erfolgen, wobei sich beide Varianten hinsichtlich des Aufwands, der Flexibilität und der Wartung unterscheiden.

Die Inhalte dieses Beitrags stellen keine Rechtsberatung dar und ersetzen keine individuelle rechtliche Prüfung. Für die rechtliche Einordnung einzelner Punkte greifen wir zudem auf Aussagen von Herrn Dr. Klostermann aus unserem E-Commerce-Stammtisch zurück. Als Fachanwalt für das Recht der Informationstechnologien hat er die Anforderungen rund um das Gewährleistungslabel sowie die praktischen Herausforderungen bei der Umsetzung in Shopify Shops eingeordnet. Dabei wurden insbesondere die Möglichkeiten und Grenzen von Shopify durch die eingeschränkten Anpassungsmöglichkeiten des Checkouts, besprochen.

Wo kann das Gewährleistungslabel in Shopify dargestellt werden?

Für die Darstellung des Gewährleistungslabels gibt es grundsätzlich mehrere Möglichkeiten, allerdings lassen sich nicht alle davon in jedem Shopify Tarif technisch gleich umsetzen.

Da in Shopify lediglich 10% mit Shopify Plus arbeiten entsteht für Shopify Händler daraus zusätzlich eine technische Besonderheit, weil sich der eigentliche Checkout bei normalen Shopify Tarifen nicht frei mit eigenen Inhalten erweitern lässt. Wer eine möglichst einfache Umsetzung anstrebt, sollte die vollständige Mitteilung deshalb bereits vor dem Checkout an einer frei anpassbaren Stelle im Shop sichtbar einbinden. Bei Shopify wäre das mit dem Hinweis von Herr Dr. Klostermann die jeweilige Produktdetailseite.

Gewährleistungslabel Generator

Empfohlene Shopify-Platzierung

Shopify-Bereich	Empfehlung	Einordnung
Produktseite, nahe Preis/Kaufbutton	Ja, bevorzugt	Der Kunde sieht das Label direkt beim konkreten Angebot und vor dem Kauf.
Kollektionsseite	Ja, berücksichtigen	Wenn Kunden Produkte direkt auf der Kollektionsseite in den Warenkorb legen kann.
Checkout	Ja, wenn möglich	Nur bei Shopify Plus umsetzbar; ohne Plus ist der Checkout nicht editierbar.
Warenkorb	Nur ohne Cart Drawer	Stärkt die Sichtbarkeit unmittelbar vor dem Checkout, ersetzt aber nicht die prominente Darstellung auf der Website.
Bestellbestätigungs-E-Mail	Ergänzend	Für das allgemeine Gewährleistungslabel sinnvoll, aber nicht der primäre Einbindungsort und nicht verpflichtend.

Ist eine geschachtelte Darstellung zulässig?

Eine geschachtelte Darstellung wird unterschiedlich bewertet. Für die praktische Umsetzung empfehlen wir daher, das vollständige Gewährleistungslabel einzubinden, sodass es ohne Klick, Mouseover oder eine vergleichbare Interaktion sichtbar ist.

Bei einer geschachtelten Darstellung sieht der Kunde zunächst nur einen Hinweis auf das gesetzliche Gewährleistungsrecht. Die vollständige Grafik öffnet sich erst nach einer entsprechenden Interaktion.

Die praktischen Leitlinien der Europäischen Kommission zeigen diese Variante ausdrücklich, beispielsweise im Header oder im Checkout. Gleichzeitig vertreten unter anderem die IT Recht Kanzlei sowie Herr Dr. Klostermann, der die rechtlichen Fragen bei unserem E Commerce Stammtisch eingeordnet hat, eine andere Auffassung.

Für Shopify Händler ist die Art der Darstellung insbesondere deshalb relevant, weil eine zentrale Einbindung im Checkout je nach Tarif technisch eingeschränkt ist. Das vollständige Gewährleistungslabel kann beispielsweise direkt auf den relevanten Produktdetailseiten oder an einer geeigneten Stelle im Warenkorb eingebunden werden. Bei Shopify Shops ohne Plus ist insbesondere die Produktdetailseite eine praktikable Möglichkeit, da sie über das Theme deutlich flexibler angepasst werden kann als der eigentliche Checkout.

Gewährleistungslabel direkt auf der Produktseite anzeigen

Für Shopify Shops ohne Plus ist die Produktdetailseite eine der technisch einfachsten Möglichkeiten, weil sie über das Theme frei angepasst werden kann und der Kunde die Mitteilung bereits vor dem Start des eigentlichen Bestellprozesses sieht. Die offizielle Grafik kann beispielsweise innerhalb der Produktinformationen, unterhalb des Kaufbereichs oder in einem eigenen Theme Block eingebunden werden, wobei sie vollständig, unverändert und ausreichend lesbar bleiben sollte. Das bereitgestellte Dokument fasst die strengere Rechtsauffassung so zusammen, dass eine alleinige Verlinkung oder ein ausschließlich über Mouseover erreichbares Dokument nicht genügen sollte, weshalb die vollständige sichtbare Darstellung die vorsichtigere Variante darstellt. Bei vielen Produkten muss die Grafik trotzdem nicht manuell in jede Produktbeschreibung eingefügt werden, denn über die Produktvorlage lässt sich der entsprechende Block zentral ausgeben. Für Geschenkgutscheine, digitale Güter oder einzelne Sonderprodukte kann die Ausgabe anschließend über Metafelder oder andere Produktmerkmale gesteuert werden.

Wir setzen die Einbindung ebenfalls nach diesem Prinzip um. Benötigte Gewährleistungslabels und EU GARAN Labels werden auf der jeweiligen Produktdetailseite angezeigt und, sofern auf einer Kollektionsseite ein direkter Add to Cart Button vorhanden ist, auch dort berücksichtigt, damit der Kunde ein Produkt nicht in den Warenkorb legen kann, ohne zuvor die erforderlichen Informationen gesehen zu haben. Alternativ kann die direkte Warenkorb Funktion auf der Kollektionsseite deaktiviert werden, sodass der Weg zunächst über die Produktdetailseite führt. Zusätzlich binden wir die erforderlichen Labels im Warenkorb ein, sofern kein Cart Drawer verwendet wird, wodurch sich die Darstellung an den tatsächlichen Kaufprozess des jeweiligen Shopify Shops anpassen lässt.

Gewährleistungslabel manuell in Shopify einfügen

Wer keine App verwenden möchte, kann das Gewährleistungslabel direkt im Shopify Theme einbinden. Bei dieser Variante wird die offizielle Grafik einmal zentral im Produkt Template hinterlegt und anschließend automatisch auf den entsprechenden Produktdetailseiten ausgegeben, sodass das Label nicht bei jedem Produkt einzeln ergänzt werden muss. Gleichzeitig entstehen keine laufenden App Kosten, und da keine zusätzliche Anwendung geladen werden muss, kann die Lösung auch im Hinblick auf die Ladezeit des Shops von Vorteil sein.

Snippet für das Gewährleistungslabel erstellen

Öffnen Sie unter Onlineshop – Themes über die drei Punkte des verwendeten Themes den Bereich Code bearbeiten. Wechseln Sie anschließend in den Ordner Snippets und erstellen Sie die Datei eu-gewaehrleistungslabel.liquid und fügen Sie dort folgenden Code ein:

{%- comment -%}
  1. Bild: Gesetzliche Gewährleistung
{%- endcomment -%}

{%- if block.settings.image_1 != blank -%}
  <div class="warranty-image">
    {%- assign image = block.settings.image_1 -%}
    {{
      image
      | image_url: width: 1500
      | image_tag:
        loading: 'lazy',
        sizes: '(min-width: 1200px) 600px, 100vw',
        widths: '375, 550, 750, 1100, 1500'
    }}
  </div>
{%- endif -%}

{%- comment -%}
  Link 1 und Link 2
{%- endcomment -%}
<div class="product__warranty-links">
  {%- if block.settings.link_1_text != blank
    and block.settings.link_1_url != blank
  -%}
    <a
      href="{{ block.settings.link_1_url }}"
      class="product__warranty-link"
    >
      {{ block.settings.link_1_text }}
    </a>
  {%- endif -%}

  {%- if block.settings.link_2_text != blank
    and block.settings.link_2_url != blank
  -%}
    <a
      href="{{ block.settings.link_2_url }}"
      class="product__warranty-link"
    >
      {{ block.settings.link_2_text }}
    </a>
  {%- endif -%}
</div>

Speichern Sie das Snippet anschließend. Damit werden später die Grafik sowie die beiden dazugehörigen Informationslinks ausgegeben. Die ursprüngliche Anleitung arbeitet ebenfalls mit einer Grafik und zwei Links innerhalb des Gewährleistungsblocks.

Darstellung mit CSS anpassen

Öffnen Sie anschließend im Ordner Assets die Datei section-main-product.css und fügen Sie folgenden Code am Ende der Datei ein:

.warranty-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.product__warranty-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.product__warranty-link {
  text-decoration: underline;
}

Das CSS sorgt dafür, dass die Grafik responsiv dargestellt wird und die beiden Links untereinander erscheinen.

Gewährleistungslabel als Block im Produkt Template anlegen

Damit das Label später direkt im Shopify Theme Editor hinzugefügt und an die gewünschte Position verschoben werden kann, muss ein eigener Block im Produkt Template registriert werden.

Öffnen Sie im Ordner Sections die Datei main-product.liquid und suchen Sie innerhalb des Schema Bereichs nach „blocks“: [ und ergänzen Sie dort folgenden Block:

{
  "type": "gewaehrleistungslabel",
  "name": "Gewährleistungslabel",
  "limit": 1,
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Bild Gewährleistungslabel hochladen"
    },
    {
      "type": "text",
      "id": "link_1_text",
      "label": "Text für Link 1",
      "default": "Mehr Informationen (Your Europe)"
    },
    {
      "type": "url",
      "id": "link_1_url",
      "label": "URL für Link 1"
    },
    {
      "type": "text",
      "id": "link_2_text",
      "label": "Text für Link 2",
      "default": "Amtliches Dokument als PDF herunterladen"
    },
    {
      "type": "url",
      "id": "link_2_url",
      "label": "URL für Link 2"
    }
  ]
},

Damit kennt Shopify nun einen neuen Block mit dem Namen Gewährleistungslabel, der später im Theme Editor ausgewählt werden kann. Dieser Schritt sorgt allerdings noch nicht dafür, dass das zuvor angelegte Snippet tatsächlich auf der Produktseite ausgegeben wird. Dafür muss im nächsten Schritt zusätzlich der entsprechende Liquid Code ergänzt werden.

Achten Sie darauf, dass die Kommas innerhalb des bestehenden JSON Schemas korrekt gesetzt sind. Bereits ein fehlendes oder zusätzliches Komma kann dazu führen, dass sich das Theme nicht speichern lässt.

Snippet auf der Produktseite ausgeben

Damit Shopify den neu angelegten Block auch tatsächlich rendert, suchen Sie weiter oben in derselben Datei main-product.liquid nach dem bestehenden case Bereich für die Produktblöcke. Ergänzen Sie vor dem zugehörigen {%- endcase -%} folgenden Code:

{%- when 'gewaehrleistungslabel' -%}
{% liquid
assign exclude_notice = false
assign show_notice = true
if product assign exclude_notice = product.metafields.custom.exclude_legal_guarantee_notice.value
if product.gift_card?
assign show_notice = false
endif
if exclude_notice
assign show_notice = false
endif
endif
%}

{% if show_notice and block.settings.image_1 != blank %}
{% render 'eu-gewaehrleistungslabel', block: block %}
{%- endif -%}

Für einen einfachen Shopify Shop würde ich im Ratgeber sogar diese zweite Variante als Standard zeigen und die Steuerung über ein Ausschluss Metafeld anschließend als Erweiterung erklären. Dadurch bleibt der eigentliche Code Schnipsel auch für weniger erfahrene Shopify Händler nachvollziehbar.

Gewährleistungslabel im Theme Editor hinzufügen

Nachdem Sie die Änderungen gespeichert haben, öffnen Sie Onlineshop – Themes – Anpassen. Wechseln Sie oben im Theme Editor zu Produkte – Standardprodukt beziehungsweise zu der Produktvorlage, die Sie bearbeiten möchten.

Öffnen Sie anschließend den Bereich Produktinformationen, klicken Sie auf Block hinzufügen und wählen Sie den neu angelegten Block Gewährleistungslabel aus.

Nun können Sie direkt im Theme Editor die offizielle Grafik auswählen und den Informationslink hinterlegen. Gleichzeitig lässt sich der Block mit der Maus an die gewünschte Position innerhalb der Produktinformationen verschieben.

Darstellung prüfen

Öffnen Sie anschließend eine betroffene Produktdetailseite und kontrollieren Sie die Ausgabe sowohl auf einem Desktop Gerät als auch auf einem Smartphone. Dabei sollte die Grafik vollständig sichtbar sein und weder abgeschnitten noch verzerrt werden.

Prüfen Sie außerdem, ob beide Informationslinks korrekt ausgegeben werden und zum vorgesehenen Ziel führen. Falls Sie das optionale Ausschluss Metafeld eingerichtet haben, wählen Sie zusätzlich ein Testprodukt aus, aktivieren Sie dort das Feld und kontrollieren Sie, ob das Gewährleistungslabel auf dieser Produktdetailseite tatsächlich nicht mehr ausgegeben wird.

Wenn Sie mehrere unterschiedliche Produkt Templates verwenden, sollte kontrolliert werden, ob der Block auch in diesen Vorlagen ergänzt werden muss.

Gewährleistungslabel über eine Shopify App einbinden

Eine App Lösung würden wir nur dann empfehlen, wenn sich die Einbindung nicht sinnvoll über das Theme oder eine eigene technische Lösung abbilden lässt. Viele der verfügbaren Apps bieten nur begrenzte Einstellungsmöglichkeiten, können für kleinere Shopify Shops mit überschaubarem Sortiment aber dennoch ausreichend sein. Für kleinere Shops kann eine App Lösung ausreichend sein, während bei komplexeren Sortimenten eine manuelle oder individuell entwickelte Einbindung meist mehr Flexibilität bietet.

Auswahlkriterien für eine geeignete App

• Die App sollte die offizielle farbige RGB Datei vollständig und unverändert darstellen, ohne automatischen Beschnitt oder gestalterische Änderungen.
• Garantiedauer und Jahresangaben müssen im richtigen Format ausgegeben werden. Einige Apps ergänzen beispielsweise automatisch Einheiten wie Monate, obwohl nur der Wert 2,5 vorgesehen ist.
• Das Label sollte auf Desktop, Tablet und Smartphone komplett dargestellt werden und auch bei unterschiedlichen Bildschirmgrößen gut lesbar bleiben.
• Geschenkgutscheine, digitale Produkte, Dienstleistungen und einzelne Produkte sollten gezielt einbezogen oder ausgeschlossen werden können.
• Bei größeren Sortimenten sollte die Steuerung über Metafelder, Tags, Kollektionen oder automatisierte Regeln möglich sein, ohne jedes Produkt einzeln bearbeiten zu müssen.
• Die App sollte unterschiedliche Sprachversionen und Märkte mit der jeweils passenden offiziellen Datei und Zielverlinkung unterstützen.
• Idealerweise lässt sich das Label auch in Bestellbestätigungen integrieren oder die App dokumentiert klar, wie dieser Schritt manuell ergänzt werden kann.
• Es sollte transparent ersichtlich sein, welche Bereiche im jeweiligen Shopify Tarif unterstützt werden und wo technische Einschränkungen bestehen.

EU‑Gewährleistungslabel: GARAN

Die App EU Gewährleistungslabel: GARAN eignet sich vor allem für sehr kleine Shopify Shops mit nur wenigen relevanten Produkten, bei denen das Gewährleistungslabel möglichst schnell und ohne eigene Anpassungen am Theme Code eingerichtet werden soll. Die Einrichtung ist vergleichsweise einfach, allerdings umfasst der kostenlose Tarif lediglich bis zu 20 Produkte.

Nach der Installation öffnen Sie im Shopify Adminbereich unter Apps die App EU Gewährleistungslabel: GARAN. Klicken Sie anschließend auf Alle Produkte synchronisieren, damit die vorhandenen Shopify Produkte in die App übernommen werden. Nach der Synchronisierung können Sie in der Produktübersicht prüfen, bei welchen Artikeln das Gewährleistungslabel angezeigt wird und welche Produkte ausgeschlossen sind.

Öffnen Sie anschließend ein einzelnes Produkt innerhalb der App und kontrollieren Sie die Einstellungen für die Ausgabe des Labels. Dabei sollte insbesondere geprüft werden, ob das Produkt tatsächlich unter die Kennzeichnung fällt und ob die Darstellung auf der Produktdetailseite korrekt erfolgt. Produkte, die nicht berücksichtigt werden sollen, müssen entsprechend als ausgeschlossen gekennzeichnet werden. Kontrollieren Sie dabei insbesondere vorhandene Gutscheine und andere bewusst auszuschließende Angebote, damit das Label nicht pauschal bei allen Produkten erscheint.

Öffnen Sie danach ein einzelnes Produkt innerhalb der App und kontrollieren Sie die Einstellungen. Prüfen Sie dabei insbesondere, ob das Produkt korrekt berücksichtigt wird und ob ausgeschlossene Produkte, beispielsweise Gutscheine, entsprechend gekennzeichnet sind.

Die App stellt außerdem einen eigenen Block für die Ausgabe des Gewährleistungslabels bereit, der nach der Einrichtung im Theme vorhanden sein sollte. Kontrollieren Sie deshalb zusätzlich unter Onlineshop – Themes – Anpassen auf einer Produktdetailseite, ob der Block tatsächlich eingebunden und an der gewünschten Stelle sichtbar ist.

Beachtet werden sollte außerdem, dass über die App neben dem Label auch das amtliche PDF zum Download bereitgestellt wird. Prüfen Sie nach der Einrichtung direkt im Shop, ob Grafik, Informationslink und PDF korrekt angezeigt werden und ob die Darstellung sowohl auf dem Desktop als auch auf dem Smartphone funktioniert.

Warranto – EU Warranty Label

Die App Warranto – EU Warranty Label eignet sich vor allem für Shopify Shops mit bis zu 50 Produkten, die ausschließlich das Gewährleistungslabel benötigen und kein zusätzliches Garantielabel verwenden müssen. Für solche kleineren Shops lässt sich die Kennzeichnung vergleichsweise schnell ohne eigene Anpassungen am Theme Code einrichten.

Öffnen Sie nach der Installation die App und wechseln Sie in das Dashboard. Anschließend öffnen Sie den Theme Editor und fügen auf der Produktseiten Vorlage den Block EU Warranty Labels hinzu. Dieser erscheint im linken Bereich unter Apps. Falls der Block dort nicht angezeigt wird, bietet die App auch für Themes ohne App Block Unterstützung eine alternative Einbindung an. Dafür kann der Code entweder über einen Benutzerdefiniertes Liquid Block im Theme Editor oder, falls Ihr Theme keinen solchen Block unterstützt, direkt über den Code Editor eingebunden werden.

Prüfen Sie danach, ob der Block an der gewünschten Stelle auf der Produktdetailseite sitzt, und verschieben Sie ihn bei Bedarf innerhalb der Produktinformationen. Im nächsten Schritt fügen Sie in der App die Produkte hinzu, für die das Gewährleistungslabel angezeigt werden soll.

Abschließend sollte mindestens ein betroffenes Produkt direkt im Shop getestet werden. Kontrollieren Sie dabei, ob das Label vollständig ausgegeben wird und sowohl auf Desktop als auch auf dem Smartphone korrekt dargestellt wird.