Shopware 6 Free Snippet · Variant Pills · Produktdetailseite · Mobile UX · Accessibility

Shopware 6 Variant Pills: Varianten kompakt auf Produktseiten anzeigen

Q: Kann ich Labels und Reihenfolge ändern?

Ja. Labels wie Weitere Farben, Weitere Widerstände oder Weitere Geschmacksrichtungen sind im Render-Teil definiert und können angepasst werden. Auch Limits für Mehr anzeigen sind änderbar.

Q: Wann ist ein individuelles Modul besser?

Ein individuelles Modul ist sinnvoll, wenn das Theme stark angepasst ist, Varianten anders gerendert werden oder zusätzliche Regeln, Verlinkungen, Datenquellen oder Admin-Einstellungen benötigt werden.

Dieses kostenlose Shopware-6-Snippet erzeugt auf Produktdetailseiten automatisch kompakte Variant Pills für verfügbare Varianten wie Farbe, Nikotinstärke, Ohm, Modell oder Geschmacksrichtung. Bei vielen Optionen wird ein barrierearmer Mehr anzeigen / Weniger anzeigen-Toggle ergänzt. Das Snippet arbeitet ohne Plugin, ohne Core-Eingriff und mit eindeutigem CSS-/JS-Prefix.

Shopware 6 Produktdetailseite Varianten UX Vanilla JS Mobile optimiert A11y Toggle Free Snippet

Was macht das Variant-Pills-Snippet?

Das Snippet liest Varianteninformationen aus dem Shopware-6-Konfigurator aus und zeigt weitere verfügbare Optionen als kompakte Pills direkt im sichtbaren Bereich der Produktseite. Das hilft besonders bei Produkten mit vielen Farben, Nikotinstärken, Widerständen, Modellen oder Geschmacksrichtungen.

Free

Weitere Varianten sichtbar machen Verfügbare Optionen werden als kompakte Pills dargestellt, ohne dass der Kunde lange suchen muss.

Mehr-anzeigen-Toggle Lange Variantenlisten werden gekürzt und per Toggle zugänglich gemacht.

Dubletten vermeiden Werte werden bereinigt, dedupliziert und bei Ohm/Nikotin sinnvoll numerisch sortiert.

Theme-freundlich Das Snippet nutzt Fallbacks für typische Shopware-6-Theme-Strukturen und greift nicht in den Core ein.

Praxisnutzen: Viele Shops zeigen Varianten nur im Konfigurator. Variant Pills schaffen zusätzliche Orientierung, besonders mobil, ohne die eigentliche Variantenauswahl zu ersetzen.

Zum Code · Weitere Free Snippets

Warum sind Variant Pills sinnvoll?

Variant Pills sind kein Ersatz für eine saubere Variantenlogik, aber sie können die Orientierung auf Produktseiten deutlich verbessern. Kunden sehen schneller, welche Ausführungen grundsätzlich vorhanden sind.

Mehr Orientierung: Kunden sehen weitere Farben, Stärken, Modelle oder Geschmacksrichtungen schneller.
Bessere mobile Übersicht: Pills brechen sauber um und sind besser scanbar als lange Textlisten.
Weniger Unruhe: Lange Listen werden mit „Mehr anzeigen“ reduziert.
Barrierearmer Toggle: Der Button nutzt aria-expanded und sichtbare Focus-Styles.
Kein Core-Eingriff: Die Lösung arbeitet im Frontend und verändert keine Shopware-Core-Dateien.

Realistische Einordnung: Das Snippet ist primär eine UX-Verbesserung. Es ersetzt keine Produktdatenpflege, keine Varianten-URL-Strategie und kein professionelles Theme-Konzept.

Voraussetzungen

Das Snippet ist für Shopware-6-Produktseiten mit Varianten-Konfigurator gedacht.

Setup

Shopware 6 Produktdetailseite mit Varianten-Konfigurator.
Variantenwerte liegen im DOM als Select, Chips, Labels, Buttons oder ähnliche Elemente vor.
Ein Einbauort für CSS und JavaScript ist vorhanden.
Theme-Struktur ist nicht komplett vom Shopware-Standard entkoppelt.
Vor Live-Einsatz wird im eigenen Theme getestet.

