Carieren eines Custom Produktkonfigurators auf Shopify

Das Wichtigste in Kürze

• Ein Shopify-Produktkonfigurator ermöglicht es Käufern, ein maßgeschneidertes Produkt auf der PDP zusammenzustellen – Holzart, Größe oder Gravur wählen – und diese Auswahl in den Warenkorb zu legen.
• Varianten kümmern sich um bepreiste, lagernde Kombinationen. Das Limit liegt jetzt bei 2.048 Varianten pro Produkt und weiterhin 3 Optionen pro Produkt. Alles darüber hinaus erfordert einen anderen Ansatz.
• Line Item Properties erfassen Freitext und Optionen ohne Preisaufschlag (Gravurtexte, Geschenknachrichten) und werden mit der Bestellung übermittelt. Sie ändern weder den Preis noch tracken sie eigenständig den Lagerbestand.
• Metafelder (Metafields) speichern feste Produktdaten (Materialien, Lieferzeiten, Optionslisten). Sie werden vom Händler definiert, nicht durch Kundeneingaben.
• Der ehrliche Vergleich: Apps sind schnell installiert, bringen aber zusätzliche Skripte und monatliche Kosten mit sich; nativer Code liefert dir einen schlanken, direkt ins Theme integrierten Konfigurator ohne Drittanbieter-Abhängigkeit. Genau diesen nativen Ansatz verfolgt Fudge.

Ein Shopify-Produktkonfigurator ist die Benutzeroberfläche auf einer Produktseite, auf der ein Käufer einen auf Bestellung gefertigten Artikel zusammenstellt, bevor er in den Warenkorb gelegt wird. Denk an konfigurierbare Möbel, individuellen Schmuck, Build-Your-Own-Bundles oder Made-to-Order-Kits. Der Käufer wählt Optionen, der Preis aktualisiert sich, und die Auswahl wird an die Bestellung angehängt, damit dein Team sie richtig abwickeln kann.

Dieser Guide behandelt die echten Bausteine: Varianten, Line Item Properties, Produktoptionen, Metafelder und individuelles Liquid sowie JavaScript. Er vergleicht den Native-Code-Ansatz mit Konfigurator-Apps, ohne so zu tun, als ob beide ohne Kompromisse auskommen. Jedes unten genannte Limit ist mit der offiziellen Shopify-Dokumentation abgeglichen.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Entwicklung und bereits mit hunderten Shopify-Stores gearbeitet. Wir haben Fudge entwickelt – einen AI-nativen Shopify Page Builder und Store Editor mit einer 4.8-Bewertung und einem Built for Shopify-Badge. Wir schreiben jeden Tag Liquid, JavaScript und CSS direkt in Themes, daher stammen die Erkenntnisse und Kompromisse in diesem Guide aus der Praxis mit echten Konfiguratoren und nicht bloß aus der Theorie.

Was ein Produktkonfigurator leisten muss

Ein Konfigurator hat vier Aufgaben. Jede davon ist mit einer anderen Shopify-Funktion (Primitive) verknüpft, und die falsche Wahl an dieser Stelle sorgt bei den meisten Setups für Probleme.

1. Optionen präsentieren - Swatches, Dropdowns, Buttons, Textfelder, Datei-Uploads.
2. Auf Auswahlen reagieren - abhängige Optionen ein- oder ausblenden, den Preis live aktualisieren, ungültige Kombinationen blockieren.
3. Das Ergebnis bepreisen - einige Auswahlen ändern den Preis (eine größere Größe), andere nicht (eine Geschenknachricht).
4. Die Auswahl in die Bestellung übergeben - damit Lager und Fulfillment genau sehen, was produziert werden muss.

Der Rest dieses Guides geht alle Shopify-Features durch und zeigt dir, wofür sie wirklich gemacht sind.

Ansatz 1: Varianten

Varianten sind Shopifys nativer Weg, bepreiste und lagernde Kombinationen eines Produkts abzubilden. Eine “Size”-Option und eine “Colour”-Option erzeugen ein Raster von Varianten, jede mit ihrem eigenen Preis, ihrer eigenen SKU und ihrem eigenen Lagerbestand.

Die Varianten-Limits, die du kennen musst

Shopify hat das Limit für Varianten im Oktober 2025 drastisch erhöht. Die aktuellen Zahlen:

