Konfiguratoren auf Shopify: Best Practises am Beispiel des FC Union Berlin

Denkst du über einen Konfigurator für deinen Onlineshop nach? Oder hast du bereits einen und möchtest ihn optimieren? Individualisierte Produkte können die Zufriedenheit deiner Kund:innen spürbar steigern – schließlich sorgt Personalisierung für ein einzigartiges Einkaufserlebnis, eine höhere Kaufbereitschaft und eine stärkere Kundenbindung.

In diesem Artikel werfen wir einen Blick auf die verschiedenen Möglichkeiten für Produktkonfiguratoren auf Shopify und welche Ansätze wir als erfahrene Agentur empfehlen. Als spannendes Praxisbeispiel blicken wir genauer auf den Trikot-Konfigurator des 1. FC Union Berlin: Um Fans eine intuitive, visuell ansprechende und fehlerfreie Konfiguration zu ermöglichen, haben wir eine leistungsstarke Shopify-Lösung entwickelt.

Wie sind wir dabei vorgegangen? Welche Herausforderungen gab es? Und welche Learnings lassen sich auf andere Shops übertragen? Unser Shopify-Experte Tobi teilt seine Insights im tante-e-Podcast – die wichtigsten Highlights fassen wir in diesem Artikel für dich zusammen.

1. Warum sind Konfiguratoren für Onlineshops relevant?
   1. Vorteile von Produktkonfiguratoren auf Shopify
   2. Welche Branchen profitieren besonders von Konfiguratoren?
2. Möglichkeiten für Produktkonfiguratoren auf Shopify
   1. Native Shopify-Funktionen: Was geht ohne Apps oder Code?
   2. Die 3 Optionen für Konfiguratoren auf Shopify
   3. Warum wir keine Apps für Konfiguratoren auf Shopify empfehlen
   4. Welche Lösung empfehlen wir?
3. Beispiel: Anforderungen des Trikot-Konfigurators des 1. FC Union Berlin
   1. Warum eine Standardlösung nicht ausreichte
   2. Entscheidung: eine maßgeschneiderte Lösung
   3. Technische Umsetzung des Produktkonfigurators
   4. Ergebnis: Ein stabiler, skalierbarer Trikot-Konfigurator

Unsere Checklisten & Guides: Alles, was du brauchst für den Shopify-Start 🚀

 

1. Warum sind Konfiguratoren für Onlineshops relevant?

Die Möglichkeit, Produkte individuell zu gestalten, ist längst kein Nischenphänomen mehr. In unserer Erfahrung erwarten Kund:innen von Onlineshops mehr und mehr, aktiver Teil des Einkaufserlebnisses zu werden und Produkte personalisieren zu können, sei es Schmuck, Möbel oder – wie im Fall von Fußballfans – Trikots mit eigenem Namen und Wunsch-Nummer.

1.1 Vorteile von Konfiguratoren auf Shopify

Doch Produktkonfiguratoren bieten nicht nur ein besseres Einkaufserlebnis, sondern auch klare Vorteile für Händler:innen:

• Mehr Kundenbindung: Wer sich ein Produkt nach eigenen Wünschen gestaltet, baut eine stärkere emotionale Verbindung zur Marke auf.
• Höhere Margen: Personalisierte Produkte rechtfertigen oft höhere Preise und reduzieren die Preissensibilität.
• Weniger Retouren: Kund:innen sind zufriedener mit individuell angepassten Produkten und schicken diese seltener zurück.

1.2 Welche Branchen profitieren besonders von Konfiguratoren?

Die Möglichkeit zur Individualisierung ist längst nicht nur auf Mode oder Sportartikel begrenzt. Viele Branchen setzen auf Konfiguratoren, um das Einkaufserlebnis zu optimieren:

• Fashion & Accessoires: Gravierte Schmuckstücke, bedruckte T-Shirts oder individuell zusammengestellte Schuhe.
• Möbel & Einrichtung: Farben, Materialien und Maße individuell anpassen.
• Technologie & Elektronik: Laptop- oder PC-Builds mit individuellen Komponenten.
• Food & Beverage: Eigene Müsli-Mischungen oder personalisierte Schokoladenboxen.
• Sport & Teams: Trikots, Fanartikel und Vereinsausstattung mit individuellem Branding.

Besonders für Marken mit einer treuen Community bieten Konfiguratoren eine große Chance – wie am Beispiel des 1. FC Union Berlin deutlich wird.

2. Möglichkeiten für Produktkonfiguratoren auf Shopify

2.1 Native Shopify-Funktionen: Was geht ohne Apps oder Code?