Wichtig: Das Snippet ist generisch gehalten und bewusst kein vollwertiges Plugin. Für komplexe Variantenlogik kann ein individuelles Modul oder Plugin sinnvoller sein.

Einbau in Shopware 6

Der Code kann als CSS + JavaScript eingefügt werden. Ideal ist CSS im Head und JavaScript am Ende der Seite. Falls dein Theme nur ein gemeinsames Custom-HTML-/JS-Feld bietet, kann der komplette Block zusammen eingefügt werden.

Einbau

CSS Gestaltet die Pills, den Toggle, Hover-Zustände, Focus-Styles und mobile Umbrüche.

JavaScript Liest Varianten aus, bereinigt Werte, dedupliziert Listen und rendert den Variant-Pills-Block.

Einfügepunkt Das Snippet sucht robuste Anker wie EAN, Buybox, Preis, Tabs oder Produktdetailbereich.

Testing Produkt mit mehreren Varianten öffnen, Werte prüfen, Toggle testen und mobil kontrollieren.

Update-Sicherheit: Es werden keine Core-Dateien geändert. Nach Theme-Updates sollte trotzdem kurz geprüft werden, ob die DOM-Selektoren noch passen.

Code: Variant Pills Free Snippet für Shopware 6

Der Code nutzt den eindeutigen Prefix vp6x-, beobachtet nur relevante Produktdetailbereiche und vermeidet eine globale Überwachung des gesamten Dokuments.

CSS + JS

variant-pills-free.html

<style>


/* =========================================================
Variant pills (FREE) – Shopware 6

* Varianten-Pills + A11y Toggle "Mehr/Weniger"
* ohne Core-Eingriff
* eindeutiger Prefix: vp6x-
  ========================================================= */

.vp6x-seo-variants{
display:block;
margin-top:10px;
padding:10px 12px;
border:1px solid rgba(17,24,39,.10);
border-radius:12px;
background:#fff;
box-shadow:0 8px 18px rgba(17,24,39,.05);
font-size:13px;
line-height:1.35;
color:#111827;
}

.vp6x-seo-variants .vp6x-row{
margin:10px 0 0;
}

.vp6x-seo-variants .vp6x-row:first-child{
margin-top:0;
}

.vp6x-seo-variants .vp6x-k{
display:block;
margin:0 0 6px;
font-weight:700;
letter-spacing:.12px;
font-size:12px;
color:#111827;
}

.vp6x-seo-variants .vp6x-v{
display:flex;
flex-wrap:wrap;
gap:6px 7px;
color:#111827;
font-weight:600;
font-size:12px;
}

.vp6x-seo-variants .vp6x-v > a,
.vp6x-seo-variants .vp6x-v > span{
display:inline-flex;
align-items:center;
max-width:100%;
padding:4px 9px;
border-radius:999px;
border:1px solid rgba(17,24,39,.22);
background:rgba(17,24,39,.06);
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
text-decoration:none !important;
line-height:1.1;
font-size:11.5px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:1 !important;
transition:background .15s ease,border-color .15s ease;
}

.vp6x-seo-variants .vp6x-v > a,
.vp6x-seo-variants .vp6x-v > a:visited,
.vp6x-seo-variants .vp6x-v > a:hover,
.vp6x-seo-variants .vp6x-v > a:active{
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
text-decoration:none !important;
opacity:1 !important;
}

.vp6x-seo-variants .vp6x-v > a:hover{
background:rgba(17,24,39,.10) !important;
border-color:rgba(17,24,39,.28) !important;
}

.vp6x-seo-variants .vp6x-v > a:focus-visible{
outline:2px solid rgba(17,24,39,.55);
outline-offset:2px;
border-radius:10px;
}

.vp6x-chip-hidden{
display:none !important;
}

.vp6x-chip-toggle{
display:inline-flex;
align-items:center;
padding:4px 9px;
border-radius:999px;
border:1px dashed rgba(17,24,39,.22);
background:rgba(17,24,39,.04);
color:#111827;
font-weight:700;
font-size:11.5px;
line-height:1.12;
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
}

