Sehr geehrte Kunden,
ab dem 27.09.2026 gilt EU-weit die Pflicht zur Einführung der Gewährleistungs- und Garantielabel.
Das Gewährleistungslabel muss jeder Shop einbinden, die Garantielabel dann, wenn man eine erweiterte Garantie (+2 Jahre und mehr) für seine Artikel anbietet.
Hinweise dazu finden Sie z.B. auf den folgenden Seiten:
- https://www.e-recht24.de
- https://www.haendlerbund.de/
- https://www.it-recht-kanzlei.de/
Die kleine Grafik zeigt mit der "7" die Anzahl der Jahre der Garantie an, mit Klick auf diese kleine Grafik öffnet sich das eigentliche Garantielabel:
In diesem wird automatisch folgendes angezeigt:
- Hersteller (links oben, hier: August)
- Artikelnummer (rechts oben, hier: PG-2026-451852)
- Garantie in Jahren (links mitte, hier: 7)
Kauft ein Kunde einen solchen Artikel, kann er diese erweitere Garantie je Artikel in seiner persönlichen Bestellübersicht nachprüfen:
Auch hier öffnet sich mit Klick auf die kleine Grafik das eigentliche Garantielabel mit allen entsprechenden Informationen.
Zum Zeitpunkt des Kaufs wird die aktuell beim Artikel hinterlegte Garantie mitgeloggt, so dass sich diese in der Bestellübersicht auch nicht ändert, sollte die Garantie im Artikel geändert werden. D.h. es wird unveränderlich abgespeichert und bleibt für den Kunden, was seine aktuelle Bestellung angeht, immer gleich.
Um eine "Garantie" bei entsprechenden Artikeln zu hinterlegen muss zunächst über "Sonstiges" > "Artikelfeldauswahl" das Feld "Garantie" aktiviert werden:
In das Feld muss eine Zahl kleiner als "999" eingetragen werden, diese Zahl ist dann die Sortiernummer in dem entsprechenden Reiter (hier: Gruppe/Reiter "Sonstiges") in der Artikeländerungsmaske:
In der Artikeländerungsmaske sieht das dann so aus:
Pflegen Sie hier die Anzahl der "Jahre" in "Monaten", in unserem Beispiel "84" für 7 Jahre (84/12=7).
Die Anzahl muss auf jeden Fall durch 12 teilbar sein, ansonsten kann das Garantielabel keine Jahreszahl anzeigen!
Es wird auch erst ab "36" Monaten ein Garantielabel angezeigt.
Damit das auch im Artikel angezeigt wird muss über "Layout" > "Artikelanzeige" > "Template" > "Pflege" > "Standard" oder "T3 Standard" folgendes an gewünschter Stelle ergänzt werden:
Artikeldetail-Template:
Und über das "Warenkorc-Icon" > "Loginbereich" > "Bestellübersicht links oben" > Klick auf "Pflege" rechts daneben und Ergänzung im Feld "Text" direkt hinter dem Artikelnamen bzw. hinter "#variation":
In der T3-Version des Shops muss lediglich folgendes über "Sonstiges" > "Grundeinstellungen" aktiviert werden:
Suchen Sie einfach nach "garan" und Sie finden die Option "Garantie-Label CSS & JS mitladen", welche nur auf "JA" geändert werden muss.
Bitte laden Sie folgendes SVG herunter und laden es über "Sonstiges" > "IMG-Explorer" hoch:
Garantielabel (rechte Maustaste + Ziel speichern unter...)
Für "Ältere" Installationen muss das dazugehörige CSS über "Layout" > "Schriften/CSS" > "ALL (ROOT)" ergänzt werden:
Damit sich das Highslide im Artikeldetail und auch in der Bestellübersicht öffnet, muss noch folgendes JavaScript über "Sonstiges" > "IMG-Explorer" in der Datei "kopf.js" ergänzt werden:
/* Garantie Click Highslide - Start */
let garantie_base_svg = ""
function generateGarantieVoll(svg, monate, bn, hersteller) {
return svg.toString()
.replace("$garantie", monate)
.replace("$artikelnummer", bn)
.replace("$hersteller", hersteller)
}
$(document).on('click', '*[data-garantie][data-hersteller][data-bn]', function() {
const monate = $(this).attr('data-garantie')
const hersteller = $(this).attr('data-hersteller')
const bn = $(this).attr('data-bn')
if ($("#garantie-voll").length) {
$("#garantie-voll").remove()
}
$("#shopMain").append(`
<div id="garantie-voll" class="aa_glabel_o">
<div class="aa_glabel_inner"></div>
</div>
`)
if (!garantie_base_svg) {
$.get("img/garan_label.svg", function(data) {
garantie_base_svg = data
console.log({ garantie_base_svg })
$("#garantie-voll .aa_glabel_inner")
.html(generateGarantieVoll(garantie_base_svg, monate, bn, hersteller))
}, "text")
} else {
$("#garantie-voll .aa_glabel_inner")
.html(generateGarantieVoll(garantie_base_svg, monate, bn, hersteller))
}
$("#garantie-voll").on('click', function() {
$(this).remove()
})
})
/* Garantie Click Highslide - Ende */
- Gewährleistungslabel (klein)
- Gewährleistungslabel (groß)
Wir haben zwei Möglichkeiten geschaffen das einzubinden, wir empfehlen aber den Einbau im Kassenausgang VOR dem Kaufabschluss! Das Verlinken im Footer sollte optional sein!
Zum einen als einfachen Link im Footer des Shops...
... welcher nach dem Klick ein entsprechendes Highslide öffnet:
Dazu muss folgender Code über "Layout" > "Kopf/Fuß" im Feld "Fußbereich" an gewünschter Stelle (in einer Liste) ergänzt werden:
T3:
Zusätzlich muss die Option über "Sonstiges" > "Grundeinstellungen" > "Highslide Javascript mitladen" auf "JA" geändert werden:
nicht T3:
In einem "nicht-T3-Shop" muss dann im Fußbereich ganz unten allerdings noch folgendes ergänzt werden:
Oder aber auf der "Kaufabschluss-Seite" bevor man auf "KAUFEN" klickt:
... auch hier öffnet sich mit Klick auf die kleine Vorschaugrafik das große Highslide:
Damit das so angezeigt wird, muss über das "Warenkorb-Icon" > "Warenkorb/Zur Kasse" im Feld "TXT_Bestellungabsenden_oben" folgendes ergänzt werden:
T3:
nicht T3:
In der Tabelle als weiteres "TH":
Und das dazugehörige "TD":
<td><img src="img/Legal_guarantee_notice_DEN1.png" class="zk_glabel_t" onclick="openImage()"><div class="zk_glabel_o" id="zk_glabel_o" onclick="closeImage()">
<img src="img/Legal_guarantee_notice_DEN2.png"></div>
<script>
function openImage() {
document.getElementById("zk_glabel_o").style.display = "flex";
}
function closeImage() {
document.getElementById("zk_glabel_o").style.display = "none";
}
</script></td>
T3:
Das dazugehörige CSS über "Layout" > "Schriften/CSS" > "CSS v2" im Reiter "wk-t2":
Sowie die Klasse ".kassen_infos" um ein weiteres "1fr" ergänzen, damit das Gewährleistungslabel rechts neben der Versandart platziert wird:
nicht T3:
Das dazugehörige CSS über "Layout" > "Schriften/CSS" > "ALL (ROOT)":
Sollten Sie dazu Fragen haben oder Unterstützung bei der Einrichtung benötigen können Sie sich gerne bei uns melden. Bitte überprüfen Sie das auch kurz nach Einrichtung mit einer Test-Bestellung.
ab dem 27.09.2026 gilt EU-weit die Pflicht zur Einführung der Gewährleistungs- und Garantielabel.
Das Gewährleistungslabel muss jeder Shop einbinden, die Garantielabel dann, wenn man eine erweiterte Garantie (+2 Jahre und mehr) für seine Artikel anbietet.
Hinweise dazu finden Sie z.B. auf den folgenden Seiten:
- https://www.e-recht24.de
- https://www.haendlerbund.de/
- https://www.it-recht-kanzlei.de/
Hier zunächst wie das Garantielabel aussieht:
Die kleine Grafik zeigt mit der "7" die Anzahl der Jahre der Garantie an, mit Klick auf diese kleine Grafik öffnet sich das eigentliche Garantielabel:
In diesem wird automatisch folgendes angezeigt:
- Hersteller (links oben, hier: August)
- Artikelnummer (rechts oben, hier: PG-2026-451852)
- Garantie in Jahren (links mitte, hier: 7)
Kauft ein Kunde einen solchen Artikel, kann er diese erweitere Garantie je Artikel in seiner persönlichen Bestellübersicht nachprüfen:
Auch hier öffnet sich mit Klick auf die kleine Grafik das eigentliche Garantielabel mit allen entsprechenden Informationen.
Zum Zeitpunkt des Kaufs wird die aktuell beim Artikel hinterlegte Garantie mitgeloggt, so dass sich diese in der Bestellübersicht auch nicht ändert, sollte die Garantie im Artikel geändert werden. D.h. es wird unveränderlich abgespeichert und bleibt für den Kunden, was seine aktuelle Bestellung angeht, immer gleich.
Um eine "Garantie" bei entsprechenden Artikeln zu hinterlegen muss zunächst über "Sonstiges" > "Artikelfeldauswahl" das Feld "Garantie" aktiviert werden:
In das Feld muss eine Zahl kleiner als "999" eingetragen werden, diese Zahl ist dann die Sortiernummer in dem entsprechenden Reiter (hier: Gruppe/Reiter "Sonstiges") in der Artikeländerungsmaske:
In der Artikeländerungsmaske sieht das dann so aus:
Pflegen Sie hier die Anzahl der "Jahre" in "Monaten", in unserem Beispiel "84" für 7 Jahre (84/12=7).
Die Anzahl muss auf jeden Fall durch 12 teilbar sein, ansonsten kann das Garantielabel keine Jahreszahl anzeigen!
Es wird auch erst ab "36" Monaten ein Garantielabel angezeigt.
Damit das auch im Artikel angezeigt wird muss über "Layout" > "Artikelanzeige" > "Template" > "Pflege" > "Standard" oder "T3 Standard" folgendes an gewünschter Stelle ergänzt werden:
Artikeldetail-Template:
#einblenden_wenn_garantielabel1
<div class="aa_vorteile card"><div class="aa_glabel_t">
#garantielabel1
</div></div>
#einblenden_wenn_garantielabel2
<div class="aa_vorteile card"><div class="aa_glabel_t">
#garantielabel1
</div></div>
#einblenden_wenn_garantielabel2
Und über das "Warenkorc-Icon" > "Loginbereich" > "Bestellübersicht links oben" > Klick auf "Pflege" rechts daneben und Ergänzung im Feld "Text" direkt hinter dem Artikelnamen bzw. hinter "#variation":
<div class="aa_glabel_t">#garantielabel1</div>
In der T3-Version des Shops muss lediglich folgendes über "Sonstiges" > "Grundeinstellungen" aktiviert werden:
Suchen Sie einfach nach "garan" und Sie finden die Option "Garantie-Label CSS & JS mitladen", welche nur auf "JA" geändert werden muss.
Bitte laden Sie folgendes SVG herunter und laden es über "Sonstiges" > "IMG-Explorer" hoch:
Garantielabel (rechte Maustaste + Ziel speichern unter...)
Für "Ältere" Installationen muss das dazugehörige CSS über "Layout" > "Schriften/CSS" > "ALL (ROOT)" ergänzt werden:
.aa_glabel_t {width: 200px;cursor: pointer;transition: 0.3s;padding-left: 10px;}
.aa_glabel_t:hover {opacity: 0.8;}
.aa_glabel_o {display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.8);justify-content: center;align-items: center;z-index: 9999;}
.aa_glabel_inner {width: 800px;max-width: 90vw;max-height: 90vh;}
.aa_glabel_inner svg {width: 100%;height: auto;display: block;}
.aa_glabel_t:hover {opacity: 0.8;}
.aa_glabel_o {display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.8);justify-content: center;align-items: center;z-index: 9999;}
.aa_glabel_inner {width: 800px;max-width: 90vw;max-height: 90vh;}
.aa_glabel_inner svg {width: 100%;height: auto;display: block;}
Damit sich das Highslide im Artikeldetail und auch in der Bestellübersicht öffnet, muss noch folgendes JavaScript über "Sonstiges" > "IMG-Explorer" in der Datei "kopf.js" ergänzt werden:
/* Garantie Click Highslide - Start */
let garantie_base_svg = ""
function generateGarantieVoll(svg, monate, bn, hersteller) {
return svg.toString()
.replace("$garantie", monate)
.replace("$artikelnummer", bn)
.replace("$hersteller", hersteller)
}
$(document).on('click', '*[data-garantie][data-hersteller][data-bn]', function() {
const monate = $(this).attr('data-garantie')
const hersteller = $(this).attr('data-hersteller')
const bn = $(this).attr('data-bn')
if ($("#garantie-voll").length) {
$("#garantie-voll").remove()
}
$("#shopMain").append(`
<div id="garantie-voll" class="aa_glabel_o">
<div class="aa_glabel_inner"></div>
</div>
`)
if (!garantie_base_svg) {
$.get("img/garan_label.svg", function(data) {
garantie_base_svg = data
console.log({ garantie_base_svg })
$("#garantie-voll .aa_glabel_inner")
.html(generateGarantieVoll(garantie_base_svg, monate, bn, hersteller))
}, "text")
} else {
$("#garantie-voll .aa_glabel_inner")
.html(generateGarantieVoll(garantie_base_svg, monate, bn, hersteller))
}
$("#garantie-voll").on('click', function() {
$(this).remove()
})
})
/* Garantie Click Highslide - Ende */
Kommen wir zum Gewährleistungslabel:
Laden Sie bitte zunächst das Gewährleistungslabel in beiden Größen herunter und laden diese beiden Grafiken dann über die Shopverwaltung über "Sonstiges" > "IMG-Explorer" hoch:- Gewährleistungslabel (klein)
- Gewährleistungslabel (groß)
Wir haben zwei Möglichkeiten geschaffen das einzubinden, wir empfehlen aber den Einbau im Kassenausgang VOR dem Kaufabschluss! Das Verlinken im Footer sollte optional sein!
Zum einen als einfachen Link im Footer des Shops...
... welcher nach dem Klick ein entsprechendes Highslide öffnet:
Dazu muss folgender Code über "Layout" > "Kopf/Fuß" im Feld "Fußbereich" an gewünschter Stelle (in einer Liste) ergänzt werden:
T3:
<li><div class="pg-highslide" data-class="animated fadeInDownSmall">Ihre gesetzlichen Gewährleistungsrechte<div class="pg-highslide-content"><img src="img/Legal_guarantee_notice_DEN2.png"></div></div></li>
Zusätzlich muss die Option über "Sonstiges" > "Grundeinstellungen" > "Highslide Javascript mitladen" auf "JA" geändert werden:
nicht T3:
<li><a rel="nofollow" class="zk_glabel_tf" onclick="openImage_f()">Ihre gesetzlichen Gewährleistungsrechte</a></li>
In einem "nicht-T3-Shop" muss dann im Fußbereich ganz unten allerdings noch folgendes ergänzt werden:
<div class="zk_glabel_of" id="zk_glabel_of" onclick="closeImage_f()"><img src="img/Legal_guarantee_notice_DEN2.png"></div><script>
function openImage_f() {
document.getElementById("zk_glabel_of").style.display = "flex";
}
function closeImage_f() {
document.getElementById("zk_glabel_of").style.display = "none";
}
</script>
function openImage_f() {
document.getElementById("zk_glabel_of").style.display = "flex";
}
function closeImage_f() {
document.getElementById("zk_glabel_of").style.display = "none";
}
</script>
Oder aber auf der "Kaufabschluss-Seite" bevor man auf "KAUFEN" klickt:
... auch hier öffnet sich mit Klick auf die kleine Vorschaugrafik das große Highslide:
Damit das so angezeigt wird, muss über das "Warenkorb-Icon" > "Warenkorb/Zur Kasse" im Feld "TXT_Bestellungabsenden_oben" folgendes ergänzt werden:
T3:
<div class="card garan">
<div class="kasse_card_div">
<div class="head">Gewährleistung</div>
<div class="pg-highslide" data-class="animated fadeInDownSmall"><img src="img/Legal_guarantee_notice_DEN1.png"><div class="pg-highslide-content"><img src="img/Legal_guarantee_notice_DEN2.png"></div></div>
</div>
</div>
<div class="kasse_card_div">
<div class="head">Gewährleistung</div>
<div class="pg-highslide" data-class="animated fadeInDownSmall"><img src="img/Legal_guarantee_notice_DEN1.png"><div class="pg-highslide-content"><img src="img/Legal_guarantee_notice_DEN2.png"></div></div>
</div>
</div>
nicht T3:
In der Tabelle als weiteres "TH":
<th bgcolor='' align='left' nowrap>Gewährleistung<a id=bg_aendern class='button2 button2_2 aendern_button remove-amz-pay' style="display: none;" href="#" onclick="javascript:persaez();">(ändern)</a></th>
Und das dazugehörige "TD":
<td><img src="img/Legal_guarantee_notice_DEN1.png" class="zk_glabel_t" onclick="openImage()"><div class="zk_glabel_o" id="zk_glabel_o" onclick="closeImage()">
<img src="img/Legal_guarantee_notice_DEN2.png"></div>
<script>
function openImage() {
document.getElementById("zk_glabel_o").style.display = "flex";
}
function closeImage() {
document.getElementById("zk_glabel_o").style.display = "none";
}
</script></td>
T3:
Das dazugehörige CSS über "Layout" > "Schriften/CSS" > "CSS v2" im Reiter "wk-t2":
.zk_glabel_t {width: 200px;cursor: pointer;transition: 0.3s;padding-left: 10px;}
.zk_glabel_t:hover {opacity: 0.8;}
.zk_glabel_o {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;z-index: 9999;}
.zk_glabel_o img {max-width: 80%;max-height: 80%;}
.zk_glabel_o:active {display: none;}
.zk_glabel_t:hover {opacity: 0.8;}
.zk_glabel_o {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;z-index: 9999;}
.zk_glabel_o img {max-width: 80%;max-height: 80%;}
.zk_glabel_o:active {display: none;}
Sowie die Klasse ".kassen_infos" um ein weiteres "1fr" ergänzen, damit das Gewährleistungslabel rechts neben der Versandart platziert wird:
.kassen_infos { grid-template-areas: "rech liefer zart vers"; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
nicht T3:
Das dazugehörige CSS über "Layout" > "Schriften/CSS" > "ALL (ROOT)":
.zk_glabel_tf {cursor: pointer;}
.zk_glabel_of {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;z-index: 9999;}
.zk_glabel_of img {max-width: 80%;max-height: 80%;}
.zk_glabel_of:active {display: none;}
.zk_glabel_of {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;z-index: 9999;}
.zk_glabel_of img {max-width: 80%;max-height: 80%;}
.zk_glabel_of:active {display: none;}