Shopify bietet von Haus aus keine vollwertige Konfigurator-Funktion, dennoch gibt es einfache Möglichkeiten, Produkte mit grundlegenden Individualisierungsoptionen auszustatten. Eine der gängigsten Lösungen ist die Verwendung von Line Item Properties. Diese ermöglichen es, zusätzliche Informationen wie Namen oder Nummern zu speichern, die über Eingabefelder auf der Produktseite abgefragt werden.

Ein Beispiel: Ein Shop kann auf der Produktseite einfache Freifelder hinzufügen, in die Kund:innen ihren Wunschtext eingeben können – etwa für eine Trikot-Beflockung mit eigenem Namen. Manche Shopify-Themes, wie z. B. das Impact-Theme, bieten solche Funktionen bereits integriert.

Vorteile dieser Lösung:

• Keine zusätzlichen Kosten für Apps oder Entwicklung
• Schnelle Implementierung
• Funktioniert mit jedem Shopify-Plan

Nachteile dieser Lösung:

• Keine visuelle Vorschau für die Kund:innen
• Eingaben können nicht direkt auf Richtigkeit überprüft werden (z. B. verbotene Wörter oder Nummern)
• Komplizierte Preislogiken sind nicht möglich

Für einfache Individualisierungen mag diese Lösung ausreichen, doch sobald der Konfigurator ein echtes visuelles Erlebnis bieten soll, braucht es eine leistungsfähigere Alternative.

2.2 Die 3 Optionen für Konfiguratoren auf Shopify

Je nach Anforderungen gibt es drei Ansätze, um einen Konfigurator in Shopify zu integrieren:

Line Item Properties als Basislösung (Freifeld auf Produktseite)

Diese Variante nutzt Shopify's native Line Item Properties, um einfache Texteingaben zu ermöglichen. Sie eignet sich für Shops, die eine schnelle und kostengünstige Lösung suchen, jedoch auf eine Vorschau oder komplexe Logiken verzichten können.

Konfigurator direkt auf der Produktseite mit Drop-downs und Auswahlfeldern

Hier werden nicht nur Freifelder, sondern auch Dropdown-Menüs und Auswahloptionen auf der Produktseite genutzt, um verschiedene Beflockungsoptionen bereitzustellen. Diese Methode erlaubt eine etwas bessere Kontrolle über die Eingaben und bietet eine strukturierte Benutzerführung. Sie kann mit Shopify Metafeldern kombiniert werden, um Preisanpassungen und Produktvarianten zu steuern.

Konfigurator als gesonderter Drawer (individuelle Lösung mit Custom Coding)

Bei dieser Methode öffnet sich der Konfigurator als extra Slider oder Drawer, in dem Kund:innen ihre Optionen auswählen. Diese Variante erlaubt eine Live-Vorschau, eine intuitive UX und eine nahtlose Integration in den Checkout-Prozess. Die Verwaltung erfolgt über Metafelder und Meta-Objekte, sodass Änderungen – z. B. neue Spieler oder Trikotfarben – flexibel anpassbar bleiben.

2.3 Warum wir keine Apps für Konfiguratoren auf Shopify empfehlen

Auf den ersten Blick scheint es einfach: Im Shopify App Store gibt es zahlreiche Produktkonfigurator-Apps, die eine schnelle Lösung für individuelle Produkte versprechen. Doch in unserer Erfahrung aus der Praxis bringen diese Apps oft mehr Probleme als Vorteile – insbesondere für Shops mit hohem Traffic oder komplexeren Anforderungen.

Eingeschränkte Flexibilität:

Apps bieten oft nur eine begrenzte Auswahl an Konfigurationsmöglichkeiten. Spezifische Anforderungen, wie die dynamische Steuerung von Preisen, individuelle Logiken für bestimmte Produkte oder eine maßgeschneiderte User Experience, lassen sich oft nur schwer umsetzen. Zudem sind viele Apps nicht in der Lage, komplexe Produktvarianten oder individuelle Bestellprozesse sauber abzubilden.

Performance-Probleme:

Ein großes Risiko bei App-basierten Lösungen ist die zusätzliche Ladezeit, die sie verursachen. Viele Apps laden externe Skripte, die die Performance des Shops verlangsamen – insbesondere bei Shops mit vielen Besucher:innen kann dies die Conversion-Rate negativ beeinflussen. Besonders problematisch: Wenn die App ausfällt oder langsamer lädt, funktioniert der gesamte Konfigurator nicht mehr – und Kund:innen können keine Bestellungen aufgeben.

Eingeschränkte Kontrolle:

