Shopify Warenkorb Checkbox

Shopify Warenkorb Checkbox hinzufügen

Bastian Winkelsen
Inhaltsverzeichnis
Dauer: 1 Min.
Anleitung
Niveau: 1/5

In diesem Artikel zeigen wir Ihnen, wie Sie eine Warenkorb Checkbox in Shopify erstellen, sodass Ihre Kunden die AGB und Widerrufsbelehrung vor einem Kauf bestätigen müssen.

Warum eine Warenkorb Checkbox?

Schließt ein Kunde bei Ihnen einen Kaufvertrag ab, ist es wichtig, dass der Kunde die AGB und das Widerrufsrecht für diesen Kauf kennt. Um zu gewährleisten, dass Kunden nicht willkürlich bestellen können, ohne über Ihre AGB, sowie Widerrufsbelehrung informiert zu sein, gibt es besagte Checkboxen.

Checkboxen sind ein simples HTML-Element, welches anklickbar ist. Mit ein bisschen Code – keine Sorge, wir zeigen Ihnen genau, was Sie tun müssen – können Sie also eine Warenkorb Checkbox einrichten, ohne dessen Bestätigung kein Kunde zur Kasse weitergeleitet wird.

Damit das optimal klappt, empfehlen wir alle Instant-Pay-Buttons oder auch Jetzt-Kaufen-Buttons aus Ihrem Shop zu entfernen. Diese können leider zu Komplikationen führen, ebenso wie der eingeschobene Warenkorb. Es ist also besser, eine feste Warenkorbseite in Ihrem Shopify Shop zu nutzen.

Debut-Theme

Die folgende Anleitung ist für das Debut-Theme und ähnliche ältere Themes gedacht. Falls Sie moderne Themes, wie das Dawn-Theme, nutzen, klicken Sie hier.

Eine Warenkorb Checkbox hinzufügen

Erstellen Sie zuerst eine Kopie Ihres Themes, sollte bei der Bearbeitung des Codes ein Fehler auftreten.

1. Öffnen Sie den Code Ihres Themes unter Onlineshop → Themes → Aktuelles Theme → Aktionen → Code bearbeiten.

2. Suchen Sie im Abschnitt Assets nach: theme.js oder theme.js.liquid

3.  Fügen Sie am Ende der Datei den 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("Um fortzufahren, willigen Sie den AGB und der Widerrufsbelehrung ein."); return false; } }); });

4. Klicken Sie auf Speichern.

5. Unter Sections, gehen Sie in die Datei: cart-template.liquid, wenn in Ihrem Theme diese Datei nicht in den Sections vorhanden ist, suchen Sie in den Templates nach cart-template.liquid oder cart.liquid.

6. Fügen Sie über dem Checkout-Button den 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 willige den <a href="/pages/terms-and-conditions">AGB</a> ein.
  </label>
  </p>

7. Klicken Sie auf Speichern.

Dawn-Theme

Diese Anleitung ist für das Dawn-Theme und ähnlich moderne Themes gedacht. Erstellen Sie zur Sicherheit eine Kopie Ihres Themes, bevor Sie Änderungen am Code durchführen.

jQuery einbinden

Starten Sie, indem Sie den folgenden Code zwischen die Head-Tags (<head>…</head>) der theme.liquid-Datei einfügen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Eine Warenkorb-Checkbox hinzufügen

Fügen Sie den folgenden HTML-Code zur zur main-cart-footer.liquid (Zeile 53/54) und cart-notification.liquid (Zeile 24) hinzu und ändern Sie ggf. den Text ab.

<p>
  <input type="checkbox" id="agree">
  <label for="agree">
      Ich willige der <a href="/policies/privacy-policy">Datenschutzerklärung</a>, den <a href="/policies/terms-of-service">AGB</a> sowie der <a href="/policies/refund-policy">Widerrufsbelehrung</a> wissentlich ein.
  </label>
</p>

JavaScript einfügen

Fügen Sie den folgenden JavaScript-Code ans Ende der cart.js und cart-notification.js ein.

$(document).ready(function() {
   $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
       if ($('#agree').is(':checked')) {
            $(this).submit();
            }
      else {
           alert("Bitte willigen Sie unseren Rechtstexten ein, um fortzufahren.");
           return false;
      }
  });
});

Das war’s – Glückwunsch!

Picture of Bastian Winkelsen
Bastian Winkelsen
Basti legt seinen Fokus auf die Themen E-Commerce, Webentwicklung sowie Coding. Dabei stößt er fortlaufend auf Probleme, die es zu lösen gilt!

News per E-Mail

Hochwertige Lerninhalte
Ratgeber und Kurse – direkt ins Postfach.
Gegenfeld Newsletter

Keine Beratungsleistung

Die Inhalte auf dieser Website stellen keine Finanz-, Steuer- oder Rechtsberatung dar und ersetzen diese auch nicht.

Bitte wenden Sie sich bei Fragen an einen entsprechenden Finanz- oder Steuerberater oder Fachanwalt.