.vp6x-chip-toggle:hover{
background:rgba(17,24,39,.08);
border-color:rgba(17,24,39,.30);
}

.vp6x-chip-toggle:focus-visible{
outline:2px solid rgba(17,24,39,.55);
outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
.vp6x-seo-variants .vp6x-v > a,
.vp6x-seo-variants .vp6x-v > span{
transition:none !important;
}
}

@media (max-width:820px){
.vp6x-seo-variants{
padding:10px;
}

.vp6x-seo-variants .vp6x-v > a,
.vp6x-seo-variants .vp6x-v > span{
padding:4px 9px;
font-size:11.5px;
}
}

Code-Hinweis: Copy kopiert immer den vollständigen Code, auch wenn nur die Vorschau angezeigt wird. Das Snippet ist bewusst für Produktdetailseiten gekapselt.

Test-Checkliste vor dem Live-Gang

Prüfe das Snippet nicht nur auf einer Produktseite. Wichtig sind mehrere Variantentypen, mobile Darstellung, lange Listen und Theme-Abweichungen.

Produkt mit Varianten öffnen Zum Beispiel Farbe, Nikotin, Ohm, Modell oder Geschmacksrichtung.

Block sichtbar? Es sollte mindestens eine Zeile wie „Weitere Farben“ oder „Weitere Nikotinstärken“ erscheinen.

Variante wechseln Der Block sollte sich aktualisieren und keine doppelten Werte anzeigen.

Mehr anzeigen testen Bei langen Listen muss der Toggle zuverlässig öffnen und schließen.

Tastatur-Fokus prüfen Toggle und Links sollten mit sichtbarem Focus-Rand bedienbar sein.

Mobil prüfen Pills müssen sauber umbrechen und dürfen keinen horizontalen Overflow erzeugen.

Praxis-Hinweis: Wenn bei deinem Theme keine Gruppen erkannt werden, liegt es fast immer an abweichenden Klassen oder einer eigenen Varianten-Komponente.

FAQ zum Shopware 6 Variant-Pills-Snippet

Kurze Antworten zu Einsatz, Theme-Kompatibilität, SEO, Accessibility, Anpassung und Support.

6 Fragen

Ist das Variant-Pills-Snippet kostenlos?

Ja. Das Snippet wird kostenlos bereitgestellt. Es enthält aber keinen individuellen Einbau-, Anpassungs- oder Theme-Support.

Warum zeigt das Snippet manchmal nichts an?

Wenn auf der Produktseite keine erkennbaren Varianten-Gruppen vorhanden sind oder dein Theme andere Klassen nutzt, können keine Werte ausgelesen werden. Dann müssen die Selektoren angepasst werden.

Kann ich Labels und Reihenfolge ändern?

Ja. Labels wie „Weitere Farben“, „Weitere Widerstände“ oder „Weitere Geschmacksrichtungen“ sind im Render-Teil definiert und können angepasst werden. Auch Limits für „Mehr anzeigen“ sind änderbar.

Beeinflusst das Snippet SEO?

Primär ist es ein UX-Snippet. Es kann die Orientierung auf Produktseiten verbessern, ersetzt aber keine saubere Variantenstrategie, Produktdatenpflege oder SEO-URL-Struktur.

Ist das Snippet update-sicher?

Es verändert keine Core-Dateien. Trotzdem können Theme-Updates das Markup ändern. Deshalb sollte nach Theme- oder Plugin-Updates kurz getestet werden.

Wann ist ein individuelles Modul besser?

Ein individuelles Modul ist sinnvoll, wenn dein Theme stark angepasst ist, Varianten anders gerendert werden oder zusätzliche Regeln, Verlinkungen, Datenquellen oder Admin-Einstellungen benötigt werden.

Transparenz-Hinweis: Dieses Free Snippet ist ein technisches Beispiel für Shopware 6 und muss im jeweiligen Theme getestet werden. Variantenlogik, DOM-Struktur, Theme-Overrides und Drittanbieter-Plugins können je nach Shop abweichen.