• Ein Produkt kann bis zu 2.048 Varianten haben (früher 100).¹
• Ein Produkt ist aber nach wie vor auf 3 Optionen limitiert (zum Beispiel Größe, Farbe, Material).²

Genau dieses zweite Limit ist es, worüber Konfiguratoren stolpern. Mehr Varianten bedeuten nicht mehr Optionen. Wenn dein Made-to-Order-Produkt fünf oder sechs unabhängige Auswahlmöglichkeiten benötigt, können Varianten allein das nicht abbilden – ganz egal, wie hoch das Varianten-Limit gesetzt wird.

Auf der Entwicklerseite kann eine GraphQL-Query wie product oder productByHandle nun bis zu 2.000 Varianten für ein Einzelprodukt zurückliefern, und die productSet Mutation kann bis zu 2.000 Varianten asynchron in einem einzigen Call erstellen oder aktualisieren.³

Wann Varianten das richtige Tool sind

Nutze Varianten, wenn jede Kombination einen echten Preis sowie echten Bestand hat und du nicht mehr als drei Optionen brauchst. Ein T-Shirt in drei Größen und vier Farben ergibt 12 Varianten. Das löst man am besten mit Varianten.

Varianten sind außerdem der einzige Mechanismus, für den Shopify nativ Preise und Bestände trackt. Wenn sich durch eine Auswahl der Lagerbestand reduzieren soll, muss es sich zwingend um eine Variante handeln.

Wo Varianten an ihre Grenzen stoßen

Bei echten Built-to-order-Produkten funktionieren Varianten oft nicht mehr:

• Mehr als drei unabhängige Optionen.
• Optionen mit Freitext-Eingabe (ein Name für eine Gravur).
• Kombinationen, die du gar nicht auf Vorrat hast (ein Custom-Sofa in einem von 40 Stoffen über 6 Konfigurationen ergibt Tausende von Varianten, für die niemand den Bestand führt).

Genau hier kommen die anderen Features ins Spiel.

Ansatz 2: Line Item Properties

Line Item Properties sind Name-Wert-Paare, die mit einem spezifischen Artikel innerhalb einer bestimmten Bestellung verknüpft sind. Sie sind das absolute Arbeitstier bei Konfiguratoren. Im Gegensatz zu Varianten müssen sie nicht im Voraus angelegt werden und sie verfolgen keinen Lagerbestand.

Du erfasst sie mit Formular-Inputs namens properties[...] innerhalb des Produktformulars:

<form action="/cart/add" method="post" enctype="multipart/form-data">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <label for="engraving">Engraving text</label>
  <input type="text" id="engraving" name="properties[Engraving]" maxlength="20">

  <label for="wrap">Gift wrap</label>
  <select id="wrap" name="properties[Gift wrap]">
    <option value="None">None</option>
    <option value="Standard">Standard</option>
  </select>

  <button type="submit">Add to cart</button>
</form>

Was auch immer der Käufer hier tippt oder wählt, wird zur Property dieses Line Items, gut sichtbar im Cart, im Checkout, auf der Bestellübersicht und in der Bestätigungs-E-Mail.⁴

Versteckte Properties

Setze einen Unterstrich vor den Namen der Property, und Shopify verbirgt sie für den Kunden im Checkout, speichert sie aber dennoch in den Bestelldaten.⁵ Das ist ideal für interne Daten, die dein Team braucht, aber der Kunde nicht sehen soll:

<input type="hidden" name="properties[_config_id]" value="cfg_8842">

Die meisten Themes blenden diese mit Unterstrich versehenen Properties ebenfalls im Cart aus, das macht aber nicht jedes Theme, überprüfe also dein Cart-Template.

Auswahlen mit dem AJAX Cart übergeben

Wenn dein Konfigurator Produkte in den Warenkorb legt, ohne dass die Seite neu lädt, nutze die AJAX Cart API. Sende ein properties-Objekt per POST an /cart/add.js:

fetch('/cart/add.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id: variantId,
    quantity: 1,
    properties: {
      'Engraving': 'For Sam',
      'Gift wrap': 'Standard',
      '_config_id': 'cfg_8842'
    }
  })
})

