Shopify ohne Apps

Joshua Maurer

Webentwickler & Freelancer

Februar 2026

Drei Shopify-Funktionen die normalerweise drei separate Apps brauchen – ein Fortschrittsbalken, ein automatisches Gratisgeschenk und Produktempfehlungen im Warenkorb – lassen sich mit Custom Liquid und JavaScript in einer einzigen Lösung bauen. Ohne monatliche Kosten, ohne zusätzliche HTTP-Requests, ohne Performance-Einbußen.

Für den Shopify-Shop Bodenständig von Arthur habe ich genau das umgesetzt. Bodenständig verkauft Gartenartikel für Selbstversorger – Saatgut, Dünger, Nutzpflanzen. Vorher lief der Cart mit der App Monk, die monatlich kostete und den Pageload merklich verlangsamte. Jetzt läuft alles über Custom Code direkt im Dawn-Theme – schneller, günstiger und exakt auf die Marke zugeschnitten.

In diesem Artikel zeige ich, wie die drei Features technisch zusammenspielen und warum Custom Code für viele Shopify-Shops die bessere Lösung ist als Apps.

┌─────────────────────────────────────┐
│         CART DRAWER                 │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  📊 FORTSCHRITTSBALKEN      │   │
│  │  Noch €12,50 bis Geschenk   │   │
│  │  [████████░░░░░░░░] 30€  60€│   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  🛒 WARENKORB-ARTIKEL       │   │
│  │  Tomatensamen     €4,90     │   │
│  │  Dünger Bio       €12,90    │   │
│  │  ─────────────────────────  │   │
│  │  🎁 Gratis Saatgut Kostenlos│   │
│  │     (auto-add ab €30)       │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  💡 DAS PASST DAZU          │   │
│  │  [Bild][Bild][Bild] →      │   │
│  │  Shopify Recommendations API│   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  Zur Kasse  →               │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

Warum sind Shopify-Apps ein Problem für die Performance?

Jede Shopify-App lädt eigenes JavaScript, eigenes CSS und oft zusätzliche externe Requests – bei jedem einzelnen Seitenaufruf. Drei Apps für Cart-Features können den Pageload um mehrere hundert Millisekunden verlängern.

Bei Bodenständig war die Situation typisch: Die App Monk übernahm den Fortschrittsbalken und die Geschenk-Logik im Warenkorb. Sie funktionierte, aber sie lud ihr eigenes Script-Bundle, injizierte eigenes Styling und machte zusätzliche API-Calls. Das summierte sich – besonders auf Mobilgeräten, wo Arthurs Zielgruppe größtenteils unterwegs ist.

Das grundlegende Problem: Apps laufen als externe Schicht über dem Theme. Sie können nicht direkt ins Theme integriert werden, weil sie für tausende verschiedene Shops funktionieren müssen. Das macht sie zwangsläufig generischer und schwerer als eine maßgeschneiderte Lösung. Und sie kosten monatlich – im Fall von Bodenständig ca. 50 €/Monat für Features, die sich einmalig mit Custom Code lösen lassen.

Was macht der Fortschrittsbalken im Cart Drawer?

Der Fortschrittsbalken zeigt dem Kunden in Echtzeit, wie nah er an zwei Schwellenwerten ist: Ab 30 € gibt es ein gratis Saatgut-Tütchen, ab 60 € gratis Versand.

Der Balken reagiert auf jede Änderung im Warenkorb – Produkt hinzufügen, Menge ändern, Produkt entfernen. Die Anzeige aktualisiert sich ohne Seitenreload, inklusive animiertem Übergang der Füllbreite.

Technisch besteht der Fortschrittsbalken aus drei Elementen: Einem Text-Bereich der den verbleibenden Betrag anzeigt ("Noch €12,50 für ein gratis Saatgut-Tütchen"), einem visuellen Balken mit zwei Markern bei 30 € und 60 €, und Labels unter dem Balken die sich grün färben sobald der Schwellenwert erreicht ist.

Die Texte wechseln je nach Status:

• Unter 30 €: "Noch €X für ein gratis Saatgut-Tütchen"
• Zwischen 30 € und 60 €: "🎁 Gratis Saatgut gesichert! Noch €X bis gratis Versand"
• Ab 60 €: "✅ Gratis Versand & gratis Saatgut gesichert!"

