AGB-Zustimmung vor dem Checkout verlangen

Füge eine Checkbox unter dem Checkout-Button hinzu und hindere Käufer daran fortzufahren, bis sie sie ankreuzen. Nützlich für AGB-Zustimmungen, Altersabfragen und Bestätigungen bei Sonderanfertigungen.

Das checkout-Event kann den Checkout nicht abbrechen. Es feuert als Benachrichtigung kurz bevor der Browser navigiert, daher bewirkt false zurückzugeben oder preventDefault aufzurufen nichts. Die einzige Möglichkeit, den Checkout zu sperren, besteht darin, den Button bevor er gedrückt wird nicht mehr auf Klicks reagieren zu lassen — genau das zeigt diese Seite.Betrachte das als UI-Hürde, nicht als rechtliche Garantie. Ein entschlossener Käufer kann den Checkout weiterhin direkt erreichen.

So funktioniert es

Drei Bausteine:

Ein Custom-Code-Block unter dem Checkout-Button rendert die Checkbox.
Solange die Box nicht angekreuzt ist, fügt der Block über die Shadow Root den Checkout- und Express-Payment-Buttons des Warenkorbs eine Klasse hinzu.
Custom CSS sorgt dafür, dass diese Klasse Klicks deaktiviert.

Schritt 1: Füge den Checkbox-Block hinzu

Füge einen Custom-Code-Block unter deinem Checkout-Button-Block hinzu, schalte ihn in den Modus React component und füge Folgendes ein:

function CustomCode(props) {
  const [accepted, setAccepted] = useState(false);

  useEffect(() => {
    const root = window.aftersell?.cart?.shadowRoot;
    if (!root) return;

    const targets = root.querySelectorAll(
      '.cart-external-checkout-button, .cart-external-express-buttons'
    );
    targets.forEach((el) => el.classList.toggle('checkout-gated', !accepted));
  }, [accepted, props.cart]);

  return (
    <div style={{ width: '100%', fontSize: '14px', textAlign: 'center' }}>
      <label style={{ display: 'flex', gap: '6px', justifyContent: 'center', alignItems: 'center' }}>
        <input
          type="checkbox"
          checked={accepted}
          onChange={(e) => setAccepted(e.target.checked)}
        />
        <span>
          I accept the{' '}
          <a href="https://yourstore.com/terms" target="_blank" rel="noopener noreferrer">
            Terms &amp; Conditions
          </a>
        </span>
      </label>
      {!accepted && (
        <div style={{ color: '#c00', fontWeight: 600, marginTop: '6px' }}>
          Please accept the terms above to continue.
        </div>
      )}
    </div>
  );
}

Klicke auf Compile und aktiviere dann „Use custom template“. Vorher rendert der Block nichts. Die Abhängigkeit props.cart ist wichtig: Sie wendet die Klasse nach jedem Re-Render des Warenkorbs erneut an, der sie sonst entfernen würde.

Schritt 2: Füge das CSS hinzu

Unter Cart settings → Custom CSS:

.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

pointer-events: none blockiert den Klick tatsächlich; die Deckkraft zeigt Käufern lediglich, warum.

Schritt 3: Teste es

Bestätige in der Vorschau, dass:

Der Checkout-Button beim Laden abgedunkelt ist und nicht auf Klicks reagiert.
Das Ankreuzen der Box ihn aktiviert; das Entfernen des Häkchens deaktiviert den Button wieder.
Auch Express-Payment-Buttons gesperrt sind.
Das Hinzufügen oder Entfernen eines Artikels den Button nicht wieder aktiviert, solange die Box nicht angekreuzt ist.

Der letzte Punkt ist der häufigste Fehler. Wenn sich der Button nach einer Warenkorbänderung selbst wieder aktiviert, läuft der Effekt nicht erneut. Prüfe, ob props.cart im Dependency-Array steht.

Nachverfolgen, wer zugestimmt hat

Die Checkbox ist reiner Browser-Zustand; sie erreicht die Bestellung nie. Um die Zustimmung festzuhalten, stemple sie beim Add-to-Cart als Property auf jede Zeile:

<input type="hidden" name="properties[_terms_version]" value="2026-01">

Füge das in deinem Theme dem Produktformular hinzu. Shopify liest properties[...] direkt aus dem Formular, sodass der Wert die Bestellung erreicht, egal wer das Hinzufügen ausführt: Aftersell, das Theme oder eine andere App. Eine mit _ beginnende Property bleibt aus der käufersichtbaren Zeile heraus, erreicht Shopify aber trotzdem und erscheint somit auf der Bestellung. Damit wird festgehalten, welche AGB-Version aktiv war, nicht dass der Käufer die Box angekreuzt hat.

Worauf du achten solltest

Ziele nur auf cart-external-*-Klassen. Die cart-internal-*-Gegenstücke sind die interne Mechanik des Warenkorbs, kein Ansatzpunkt für deinen Code. Siehe Custom CSS.
Prüfe, ob shadowRoot existiert, bevor du sie verwendest. Sie ist undefined, bis der Warenkorb gestartet ist.
Der Block rendert nichts, bis der Warenkorb geladen ist, sodass der Checkout-Button nie kurzzeitig aktiv ist, bevor die Sperre greift.
Ein React-Block, der einen Fehler wirft, rendert nichts, und der Rest des Warenkorbs läuft weiter — was hier einen ungesicherten Checkout-Button bedeutet. Teste in der Vorschau, bevor du veröffentlichst.

Nächste Schritte

Custom-Code-Blöcke: der React-Modus und seine Props.
Custom CSS: die Konvention der öffentlichen Klassen.
Events: was das checkout-Event kann und was nicht.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Aftersell-Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

AGB-Zustimmung vor dem Checkout verlangen

So funktioniert es

Schritt 1: Füge den Checkbox-Block hinzu

Schritt 2: Füge das CSS hinzu

Schritt 3: Teste es

Nachverfolgen, wer zugestimmt hat

Worauf du achten solltest

Nächste Schritte

​So funktioniert es

​Schritt 1: Füge den Checkbox-Block hinzu

​Schritt 2: Füge das CSS hinzu

​Schritt 3: Teste es

​Nachverfolgen, wer zugestimmt hat

​Worauf du achten solltest

​Nächste Schritte

So funktioniert es

Schritt 1: Füge den Checkbox-Block hinzu

Schritt 2: Füge das CSS hinzu

Schritt 3: Teste es

Nachverfolgen, wer zugestimmt hat

Worauf du achten solltest

Nächste Schritte