Ein wichtiges Verhalten, das du kennen solltest: Ein POST, der properties enthält, überschreibt das gesamte Properties-Objekt für dieses Line Item. Du kannst nicht nur einen einzelnen Key patchen oder updaten, und du kannst Properties auch nicht wieder auf ein leeres Objekt zurücksetzen, sobald sie einmal gesetzt wurden – du musst das Line Item entfernen und wieder neu hinzufügen.⁶

Ansatz 3: Metafields

Metafields sind vom Händler definierte Daten, die an ein Produkt, eine Variante oder andere Ressourcen gehängt werden. Sie werden einmal im Shopify Admin gesetzt und nicht vom Käufer eingegeben.⁷

In einem Konfigurator beinhalten Metafields meist feste Referenzdaten, auf die deine Logik zurückgreift:

• Eine JSON-Liste aller gültigen Optionen und deren Preisauswirkungen.
• Lieferzeiten oder “Fertigung innerhalb von X Wochen”-Texte.
• Material-Spezifikationen, Pflegehinweise, Abmessungen.

Du liest sie ganz einfach mit Liquid aus, um dein UI zu rendern:

{% assign woods = product.metafields.custom.wood_options.value %}
{% for wood in woods %}
  <button data-price-delta="{{ wood.price_delta }}">{{ wood.name }}</button>
{% endfor %}

Die Faustregel lautet: Metafields beschreiben das Produkt, Line Item Properties erfassen die Auswahl des Shoppers. Für einen tieferen Einblick schau dir unseren Guide zum Hinzufügen von Metafields zu Shopify-Produkten an.

Das Configurator-UI bauen

Nachdem das Datenmodell feststeht, baut sich das Frontend aus Liquid (für das initiale Rendering) und JavaScript (für die Interaktivität) auf. Wie das technisch funktioniert, erfährst du in unseren Guides zum Anpassen einer Shopify-Produktseite und zum Einbauen von Custom JavaScript in Shopify.

Options-Picker

Rendere jede Option als Swatches, Buttons, Dropdowns oder Inputs. Auswahlen mit Preisänderung zielen auf Varianten ab; Auswahlen ohne Preisänderung fließen in die Line Item Properties. Ein sauberes Pattern ist es, die Preisauswirkung direkt mit einem data--Attribut im HTML-Element mitzuliefern, damit dein Skript den Preis auslesen kann, ohne etwas im Hintergrund abfragen zu müssen.

Conditional Logic

Made-to-Order-Produkte haben oft Abhängigkeiten miteinander. Eine Option wie “Monogramm-Position” sollte erst erscheinen, wenn der Haken für “Monogramm hinzufügen” gesetzt wurde. Das händelst du am besten, indem du auf Change Events hörst und abhängige Felder entsprechend ein- oder ausblendest:

document.querySelector('#add-monogram').addEventListener('change', (e) => {
  document.querySelector('#monogram-options').hidden = !e.target.checked;
});

Live-Preisupdates

Basispreis plus die Summe der gewählten Deltas. Berechne den Preis bei jeder Änderung neu:

function updatePrice() {
  let total = basePrice;
  document.querySelectorAll('[data-selected="true"]').forEach(el => {
    total += Number(el.dataset.priceDelta || 0);
  });
  priceEl.textContent = formatMoney(total);
}

Vorsicht an dieser Stelle: Der angezeigte Preis im Browser ist rein kosmetisch. Shopify berechnet im Checkout immer den Festpreis der Variante, die tatsächlich in den Warenkorb gelegt wurde. Wenn eine Option den Preis wirklich beeinflusst, die der Kunde zahlen muss, dann muss dies als Variante oder als separates Add-On-Produkt angelegt werden, und nicht als Line Item Property. Line Item Properties transportieren keine Preise.

Validierung

Ein Konfigurator, der es Käufern ermöglicht, unvollständige oder ungültige Auswahlen in den Warenkorb zu legen, sorgt unweigerlich für Fulfillment-Probleme. Validiere die Eingaben, noch bevor der Add-to-Cart-Request abfeuert.

• Erfordere zwingend benötigte Auswahlen. Blockiere den Submit-Button, bis jede Pflichtoption gesetzt wurde.
• Beschränke Freitexte. Limitiere die Länge einer Gravur per maxlength und blockiere Zeichen, die du (oder deine Systeme) nicht produzieren können.
• Sichere Abhängigkeiten ab. Wenn ein Monogramm ausgewählt ist, muss auch eine Position angegeben werden.