Der initiale Zustand wird serverseitig in Liquid berechnet, damit der Balken beim Öffnen des Cart Drawers sofort korrekt angezeigt wird – ohne Flackern, ohne Nachladen. Alle nachfolgenden Updates laufen clientseitig über JavaScript.

Wie funktioniert das automatische Gratisgeschenk?

Ab einem Warenwert von 30 € wird automatisch ein gratis Saatgut-Tütchen in den Warenkorb gelegt. Fällt der Wert unter 30 €, wird es automatisch wieder entfernt. Der Kunde muss nichts tun.

Das Geschenk ist ein normales Shopify-Produkt mit Preis 0 € und Status "unlisted" – es taucht also nicht im Shop auf, ist aber über die Variant-ID per API ansprechbar. Beim Hinzufügen wird eine versteckte Property _gift: true mitgegeben. Der Unterstrich vor "gift" ist wichtig: Shopify zeigt Properties die mit Unterstrich beginnen nicht im Checkout an.

Über diese Property erkennt das System das Geschenk an jeder Stelle – beim Berechnen des Warenwerts ohne Geschenk, beim Anzeigen im Cart (grüner Hintergrund, "🎁 Geschenk"-Badge statt Preis), und beim Entfernen.

// Geschenk hinzufügen über Shopify Cart API
await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        items: [{
            id: GIFT_VARIANT_ID,
            quantity: 1,
            properties: { '_gift': 'true' }
        }]
    })
});

Das Geschenk-Item im Cart sieht anders aus als normale Produkte: Grüner Hintergrund, kein Preis (stattdessen "Kostenlos"), kein Quantity-Selector, kein Löschen-Button – nur ein 🎁 Emoji. Der Kunde sieht sofort: Das ist ein Geschenk, das gehört dazu, das kann er nicht verändern.

Die größte technische Herausforderung war die Vermeidung von Race Conditions. Wenn der Kunde schnell mehrere Produkte hinzufügt oder entfernt, können sich die AJAX-Calls überschneiden. Ein isUpdating-Flag, Rate Limiting (mindestens 3 Sekunden zwischen Gift-Checks) und ein Debounce-Timer auf Cart-Events verhindern, dass das Geschenk doppelt hinzugefügt oder bei einem Zwischenstand fälschlicherweise entfernt wird.

Wie funktionieren die Produktempfehlungen im Cart Drawer?

Der Cart Drawer zeigt unter den Warenkorb-Artikeln passende Produktempfehlungen an – basierend auf Shopifys eigener Product Recommendations API, nicht über eine externe App.

Die Empfehlungen werden mit dem Intent "complementary" geladen – das liefert Produkte die zum aktuellen Warenkorb passen, basierend auf Shopifys Search & Discovery Algorithmus. Das System iteriert durch alle Produkte im Warenkorb und sammelt Empfehlungen. Produkte die bereits im Warenkorb liegen, werden herausgefiltert.

Die Darstellung ist ein horizontal scrollbarer Bereich mit Produktkarten: Bild, Titel, Preis und ein "hinzufügen"-Button. Pfeil-Buttons links und rechts ermöglichen das Navigieren. Beim Klick auf "hinzufügen" wird das Produkt direkt per AJAX in den Warenkorb gelegt – mit einer versteckten Property _source: cart_recommendation für späteres Tracking in den Bestellungen.

// Empfehlungen laden über Shopify Recommendations API
const url = `/recommendations/products?section_id=cart-recommendations&product_id=${productId}&limit=10&intent=complementary`;
const response = await fetch(url);

Der Clou: Die Empfehlungen werden als eigene Shopify Section gerendert (cart-recommendations). Das bedeutet sie nutzen Shopifys Template-Engine und brauchen keine externe API. Kein zusätzliches JavaScript-Bundle, keine monatlichen Kosten, keine Third-Party-Requests.

Nach jeder Cart-Änderung werden die Empfehlungen automatisch neu geladen. Ein MutationObserver auf dem Cart-Items-Container erkennt DOM-Änderungen durch das Dawn-Theme und triggert ein Reload. Parallele Requests werden über ein Loading-Flag verhindert, mit einem Safety-Reset nach 10 Sekunden falls etwas hängt.

Wie spielen die drei Features zusammen?

