Custom Bundle Builder in Shopify Custom Bundle Builder in Shopify

Custom Bundle Builder in Shopify

Übersicht
yoffi-digital

Custom Bundle Builder für Shopify: Die Lösung für Offset Nutrition

Shopify gibt dir eine starke Basis für deinen Online-Shop.
Sobald du jedoch komplexe Bundles abbilden möchtest, stößt das Standard-Setup schnell an Grenzen:

  • mehrstufige Sets
  • unterschiedliche Variantenpreise
  • Pflichtbestandteile
  • Mindestmengen
  • Refill-Logiken
  • kombinierbare Rabattcodes

Genau vor dieser Herausforderung stand Offset Nutrition.

Eine klassische Bundle-App hätte die Anforderungen nicht sauber abbilden können. Deshalb haben wir eine Custom Shopify Bundle Builder entwickelt, die vollständig auf Shopify-Bordmitteln basiert.

Warum eine Custom Lösung?

Offset arbeitet mit unterschiedlichen Bundle-Typen:

  • einfache Bundles mit nur einem Level
  • mehrstufige Startersets
  • große Bundles mit fünf oder mehr Auswahlstufen
  • Refill Bundles mit Zugriffsbeschränkung

Zusätzlich sollte:

  • die Rabattierung prozentual erfolgen
  • der Rabatt auf Basis der tatsächlich gewählten Varianten berechnet werden
  • eine Mindestanzahl an Varianten geprüft werden
  • Pflichtbestandteile sauber integriert sein
  • Das System mit Shopify Rabattcodes kompatibel bleiben

Spätestens hier war klar: Eine klassische Bundle-App würde diese Logik nicht stabil und erweiterbar abbilden können.

Warum wir uns bewusst gegen eine App entschieden haben

Viele Bundle-Apps funktionieren gut für einfache Set-Logiken. Doch bei Offset ging es um:

  • dynamische Variantenpreise
  • frei definierbare Level-Strukturen
  • Mindest- und Maximalmengen pro Level
  • Refill-Restriktionen abhängig vom Kundenstatus
  • native Integration in Shopify Functions
  • zukunftssichere Erweiterbarkeit

Standard-Apps arbeiten häufig mit statischen Preisstrukturen oder greifen stark in die Discount-Logik ein. Dazu kommen monatliche Kosten und eingeschränkte Kontrolle über Daten und Weiterentwicklung.

Die Entscheidung für eine Custom Lösung war daher strategisch.
Nicht um etwas Besonderes zu bauen, sondern um ein stabiles Fundament zu schaffen.

Die Architektur: Drei Bausteine

Der Bundle Builder basiert auf:

  • Metaobjekten für die Struktur
  • Produkt-Metafields für Konfiguration
  • einer Cart Transform Function für serverseitige Logik

Diese Trennung war essenziell. Daten, Konfiguration und Business Logik sind sauber voneinander getrennt.

Die strukturelle Grundlage

Metaobjekte: Die strukturelle Grundlage

Jedes Bundle besteht aus mehreren Leveln. Diese Level sind als eigene Metaobjekte angelegt.

Pfad im Admin:
Settings → Custom Data → Metaobjects → product_bundle_level

Ein Bundle Level enthält:

  • interne Bezeichnung
  • Titel für die PDP
  • Liste zulässiger Varianten
  • minimale Anzahl wählbarer Varianten
  • maximale Anzahl wählbarer Varianten
  • Kennzeichnung als Pflichtbestandteil
  • Kennzeichnung als optionaler Bestandteil

Die Logik dahinter:

  • sind Min und Max identisch, muss exakt diese Anzahl gewählt werden
  • sind beide Werte 0, handelt es sich um einen festen Bestandteil
  • optionale Bestandteile können in der Menge angepasst werden

Damit lassen sich sehr unterschiedliche Bundles modellieren:

  • ein Level mit vier Produkten
  • zwei Level mit je zwei Produkten
  • fünf Level mit flexiblen Auswahlmöglichkeiten

Die Struktur bleibt skalierbar, ohne Code anpassen zu müssen.

yoffi-digital

Das Parent Produkt als Konfigurationsanker

Jedes Bundle besitzt ein Mutterprodukt mit einem Preis von 0 Euro.

Der finale Preis entsteht dynamisch.

