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 an einen bestimmten Artikel in einer bestimmten Bestellung angehängt werden. Sie sind das Arbeitstier von Konfiguratoren. Im Gegensatz zu Varianten müssen sie nicht im Voraus existieren und erfassen 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 eingibt oder auswählt, wird zu einer Eigenschaft dieses Line Items, sichtbar im Warenkorb, im Checkout, in der Bestellung und in der Bestätigungs-E-Mail.⁴

Versteckte Properties

Setze einen Unterstrich vor den Eigenschaftsnamen und Shopify versteckt ihn im Checkout vor dem Kunden, speichert ihn aber trotzdem in der Bestellung.⁵ Nutze das für interne Daten, die dein Team braucht, aber der Käufer nicht sehen soll:

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

Die meisten Themes überspringen Eigenschaften mit einem Unterstrich auch im Warenkorb, aber nicht jedes Theme tut das – überprüfe also dein Warenkorb-Template.

Auswahlen mit dem AJAX Cart übergeben

Wenn dein Konfigurator Produkte ohne Seiten-Reload zum Warenkorb hinzufügt, nutze die AJAX Cart API. Sende ein properties-Objekt 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 komplette properties-Objekt für dieses Line Item. Du kannst nicht nur einen einzelnen Key patchen und die Eigenschaften nach dem Setzen auch nicht wieder auf ein leeres Objekt zurücksetzen – du musst das Line Item entfernen und 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 Abhängigkeiten. Eine Option wie „Monogramm-Position“ sollte erst erscheinen, wenn „Monogramm hinzufügen“ angehakt ist. Du löst das, indem du auf Change-Events hörst und die abhängigen Felder 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 ausgewählten Aufpreise. Bei jeder Änderung neu berechnen:

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

Eine Warnung: Der angezeigte Preis ist rein kosmetisch. Shopify berechnet den Preis der Variante, die tatsächlich in den Warenkorb gelegt wird. Wenn eine Option wirklich ändert, was der Kunde bezahlt, muss es eine Variante oder ein separates kostenpflichtiges Add-on-Produkt sein, keine Line Item Property. Line Item Properties haben keinen Preis.

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

Beide Ansätze liefern funktionierende Konfiguratoren. Der Unterschied liegt darin, was dir gehört und was du mitschleppst.

Apps sind die richtige Wahl, wenn etwas noch diese Woche live gehen muss, der Konfigurator Standard ist und eine monatliche Gebühr akzeptabel ist.

Nativer Code gewinnt, wenn Performance wichtig ist, du keine Drittanbieter-Abhängigkeit auf einer umsatzkritischen Seite haben willst oder dein Produkt eine Logik braucht, die eine App durch Einstellungen nicht abbilden kann. Der Kompromiss war in der Vergangenheit die Entwicklungszeit und dass man einen Entwickler brauchte.

Genau diese Lücke schließt Fudge. Fudge ist ein Shopify-natives KI-System, das Liquid, JavaScript und CSS direkt in dein Theme schreibt. Du beschreibst den gewünschten Konfigurator und es generiert produktionsreifen Code, der ganz dir und deinem Theme gehört – Option-Picker, bedingte Logik, Live-Preise, Line Item Properties, die mit dem Warenkorb verknüpft sind – ohne eine Drittanbieter-App reinzuziehen. Du bekommst ein schlankes, natives Ergebnis bei weitem geringeren 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