Apps arbeiten oft mit Workarounds, um Konfigurationsdaten in den Shopify-Warenkorb und die Bestellung zu übertragen. Viele Apps speichern Individualisierungen nicht als Shopify-native Line Item Properties, sondern als separate Textfelder oder E-Mail-Anhänge, was die Verarbeitung erschwert. Zudem sind komplexe Preislogiken oft nicht abbildbar. Upsells oder individuelle Preisberechnungen müssen häufig mit zusätzlichen Skripten ergänzt werden.

2.4 Welche Lösung empfehlen wir?

Für einfache Individualisierungen können Apps eine kurzfristige Lösung sein. Doch wer auf eine skalierbare, leistungsstarke und individuell anpassbare Konfigurator-Lösung setzt, kommt um eine maßgeschneiderte Entwicklung nicht herum.

Die Wahl der richtigen Methode hängt stark von den Anforderungen des Shops ab. Während einfache Freifelder oder Drop-downs für kleinere Shops ausreichend sein können, braucht es für professionelle, skalierbare Lösungen meist eine individuell programmierte Variante.

Der Trikot-Konfigurator des 1. FC Union Berlin zeigt, wie eine individuell entwickelte Lösung die Nutzererfahrung verbessert, flexibel anpassbar bleibt und gleichzeitig technisch stabil läuft.

3. Beispiel: Anforderungen des Trikot-Konfigurators des 1. FC Union Berlin

Der 1. FC Union Berlin hat in den letzten Jahren eine rasante Entwicklung durchgemacht. Vom einstigen Zweitligisten bis hin zur Teilnahme an der Champions League – der Verein ist nicht nur sportlich gewachsen, sondern auch wirtschaftlich. Mit dem steigenden Erfolg stieg auch die Nachfrage nach Merchandise, insbesondere nach Trikots.

Für den Verein war schnell klar: Die bestehende E-Commerce-Infrastruktur musste modernisiert werden, um dem erhöhten Interesse gerecht zu werden. Der Fanshop sollte nicht nur mehr Produkte effizient verwalten können, sondern auch eine verbesserte Nutzererfahrung bieten – insbesondere für den Verkauf der heiß begehrten Trikots.

Trikots sind für jeden Fußballverein eines der wichtigsten Merchandise-Produkte. Sie sind nicht nur ein Fanartikel, sondern auch ein Symbol für Vereinszugehörigkeit. Dabei spielt die Individualisierung eine entscheidende Rolle: Viele Fans wollen nicht nur das Standardtrikot, sondern ein personalisiertes Trikot mit ihrem eigenen Namen oder der Rückennummer ihres Lieblingsspielers.

3.1 Warum eine Standardlösung nicht ausreichte

Union Berlin stand vor mehreren Herausforderungen, die mit einer klassischen Shopify-Lösung nicht abgedeckt werden konnten:

Mehrere Trikot-Varianten

• Pro Saison gibt es mindestens vier verschiedene Trikots: Heim-, Auswärts-, Ausweich- und Champions-League-Trikot.
• Dazu kommen separate Versionen für Frauen, Männer und Kinder, wodurch die Vielfalt und Komplexität des Produktsortiments weiter zunahm.

Flexible Individualisierung

• Fans sollten zwischen vorgegebenen Spielernamen & Nummern oder einer komplett individuellen Beflockung wählen können.
• Zusätzlich sollten sie entscheiden können, ob ihr Trikot mit einem Wettbewerbslogo (z. B. Bundesliga, DFB-Pokal oder Champions League) versehen wird.

Einfache Pflege und Verwaltung

• Im Fußball kann sich der Kader schnell ändern. Spieler kommen und gehen, was bedeutet, dass der Konfigurator regelmäßig aktualisiert werden muss.
• Union Berlin benötigte eine Lösung, mit der das eigene Team selbstständig Anpassungen vornehmen kann – ohne jedes Mal eine Agentur oder Entwickler:innen beauftragen zu müssen.

Hoher Traffic & Performance

• Die Veröffentlichung neuer Trikots erzeugt enormen Besucheransturm im Shop – insbesondere zum Saisonstart.
• Eine instabile Lösung oder eine auf Apps basierende Umsetzung hätte das Risiko eines Zusammenbruchs während Peak-Zeiten erhöht.

3.2 Entscheidung: eine maßgeschneiderte Lösung

Union Berlin entschied sich daher gemeinsam mit uns für eine Custom-Lösung direkt auf Shopify, die wir speziell auf die Bedürfnisse des Vereins zuschnitten.

Im nächsten Abschnitt werfen wir einen Blick auf die wichtigsten Aspekte der technischen Umsetzung dieses Konfigurators. Den vollständigen Überblick über Strategie-Entwicklung und Vorgehen des Trikot-Konfigurators erhältst du von Tobi in der Podcast-Folge:

4. Technische Umsetzung des Produktkonfigurators

4.1 Drawer statt Produktseiten-Lösung

