Tutorials

So fügst du ein Gutscheinfeld auf der Shopify-Warenkorbseite hinzu [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du im Jahr 2025 ein Gutscheinfeld direkt auf der Warenkorbseite (Cart Page) deines Shopify-Shops hinzufügst.

Standardmäßig zeigt Shopify das Feld für Rabattcodes erst im Checkout (Kassiervorgang) an. Viele Kunden möchten den Code jedoch bereits im Warenkorb eingeben, um den finalen Preis zu sehen. Dies kann die Conversion-Rate erhöhen und Warenkorbabbrüche reduzieren.

Hier sind die drei besten Methoden für 2025:

Methode 1: Die einfachste Lösung via App (Empfohlen für Anfänger)

Wenn du keine Programmierkenntnisse hast, ist eine App der schnellste Weg. Moderne Apps für 2025 sind perfekt auf „Online Store 2.0“ (OS 2.0) Themes optimiert.

  1. App wählen: Suche im Shopify App Store nach „Discount on Cart“. Beliebte Apps sind DCC: Discount on Cart oder Avada Discount Code.
  2. Installation: Installiere die App und öffne das Dashboard.
  3. Aktivierung: Meistens kannst du das Feld über den Theme-Editor (Anpassen) aktivieren. Dort ziehst du einfach einen neuen „App-Block“ in deine Warenkorb-Sektion.
  4. Vorteil: Diese Apps berechnen den Rabatt oft in Echtzeit, ohne dass die Seite neu geladen werden muss.

Methode 2: Manuelle Integration via Code (Kostenlos)

Für OS 2.0 Themes (wie Dawn, Sense oder Refresh) kannst du ein einfaches Eingabefeld hinzufügen. Beachte: Dieser Code leitet den Rabattcode an den Checkout weiter.

Schritt 1: Theme sichern

Gehe auf Onlineshop > Themes > Aktionen (Drei Punkte) > Duplizieren. So hast du ein Backup.

Schritt 2: Code bearbeiten

  1. Klicke auf Code bearbeiten.
  2. Suche unter dem Ordner Sections nach der Datei main-cart-footer.liquid (oder cart-template.liquid bei älteren Themes).
  3. Suche nach dem Button für den Checkout (Suche nach name="checkout").

Schritt 3: Das Feld einfügen

Kopiere den folgenden Code-Schnipsel direkt über dem Checkout-Button hinein:

<div class="cart-discount-code" style="margin-bottom: 20px;">
  <label for="discount">Gutscheincode vorhanden?</label>
  <input autocomplete="off" type="text" name="discount" placeholder="Code eingeben" style="width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc;">
</div>

Wie es funktioniert: Shopify erkennt den Input-Namen name="discount" automatisch. Wenn der Kunde dort einen Text eingibt und auf "Checkout" klickt, wird dieser Code automatisch im Kassiervorgang angewendet.

Methode 3: Mit App-Blocks (Für moderne Themes 2025)

Viele moderne Premium-Themes haben 2025 bereits eine integrierte Funktion für Rabattfelder.

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Wähle oben im Dropdown-Menü Warenkorb aus.
  3. Klicke in der linken Seitenleiste auf die Sektion Warenkorb-Summe oder Subtotal.
  4. Prüfe, ob es eine Option „Block hinzufügen“ gibt. Oft findest du dort „Rabattfeld“ oder „Gutscheincode“.
  5. Wenn vorhanden, füge den Block hinzu und schiebe ihn per Drag-and-Drop an die gewünschte Stelle.

Wichtige Hinweise für 2025

  • Mobile Optimierung: Teste das Feld unbedingt auf dem Smartphone. Das Eingabefeld darf nicht zu klein sein, damit die Tastatur das Layout nicht zerschießt.
  • Checkout-Logik: Denke daran, dass Shopify pro Bestellung standardmäßig nur einen Rabattcode zulässt (außer du hast „Kombinierbare Rabatte“ in den Shopify-Einstellungen aktiviert).
  • Performance: Wenn du Methode 1 (Apps) nutzt, achte darauf, dass die App die Ladezeit deines Shops nicht negativ beeinflusst.

Fazit

Für maximale Kontrolle und Echtzeit-Berechnung (Subtotal ändert sich sofort) ist eine App die beste Wahl. Wenn du nur ein einfaches Feld ohne zusätzliche Kosten möchtest, das den Code an den Checkout weiterreicht, ist Methode 2 (Code) die sauberste Lösung.

Tipp: Schreib dazu: "Der Rabatt wird im nächsten Schritt berechnet", falls du die Code-Lösung nutzt, um Verwirrung beim Kunden zu vermeiden!

0