Die zweite Nachricht der Grooming-Marke, die wir Kestrel nennen, kam ein paar Wochen nach dem Projekt mit den individuellen Sections. Sie bestand aus einem einzigen Screenshot: die Produktseite eines Schmuckshops mit einer Reihe Karten unter dem Warenkorb-Button, Kauf 1, bekomm 1 gratis, wähle dein zweites Teil. Darunter stand nur: Geht das auch bei uns?
Ein Shopify „Kauf eins, bekomm eins gratis“-Angebot ist im Admin schnell eingerichtet. Schwierig ist, dass Kunden es auch nutzen. Diese Fallstudie zeigt, wie wir die Auswahl gebaut haben, warum wir den Code des Vorbilds nicht kopiert haben und welche eine Shopify-Einstellung das zweite Produkt wirklich kostenlos macht.
Zu dieser Fallstudie: Sie ist eine Zusammenstellung aus echter Shopify-Projektarbeit. Markenname, Produktfotos und einige Details wurden geändert, die Produktbilder sind Illustrationen. Code-Muster, Probleme und Lösungen sind genau so, wie wir sie umgesetzt haben.
Das Projekt auf einen Blick
| Kunde | Direct-to-Consumer-Grooming-Marke für Männer, Niederlande (niederländischer Shop, EUR) |
| Plattform | Shopify Online Store 2.0, bestehendes Premium-Theme beibehalten |
| Umfang | 1 Snippet, 1 Stylesheet, 1 Skript, 1 neuer Produktseiten-Block, keine Apps |
| Rabatt | Nativer automatischer Shopify-Rabatt (Kaufe X, erhalte Y) |
| Lieferung | Vom Händler selbst im Code-Editor des Themes installiert, Datei für Datei |
Warum ein nativer BOGO-Rabatt nicht reicht
Shopify unterstützt „Kaufe X, erhalte Y“-Rabatte seit Jahren. Einmal eingerichtet, greift der Rabatt, sobald die richtigen Produkte im Warenkorb liegen. Das Problem steckt im Wort sobald. Die Kundin muss wissen, dass es das Angebot gibt, die Produktseite verlassen, ein passendes Produkt finden, es hinzufügen und zurückkommen. Die meisten tun das nicht. Ein Banner „1+1 gratis“ ohne direkte Möglichkeit zu handeln erzeugt vor allem E-Mails mit der Frage, warum der Rabatt nicht funktioniert hat.
Der Vorbild-Shop hatte das mit einer Auswahl gelöst: passende Produkte genau dort, wo die Kaufentscheidung fällt, ein Tipp zum Auswählen, und der Hauptbutton wechselt zu 2 Produkte in den Warenkorb. Genau dieses Erlebnis wollte Kestrel.
Das Vorbild lesen und dann zur Seite legen
Der Händler schickte CSS, JavaScript und HTML des Vorbild-Shops mit. Es war sorgfältige Arbeit: rund 400 Zeilen mit Bottom-Sheets, einer „Alle ansehen“-Ebene, Erkennung der Hintergrundfarbe von Produktfotos und einem eigenen Warenkorb-Request. Es war aber für ein anderes Theme, ein anderes Formular und einen anderen Warenkorb-Drawer geschrieben, und es gehörte jemand anderem.
Also nutzten wir es als Beschreibung des Verhaltens, nicht als Code. Bevor wir etwas schrieben, lasen wir das Produktformular in Kestrels Theme. Das wurde die wertvollste Stunde des Projekts.
Die Entdeckung: Das Theme konnte bereits zwei Produkte hinzufügen
Das product-form-Element des Themes hat eine Funktion für „Wird oft zusammen gekauft“-Checkboxen. Beim Absenden sammelt es jedes angehakte input[name="bundles"] in einem mit dem Formular verknüpften Element und sendet es zusammen mit dem Hauptprodukt an /cart/add.js. Außerdem kümmert es sich um den Warenkorb-Drawer, den Warenkorbseiten-Modus, Fehlermeldungen und den Sticky-Warenkorb-Button.
Die Auswahl brauchte also gar keinen eigenen Warenkorb-Request. Jede Karte enthält eine versteckte Checkbox mit dem Namen bundles, und das Auswahl-Element trägt die ID des Formulars:
<bogo-picker form="{{ product_form_id }}">
<label class="bogo-card__btn">
<input type="checkbox" name="bundles" value="{{ variant.id }}" class="sr-only">
<span>Choose</span>
</label>
</bogo-picker>Wird eine Karte gewählt, ist ihre Checkbox angehakt. Ein Klick auf den Hauptbutton, und das Theme legt beide Produkte mit einem Request in den Warenkorb, öffnet seinen eigenen Drawer und aktualisiert die Anzahl, genau wie bei jedem anderen Produkt. Unser JavaScript umfasst rund hundert Zeilen, und keine davon berührt den Warenkorb.
Die Details, die es nativ wirken lassen
- Immer nur ein Gratisprodukt. Wird eine Karte gewählt, werden die anderen abgewählt, damit niemand versehentlich drei Gratisartikel hinzufügt.
- Ein Button, der sagt, was passiert. Ist eine Karte gewählt, wechselt der Text zu „2 Produkte in den Warenkorb“. Das Theme setzt diesen Text bei jedem Variantenwechsel zurück, deshalb stellt ein kleiner
MutationObserverihn wieder her. - Varianten auf der Karte. Produkte mit mehreren Varianten bekommen ein kompaktes Dropdown, und der Checkbox-Wert folgt ihm.
- Bündige Karten. Die Karten teilen sich Grid-Zeilen über CSS Subgrid, sodass Namen, Preise und Buttons auf einer Linie stehen, auch wenn ein Name zweizeilig ist.
- Mobile first. Auf dem Smartphone sind 2,3 Karten sichtbar, die nächste lugt am Rand hervor; auf dem Desktop drei Karten mit Pfeil-Buttons.
- Sauberes Zurücksetzen. Nach erfolgreichem Hinzufügen hört die Auswahl auf das
cartUpdate-Event des Themes und leert die Auswahl.
Der Block wird im Theme-Editor wie jeder andere Produktseiten-Block hinzugefügt. Der Händler wählt eine Kollektion mit passenden Produkten oder ein Produktlisten-Metafeld für produktspezifische Angebote. Texte wie „Gratis“, „Wählen“ und der Button-Text sind Einstellungen. Das aktuelle Produkt und ausverkaufte Produkte werden automatisch ausgeblendet.
Damit das zweite Produkt wirklich gratis ist
Die Auswahl legt nur zwei Produkte in den Warenkorb. Den Preis regelt Shopify mit einem automatischen Rabatt:
- Lege eine Kollektion mit den Produkten an, die verschenkt werden dürfen, zum Beispiel „BOGO Gratis“.
- Erstelle unter Rabatte einen Rabatt vom Typ Kaufe X, erhalte Y mit der Methode Automatisch.
- Kunde kauft: Mindestmenge 1 aus einer Kollektion mit allen bezahlten Produkten.
- Kunde erhält: Menge 1 aus „BOGO Gratis“ zum Wert Kostenlos.
- Aktiviere Maximale Anzahl an Nutzungen pro Bestellung festlegen und trage 1 ein, sonst ergeben drei Käufe drei Gratisprodukte.
Im Feld „Kunde kauft“ gibt es in Shopify keine Option „alle Produkte“, deshalb braucht man dort eine Kollektion. Eine automatisierte Kollektion mit der Bedingung „Preis ist größer als 0“ hält sich selbst aktuell. Ein Sonderfall ist wichtig: Sind die Gratisprodukte auch in dieser Kollektion, ergibt der Kauf von zwei Artikeln aus „BOGO Gratis“ einen davon gratis. Für die meisten Shops ist das in Ordnung. Wenn nicht, versieh die BOGO-Produkte mit einem Tag und schließe es in den Bedingungen der Kollektion aus.
Installation ohne Theme-Upload
In Kestrels Live-Theme lagen noch andere unveröffentlichte Änderungen, ein Upload einer neuen Theme-Version kam also nicht infrage. Wir lieferten die Funktion als fünf präzise Schritte für den Code-Editor: drei neue Dateien (ein Snippet, ein Stylesheet und ein Skript) und zwei kleine Ergänzungen in der Produkt-Section, eine Render-Zeile und ein Block-Eintrag im Schema. Jeder Schritt nannte genau die Zeile, nach der gesucht werden muss, und was darüber eingefügt wird. Weil jede Änderung nur ergänzt, übersteht sie das nächste Theme-Update mit ein paar Minuten Arbeit.
Außerdem gestalteten wir ein einfaches Vorschaubild für die Kollektion „BOGO Gratis“, damit sie überall, wo das Theme sie zeigt, fertig aussieht.
Was wir jedem Shop raten, der BOGO plant
- Biete die Wahl dort an, wo die Entscheidung fällt. Ein Angebot, das Kunden selbst zusammenstellen müssen, lassen die meisten liegen.
- Lies dein Theme, bevor du Code schreibst. Die beste Codezeile dieses Projekts ist die, die wir nicht schreiben mussten, weil das Theme Bundles schon in den Warenkorb legen konnte.
- Lass die Preislogik in Shopify. Ein nativer automatischer Rabatt funktioniert im Warenkorb, an der Kasse und in jedem Bericht und lässt sich pausieren, ohne das Theme anzufassen.
- Begrenze die Nutzungen pro Bestellung ab dem ersten Tag.
Du möchtest eine Gratis-Auswahl, einen Bundle-Builder oder eine andere individuelle Funktion auf deinen Produktseiten? Sieh dir unsere Shopify-Theme-Entwicklung an oder erzähl uns von deinem Shop.
Häufige Fragen
Unterstützt Shopify „Kauf eins, bekomm eins gratis“ ohne App?
Ja. Automatische „Kaufe X, erhalte Y“-Rabatte sind in Shopify eingebaut. Was fehlt, ist eine Möglichkeit, das Gratisprodukt auf der Produktseite auszuwählen, und genau das ergänzt die Auswahl.
Funktioniert die Auswahl mit meinem Theme?
Die Idee funktioniert mit jedem Online Store 2.0-Theme. Die Umsetzung hängt davon ab, wie das Produktformular deines Themes Produkte hinzufügt. Hier haben wir die Bundle-Funktion des Themes genutzt; in anderen Themes fügen wir beide Artikel mit einem Request an die Cart API hinzu.
Kann das Gratisprodukt Varianten haben?
Ja. Produkte mit mehreren Varianten zeigen ein kleines Dropdown auf der Karte, und die gewählte Variante landet im Warenkorb.
Können Kunden das Angebot ausnutzen?
Was gratis ist, entscheidet der Rabatt, nicht die Auswahl. Mit maximal einer Nutzung pro Bestellung bekommt niemand mehr als ein Gratisprodukt pro Bestellung.
Kann ich bei verschiedenen Produkten verschiedene Gratisprodukte zeigen?
Ja. Standardmäßig liest der Block eine Kollektion, ein Produktlisten-Metafeld kann sie pro Produkt überschreiben.