Alle drei Features teilen sich einen einzigen JavaScript-Block und reagieren auf dieselben Cart-Events. Das ist der entscheidende Unterschied zu drei separaten Apps, die jeweils eigene Event-Listener und eigene Cart-API-Calls mitbringen würden.

Der Ablauf bei einer Warenkorb-Änderung:

1. Der Kunde fügt ein Produkt hinzu oder ändert die Menge
2. Dawn's Theme feuert ein cart:updated Event
3. Ein zentraler Handler wartet 800ms (Debounce), dann holt er den aktuellen Cart via /cart.js
4. Der Fortschrittsbalken wird mit dem neuen Warenwert aktualisiert
5. Nach weiteren 1.500ms wird der Gift-Check ausgeführt – Geschenk hinzufügen oder entfernen falls nötig
6. Die Produktempfehlungen werden parallel neu geladen

Der Debounce und die gestaffelten Timeouts sind wichtig. Wenn der Kunde schnell drei Mal auf "Plus" klickt, soll nicht dreimal der Cart geholt, dreimal das Geschenk geprüft und dreimal die Empfehlungen geladen werden. Stattdessen wartet das System bis die Klickserie vorbei ist und macht dann einen einzigen, sauberen Update-Durchlauf.

Was spart der Shopbetreiber durch Custom Code statt Apps?

Die direkten Kosten sind einfach zu berechnen: Ca. 50 € pro Monat für Apps, die jetzt durch Custom Code ersetzt sind. Das sind 600 € pro Jahr – und der Code gehört dem Shopbetreiber, nicht einem App-Anbieter.

Aber die indirekten Ersparnisse sind wichtiger:

Performance: Kein zusätzliches JavaScript-Bundle einer externen App. Kein zusätzliches CSS das das Layout verschiebt. Keine Third-Party-Requests die den Pageload blockieren. Bei einem Shopify-Shop, dessen Zielgruppe größtenteils mobil unterwegs ist, macht jede eingesparte Sekunde Ladezeit einen messbaren Unterschied in der Conversion Rate.

Kontrolle: Jedes Detail ist anpassbar – Farben, Texte, Schwellenwerte, Verhalten. Wenn Arthur morgen statt 30 € einen Schwellenwert von 25 € will, ist das eine Zeile Code statt ein Support-Ticket beim App-Anbieter. Wenn er statt eines Saatgut-Tütchens ein anderes Produkt verschenken will, tauscht er eine Variant-ID aus.

Stabilität: Keine App-Updates die unerwartet das Design ändern. Kein Risiko, dass der App-Anbieter sein Preismodell ändert oder den Dienst einstellt. Der Code liegt im Theme, funktioniert so lange der Shop läuft und ist bei einem Theme-Wechsel portierbar.

Tracking: Die versteckten Properties _gift und _source: cart_recommendation ermöglichen in den Shopify-Bestellungen eine direkte Zuordnung – welche Produkte kamen als Geschenk in den Warenkorb, welche über Empfehlungen. Das liefert Daten für die Optimierung, die die meisten Apps nicht bieten.

Wann lohnt sich Custom Code statt einer Shopify-App?

Custom Code lohnt sich wenn die Anforderung klar definiert ist, die App eine Funktion übernimmt die sich mit Liquid und JavaScript lösen lässt, und der Shop langfristig betrieben wird.

Custom Code ist besser wenn:

Die Funktion klar umrissen ist – Fortschrittsbalken, Geschenk-Logik, Cart-Empfehlungen sind perfekte Kandidaten. Die App Performance-Probleme verursacht. Der Shop eine individuelle Darstellung braucht die sich mit App-Einstellungen nicht umsetzen lässt. Die monatlichen App-Kosten sich über 6-12 Monate auf mehr summieren als die einmalige Entwicklung.

Eine App ist besser wenn:

Die Funktion extrem komplex ist und regelmäßig Updates braucht – z.B. Abo-Verwaltung mit Dunning, Produktbundles mit komplexer Preislogik. Der Shopbetreiber häufig selbst Einstellungen ändern will ohne einen Entwickler einzubeziehen. Die App A/B-Testing oder Analytics mitbringt die aufwändig nachzubauen wären. Der Shop gerade erst startet und noch nicht klar ist welche Features langfristig gebraucht werden.