Am Parent Produkt sind drei zentrale Metafields hinterlegt:

  • Bundle Levels: Referenz auf die zugehörigen Metaobjekte
  • Bundle Discount: Prozentualer Rabattwert
  • Bundle Variants JSON: Variantendaten für die Frontend-Preisberechnung

Das Parent Produkt enthält keine Logik, sondern ausschließlich Konfiguration.

Cart Transform Function: Die zentrale Rabattlogik

Die eigentliche Preisberechnung läuft über eine Shopify Cart Transform Function.

Warum diese API?

Weil nur über die Cart Transform API möglich ist:

  • Preise serverseitig zu überschreiben
  • Bundle-Komponenten zu mergen oder zu expandieren
  • Titel und Darstellung im Warenkorb anzupassen
  • die Logik direkt in den Checkout-Flow zu integrieren

Wichtig: Pro Store kann nur eine Cart Transform Function installiert werden.
Die Architektur muss daher von Anfang an sauber geplant sein.

So werden die Varianten übergeben

Die gewählten Komponenten werden über line item attributes übermittelt:

line.attributes._components
{ "id": "gid://shopify/ProductVariant/variantID", "quantity": 2 },
{ "id": "gid://shopify/ProductVariant/variantID", "quantity": 1 }

Die Function prüft:

  1. Ist die Mindestanzahl erreicht?
  2. Wie hoch ist der Gesamtpreis aller gewählten Varianten?
  3. Welcher prozentuale Rabatt ist im Metafield hinterlegt?

Erst wenn die Mindestanzahl erfüllt ist, wird der Rabatt angewendet und der Preis im Warenkorb überschrieben.

Da Variantenpreise unterschiedlich sind, funktioniert das ausschließlich über eine dynamische, prozentuale Berechnung.

Refill Bundles ohne Drittanbieter-App

Einige Bundles dürfen nur gekauft werden, wenn:

  • mindestens ein Starterset gekauft wurde

Statt einer externen Tagging-App setzen wir hier auf Shopify Flow.

Nach Kauf eines Startersets wird automatisch der Tag "gekauft" gesetzt.

Im Frontend prüfen wir:

  • Ist ein Customer:in vorhanden?
  • Ist der erforderliche Tag gesetzt?

Falls nicht, wird der Add-to-Cart-Button deaktiviert und ein Hinweis angezeigt.

Die komplette Logik bleibt damit im Shopify-Ökosystem.

Die Mockups zeigen den Vorher-Nachher-Vergleich des neu entwickelten Bundle Builders, mit dem Kund:innen eigene Produkt-Kombinationen erstellen und Preise dynamisch berechnen können.
Die Mockups zeigen den Vorher-Nachher-Vergleich des neu entwickelten Bundle Builders, mit dem Kund:innen eigene Produkt-Kombinationen erstellen und Preise dynamisch berechnen können.

Preislogik im Frontend

Da das Parent Produkt 0 kostet, berechnen wir die Preise dynamisch.

In der Buy Box zeigen wir:

  • einen Ab Preis auf Basis der günstigsten Variantenauswahl inklusive Pflichtbestandteile, rabattiert
  • einen Vergleichspreis als Originalpreis aller Komponenten

Pflichtbestandteile sind feste Bestandteile des Bundles und keine Geschenke.
0-Euro-Anzeigen wurden vollständig entfernt.

yoffi-digital

Fazit: Was bringt diese Custom Lösung konkret?

Der Offset Bundle Builder ist kein reines Frontend-Feature, sondern eine bewusst aufgebaute Systemarchitektur auf Basis nativer Shopify-Mechaniken.

Technisch bedeutet das: volle Kontrolle über die Datenstruktur via Metaobjekte und Metafields, serverseitige Rabattlogik über die Cart Transform Function API, Kompatibilität mit nativen Rabattcodes und Erweiterbarkeit durch weitere Shopify Functions. Preislogik und Bundle-Struktur werden zentral im Admin und nicht im Theme gesteuert.

Strategisch entsteht ein Setup ohne App-Abhängigkeiten und ohne laufende Lizenzkosten. Es ist skalierbar, kampagnenfähig und für Shopify Plus langfristig ausgelegt.

yoffi-digital

Du benötigst Hilfe beim Setup eines Bundle Builders?

Weitere Artikel