Das sind jedoch nur Client-Side Check – sie dienen lediglich der User Experience und können jederzeit umgangen werden. Für Dinge, die keinesfalls gebrochen werden dürfen – wie eine Maximalmenge, eine gebannte Kombi oder ein Mindestbestellwert – setze diese Regeln mit einer Shopify Function (für den Cart oder den Checkout) um. Diese läuft als Server-Side App direkt auf der Infrastruktur von Shopify und lässt sich vom Browser aus nicht austricksen.

Performance

Konfiguratoren fügen einer deiner kommerziell wichtigsten Seiten Skripte hinzu. Achte daher auf drei Dinge.

• Payload. Eine Configurator-App lädt oft ihr eigenes JavaScript-Bundle, CSS und manchmal auch noch ein ganzes Web-Framework in jede PDP. Dein selbstgeschriebener nativer Code kann aus ein paar wenigen Kilobytes bestehen, beschränkt nur auf die PDP.
• Render-Zeitpunkt. Rendere den anfänglichen Status der Optionen mit Liquid, sodass die Buttons sofort nach Ladebeginn sichtbar sind, und gib ihnen anschließend erst ihr Verhalten mit JavaScript. Das komplette Interface direkt durch ein Skript im Browser laden zu lassen, verzögert die Interaktivität extrem.
• Requests. Lies Optionsdaten stattdessen aus Inline-gerenderten Metafields aus, statt sie nach dem Laden der Seite erst noch extra zu fetchen.

Ein schlanker Konfigurator schützt deine Conversion Rate. Für einen tieferen Einblick schau dir unseren Guide zur verkaufsorientierten Shopify-Produktseite an.

Nativer Code vs. Configurator-Apps

Mit beiden Ansätzen lassen sich funktionsfähige Konfiguratoren live bringen. Der Unterschied liegt darin, was wirklich dir gehört und welche Kompromisse du eingehst.

Apps sind die richtige Wahl, wenn du noch diese Woche eine Lösung brauchst, dein Konfigurator ein absoluter Standard-Usecase ist und monatliche Gebühren in Ordnung sind.

Nativer Code gewinnt, wenn die Performance entscheidend ist, du für deinen Umsatz auf keine Drittanbieter angewiesen sein willst, oder dein Produkt viel Logik benötigt, die durch keine einfache Einstellung einer App abgebildet werden kann. Der große Nachteil hierbei waren in der Vergangenheit allerdings oft die Entwicklungszeit sowie der hohe Bedarf nach Entwicklern.

Genau hier setzt Fudge als Bindeglied an. Fudge ist ein Shopify-natives AI-System, das Liquid, JavaScript und CSS direkt in deinem Theme abbildet. Du beschreibst einfach, was für einen Konfigurator du brauchst, und Fudge generiert daraus produktionsfertigen, theme-eigenen Code – Option Pickers, Conditional Logic, Live Pricing und an den Warenkorb angebundene Line Item Properties – ganz ohne eine App von Drittanbietern. Du erhältst genau den schlanken nativen Code zu einem Bruchteil der eigentlichen Entwicklungskosten.

Alles zusammenfügen

Ein klassischer Made-to-Order-Konfigurator kombiniert all diese vier Funktionen:

• Varianten für alle Auswahlen, die Preise und Lagerbestand mit sich bringen (Größe, Basistyp).
• Line Item Properties für Freitexte und Preis-neutrale Optionen (Gravuren, Notizen, Uploads von Dateien).
• Metafields für fixe Optionslisten und Lieferzeiten, die von der Logik ausgelesen werden.
• Liquid und JavaScript für das Interface, die Conditional Logic und das Live-Pricing.

Modelliere erst das passende Datenmodell aus diesen Tools, baue danach das UI, validiere vor dem Cart und halte das Page Load schlank. Sollte eine Option den Bestand reduzieren oder den Preis verändern, mach dies unbedingt als Variante. Wenn es sich um Zusatzinformationen handelt, ist dies ideal für eine Line Item Property. Für detailliertes Options-Display deckt unser Guide zu der Custom-Liquid-Logik in Shopify alle Templates-Patterns ab.

FAQ