Einzelne Produktvarianten auf Shopify-Kategorieseiten anzeigen
Leon Bebbington
Du betreibst einen Shopify-Shop und stehst vor einer typischen Herausforderung: Deine Produkte haben Varianten, die sich optisch stark unterscheiden. Doch in der Kategorieseite (Kollektionen) wird standardmässig nur das Hauptprodukt angezeigt. Kundinnen und Kunden sehen so nicht die ganze Vielfalt, die dein Shop bietet – Verkaufschancen bleiben ungenutzt.
Was sind Variantenprodukte in Shopify und warum ist ihre Darstellung wichtig?
In Shopify bezeichnet man als Variantenprodukte jene Artikel, die in verschiedenen Ausführungen angeboten werden, aber im Kern dasselbe Produkt darstellen. Typische Beispiele sind:
- Kleidungsstücke in verschiedenen Farben und Grössen
- Möbel mit unterschiedlichen Holzarten oder Stoffbezügen
- Elektronikgeräte in verschiedenen Speicherkonfigurationen
- Schmuck mit unterschiedlichen Edelsteinen oder Materialien
Standardmässig zeigt Shopify in Kollektionsübersichten nur das Hauptprodukt an – die Varianten werden erst auf der Produktdetailseite sichtbar. Das kann zu erheblichen Nachteilen führen:
- Kunden entdecken attraktive Varianten möglicherweise gar nicht
- Die visuelle Vielfalt deines Sortiments bleibt verborgen
- Potenzielle Kaufentscheidungen werden erschwert
Besonders wenn sich deine Produktvarianten optisch stark unterscheiden, kann die Darstellung aller Varianten in der Kollektionsübersicht einen signifikanten Einfluss auf deine Conversion-Rate und das Nutzererlebnis haben.
Gerade bei Produkten mit farblichen oder materiellen Unterschieden – Kleidung, Möbel, Elektronik – lohnt es sich, die Varianten direkt in der Übersicht sichtbar zu machen. Wie das geht? Wir zeigen dir drei Methoden mit unterschiedlichen Vor- und Nachteilen.
Methode 1: Varianten als eigene Produkte anlegen
Hier wird jede Variante als separates Produkt im Shopify-Admin angelegt und in der Übersicht angezeigt. Zum Beispiel: Ein Stuhl in Eiche, Buche und Nussbaum ergibt drei eigenständige Produkte.
Vorteile:
- Schnell umsetzbar ohne Programmierung
- Jede Variante hat eigenes Bild, Beschreibung, URL
- SEO-technisch optimierbar auf Farb- oder Materialbegriffe
Nachteile:
- Hoher Pflegeaufwand bei grösseren Sortiments
- Gefahr von Duplicate Content
- Canonical-Tags müssen sauber gesetzt sein:
<link rel="canonical" href="https://deinshop.ch/products/hauptprodukt" />- Eigene Beschreibungen für jede Variante notwendig
Fazit: Für kleine Sortiment sinnvoll. Bei vielen Varianten schnell unpraktisch.
Methode 2: Varianten per Shopify-App sichtbar machen
Im Shopify App Store gibt es Tools, die Produktvarianten in der Kategorieseite sichtbar machen.
Beispiele: (Keine Garantie – Wurde von uns nicht getestet)
- Product Group Combined Listing
- Produktvarianten in Kollektion
Vorteile:
- Schnell implementiert, meist ohne Programmierkenntnisse
Nachteile:
- Eingeschränkte Individualisierung
- Performance-Einbussen durch Zusatz-Code
- Abhängigkeit vom Anbieter
Fazit: Ideal für kleine Shops mit begrenztem Budget und Standardbedürfnissen.
Methode 3: Individuelle Programmierung (empfohlen)
Für mehr Kontrolle, Performance und langfristige Stabilität empfiehlt sich eine massgeschneiderte Lösung direkt im Shopify-Theme – via Anpassung der Liquid-Templates und gezielte Darstellung der Varianten.
Vorteile:
- Volle Kontrolle über das Verhalten und Design
- Schnelle Ladezeiten, kein App-Overhead
- Skalierbar und zukunftssicher
- Frei erweiterbar (z. B. Filter, Swatches, Preisdarstellung)
Beispielhafte Umsetzung (Liquid):
{% for product in collection.products %}
{% for variant in product.variants %}
<div class="product-card">
<img src="{{ variant.featured_image | img_url: 'medium' }}" alt="{{ variant.title }}">
<h3>{{ product.title }} - {{ variant.title }}</h3>
<p>{{ variant.price | money }}</p>
<a href="{{ product.url }}?variant={{ variant.id }}">Details ansehen</a>
</div>
{% endfor %}
{% endfor %}Diese Logik erlaubt es, jede Variante direkt in der Übersicht zu zeigen, inklusive Bild und Preis.
Worauf du achten solltest:
- Variantenfilter sauber aufbauen (Farbe, Grösse etc.)
- Mobile Darstellung testen
- Performance mit Lazy Loading optimieren
- Kein Duplicate Content durch eindeutige URLs und Parameter
Unser Fazit
Shopify zeigt standardmässig nur das Hauptprodukt in Kollektionen. Das ist verschenktes Potenzial. Wer Varianten optisch sichtbar macht, steigert Relevanz, Sichtbarkeit und Conversion. Welche Methode für deinen Shop am besten passt, hängt von Umfang, Budget und Strategie ab.
Wir empfehlen klar: Individuelle Anpassung via Theme-Entwicklung.
Wenn du wissen willst, wie das für deinen Shop aussehen könnte: Meld dich bei uns. Wir helfen dir bei Analyse, Priorisierung und Umsetzung.
