Shopify Produktkonfigurator: Wie du einen ohne App baust

Wichtigste Erkenntnisse

• Ein Shopify-Produktkonfigurator lässt Käufer ein maßgefertigtes Produkt auf der PDP zusammenstellen – Holz, Größe, Gravur wählen – und diese Auswahl in den Warenkorb 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 braucht einen anderen Ansatz.
• Line Item Properties erfassen Freitext und Optionen ohne Preis (Gravurtext, Geschenknachrichten) und werden mit der Bestellung übergeben. Sie ändern den Preis nicht und tracken von sich aus keinen Lagerbestand.
• Metafields speichern feste Produktdaten (Materialien, Lieferzeiten, Optionslisten). Sie werden von dir als Händler definiert, nicht durch Kundeneingaben.
• Der ehrliche Vergleich: Apps sind schnell installiert, bringen aber Skripte und monatliche Gebühren mit sich; nativer Code gibt dir einen schlanken Konfigurator direkt im Theme ohne Abhängigkeit von Drittanbietern. Genau diesen nativen Weg baut Fudge.

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

Dieser Guide behandelt die wahren Bausteine: Varianten, Line Item Properties, Produktoptionen, Metafields sowie Custom Liquid und JavaScript. Er vergleicht den nativen Code-Ansatz mit Konfigurator-Apps, ohne so zu tun, als gäbe es bei einem von beiden keine Kompromisse. Jedes der unten genannten Limits ist mit der offiziellen Shopify-Dokumentation abgeglichen.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und mit hunderten von Shopify-Stores gearbeitet. Wir bauen Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9 Bewertung im Shopify App Store und einem Built for Shopify Badge. Wir schreiben jeden Tag Liquid, JavaScript und CSS direkt in Themes – die Vor- und Nachteile in diesem Guide stammen also aus der Praxis mit echten Konfiguratoren, nicht 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: Können Shopify-Varianten einen Konfigurator abbilden?

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: Wann solltest du Line Item Properties nutzen?

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 du noch diese Woche live gehen musst, der Konfigurator Standard ist und eine monatliche Gebühr in Ordnung geht.

Nativer Code gewinnt, wenn Performance wichtig ist, du auf einer umsatzkritischen Seite keine Drittanbieter-Abhängigkeit willst oder dein Produkt eine Logik erfordert, die sich mit den Einstellungen einer App nicht abbilden lässt. Der Kompromiss bestand historisch gesehen in der Entwicklungszeit und der Notwendigkeit eines Entwicklers.

Genau diese Lücke schließt Fudge. Fudge, der KI-Operator für Shopify-Stores, schreibt Liquid, JavaScript und CSS direkt in dein Theme über seinen Store Editor. Du beschreibst den Konfigurator und er schreibt die Optionsauswahl, Bedingungslogik, Live-Preise und Warenkorb-Eigenschaften als Entwurf in dein Theme, den du auf der Produktseite testen kannst, bevor du ihn veröffentlichst. Sobald er live ist, vergleicht Fudge die Add-to-Cart- und Conversion-Raten auf dieser Seite davor und danach.

Sag Fudge zum Beispiel:

“Füge einen Konfigurator zu meiner Produktseite für den Eichentisch hinzu: eine Holzauswahl aus dem Metafeld wood_options mit Preisunterschieden, ein optionales Gravurfeld, das auf 20 Zeichen begrenzt ist, und eine Live-Gesamtsumme. Sende die Auswahl als Line Item Properties in den Warenkorb.”

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