Bei der Entwicklung des Trikot-Konfigurators für den 1. FC Union Berlin war eine der ersten Entscheidungen: Wie sollte die Konfiguration in den Shop integriert werden?

Union Berlin entschied sich für unsere empfohlene Variante: Ein Drawer, der sich nach Auswahl des Trikots und der Größe öffnet. Dadurch bleibt die Produktseite aufgeräumt, und die Nutzer:innen können sich voll und ganz auf die Konfiguration konzentrieren.

Vorteile des Drawers:

• Bessere User Experience: Der Drawer öffnet sich über die gesamte Bildschirmbreite (besonders wichtig auf Mobile).
• Direkte Vorschau: Änderungen werden in Echtzeit auf dem Trikot sichtbar.
• Klarer Kaufprozess: Nutzer:innen gehen Schritt für Schritt durch die Auswahloptionen und behalten den Überblick.

4.2 Zentrales Element: Live-Vorschau

Ein zentrales Element eines intuitiven Trikot-Konfigurators ist die visuelle Vorschau. Kund:innen möchten genau sehen, wie ihr Trikot mit Beflockung und Wettbewerbslogo aussieht, bevor sie es kaufen.

Die Herausforderung: Jedes Trikot hat eine andere Grundfarbe und erfordert eine passende Schrift- und Nummernfarbe.

So wurde die Vorschau technisch umgesetzt:

• Metafelder in Shopify: Jedes Trikot besitzt ein Metafeld, in dem die passende Vorschau-Grafik hinterlegt ist (z. B. Heimtrikot = rotes Trikot, weiße Schrift).
• Dynamische Text-Overlays: Name und Nummer werden als Textelelemente über das Vorschaubild gelegt – mit der passenden Farbe für jede Trikot-Variante.
• Bild-Overlays für die Nummern: Da Union Berlin einen kleinen Berliner Bären in die Nummer integriert, wurden die Nummern als Bild-Overlay umgesetzt, um das Design originalgetreu darzustellen.
• Wettbewerbslogos als auswählbare Elemente: Bundesliga, DFB-Pokal oder Champions-League-Badges können direkt im Konfigurator hinzugefügt werden.

Durch diese Lösung bleibt die Vorschau flexibel: Ändert Union Berlin in einer neuen Saison das Trikot-Design, können einfach neue Grafiken und Farbwerte im Backend hinterlegt werden – ohne aufwendige Programmierung.

4.3 Flexible Pflege durch Metafelder und Meta-Objekte

Da der Kader sich regelmäßig ändert, musste eine Möglichkeit geschaffen werden, schnell und einfach neue Spieler:innen hinzuzufügen oder bestehende aus der Auswahl zu entfernen.

Die Lösung: Shopify Meta-Objekte für Spieler:innen.

• Jedes Meta-Objekt enthält den Namen, die Nummer und das Spielerbild.
• Änderungen sind direkt über das Shopify-Backend möglich, ohne dass Code angepasst werden muss.
• Beim Trikot-Produkt werden die gewünschten Spieler:innen einfach per Checkbox aktiviert oder deaktiviert.

Für die Verantwortlichen bei Union Berlin bedeutet das: Kein Agentur-Support nötig, keine komplizierten Anpassungen – Änderungen sind in wenigen Klicks erledigt.

4.4 Flexible Preisberechnung

Ein weiteres technisches Detail betrifft die Preisgestaltung. Da eine Beflockung oder ein Wettbewerbslogo einen Aufpreis bedeutet, musste eine flexible Lösung für die Preisberechnung gefunden werden.

So funktioniert die Preisberechnung:

• Die Individualisierungsoptionen (Spielerbeflockung, eigene Beflockung, Wettbewerbslogo) wurden als separate Add-on-Produkte angelegt.
• Diese werden im Konfigurator dynamisch hinzugefügt, sobald eine Auswahl getroffen wird.
• Jede Variante hat ihren eigenen Preis, sodass die Endsumme automatisch korrekt berechnet wird.
• Kund:innen sehen jederzeit, wie sich ihr Trikotpreis mit den gewählten Optionen verändert.

Diese Add-on-Logik vermeidet komplizierte Produktvarianten und sorgt dafür, dass Preise einfach gepflegt werden können.

4.5 Ergebnis: Ein stabiler, skalierbarer Trikot-Konfigurator

Durch diese Kombination aus Drawer-Technologie, Live-Preview, Metafeldern und Add-on-Produkten entstand ein leistungsstarker Trikot-Konfigurator, der:

• Ein nahtloses Kundenerlebnis bietet
• Einfach vom Union-Berlin-Team gepflegt werden kann
• Technisch stabil und skalierbar ist – auch bei hohem Traffic