Tutorial: Shopify rechtssicher machen — Teil 2
Ein DIY-Guide zu den nötigen Anpassungen für Shopify in Deutschland.
Weiter geht es mit dem zweiten Teil unseres Tutorials zur Rechtssicherheit für Shopify Stores in Deutschland. Wir wagen uns an den Code deines Themes und fügen dort Hinweise bzgl. Mehrwertsteuer und Versand hinzu und sorgen dafür, dass deine Kunden während des Checkouts die AGB bestätigen müssen. Auch dem „EU-Cookie-Law“ tragen wir Rechnung.
Um die Änderungen vornehmen zu können, solltest du über Grundlegende HTML-Kenntnisse verfügen und solange du nicht zu 100% weist was du tust, eine Sicherheitskopie deines Themes anlegen. Ein gute Anlaufstelle um sich HTML-Skills anzueignen ist die Code Academy.
Schritt 6: Sicherheitskopie anlegen (optional)
Savety first! Bevor du dir die Finger am Code schmutzig machst, solltest du dir ein Backup deines Themes anlegen. Das dauert 30 Sekunden und erspart im Falle des Falles eine Menge Kopfschmerzen. Gehe dazu im Backend unter Onlineshop ⇨ Themes und öffne das kleine »Aktionen«-Menü neben dem lilanen Anpassen-Button und wähle dort die Option »Theme Datei herunterladen«. Ein weiterer Klick auf E-Mail senden« und dein Theme kommt als .zip-File per E-Mail zu dir. Let's get this party started!
Schritt 7: Hinweis auf Mehrwertsteuer und Versand
Hinweis: Dieser Schritt entfällt für Shopifys „Debut“-Theme. Dort sind die Anpassungen bereits von Haus aus integriert.
Um direkt am Code deines Themes arbeiten zu können, navigierst du Onlineshop ⇨ Themes und wählst die Aktion »Code bearbeiten«. Dort erhälst du eine Übersicht über deine Theme Files und kannst diese direkt im Backend editieren.
Das Template der Produktseite liegt im Regelfall unter sections/product-template.liquid. Dort fügst du unter dem Produktpreis (der lässt sich leicht mit STRG + F und dem Suchbegriff product.price ausfindig machen. Füge nach dem nächsten schließenden </div>-Tag folgenden Code ein:
<span style="font-size: 0.7em; color: #ccc">Inklusive MwSt. zzgl. <a href="/VERSANDSEITE">Versandkosten</a></span>
<span style="font-size: 0.7em; color: #ccc">Lieferung: 2-4 Tage</span>Den Pfad zu deiner Versandseite sowie die Versanddauer musst du natürlich entsprechend anpassen.
Schritt 8: AGB-Checkbox vor dem Checkout
Eine Checkbox zum Bestätigen der AGB ist ein zwingend notwendiger Schritt im Checkout eines Onlineshops. Da wir bei Shopify den Checkout selbst nicht verändern können, verlagern wir diesen Schritt vor den eigentlichen Checkoutprozess, in das Template des Warenkorbs.
Dazu müssen wir zwei Dateien bearbeiten. Zuerst die theme.js bzw. theme.js.liquid im Assets-Folder. Füge dort, am besten ganz am Ende der Datei folgenden Code ein:
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("You must agree with the terms and conditions of sales to check out.");
return false;
}
});
});Danach öffnest du die cart-template.liquid im Sections-Folder. Dort suchst du nach dem Bestellbutton via STRG + F und dem Suchbegriff name="checkout" und fügst in der Zeile darüber folgenden Code ein:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
</label>
</p>Auch hier musst du den Link zu deiner AGB entsprechend anpassen. Nachdem du diesen Eingriff vorgenommen hast, solltest du die Funktion ausgiebig testen, da sie im schlimmste Fall jeden Verkaufsabschluss in deinem Shop blockiert. Eine etwas ausführlichere Beschreibung dieses Schritts findest du im Shopify Helpcenter.
Schritt 9: Express Buttons
Der PayPal-Express Button in deinem Warenkorb (Im Fachjargon: „Additional Checkout Button“ ) lässt sich seit einem Systemupdate von Shopify mit der oben genannten Methode nicht mehr blockieren, d.h. es ist auch ohne das Bestätigen der AGB möglich, einen Kauf zu tätigen.
Am einfachsten ist es, diese(n) Button(s) zu entfernen: suche dazu im Cart-Template deines Themes nach der folgenden Stelle:
{% if additional_checkout_buttons %}
{% endif %}und lösche Sie aus dem Code.
💡 Falls dir die Darstellung der Additional Checkoutbuttons im Warenkorb wichtig ist und du nach einer Lösung suchst, nimm gerne Kontakt mit uns auf.
Schritt 10: EU Cookie Banner
Noch ein kleiner, letzter Schritt, dann hast du es geschafft. Laut dem so genannten "EU Cookie Law" musst du auf die Verwendung von Cookies in deinem Store hinweisen. Auch wenn die aktuell verfügbaren Lösungen nicht besonders schön sind, sind sie immerhin einfach einzurichten. Installiere dazu einfach eines der Plugins aus dem Shopify Appstore.
Geschafft!
Zeit, dir selbst auf die Schulter zu klopfen. Die Anpassungen zur Rechtssicherheit hast du nun zumindest aus technischer Sicht erfüllt.
Damit du aber zu 100% auf der sicheren Seite bist und dein Shop tatsächlich Abmahnsicher ist, solltest du ihn von einem Anwalt prüfen lassen — oder du nimmst das Angebot des Händlerbundes war und lässt dort zu einem fairen Preis eine Shoptiefenprüfung vornehmen.
😱 Dir ist das Alles zu kompliziert?! Wir führen diese Anpassungen für dich gerne zum Festpreis durch!
*Disclaimer: Auch wenn wir nach bestem Wissen und Gewissen handeln sind wir Designer und Programmierer — keine Anwälte. Wir können dir also weder garantieren, dass dein Shop „rechtssicher“ ist, noch die dafür nötigen Rechtstexte zur Verfügung stellen. Mit unserer Leistung schaffen wir lediglich die technische Grundlage zur Rechtssicherheit.