Easy Variant Picker
Die Easy Variant Picker App ersetzt die Standard-Varianten-Dropdowns auf Produktseiten Ihres Shopify Shops durch anpassbare Auswahlbuttons. Kunden wählen Optionen wie Farbe, Material oder Größe direkt per Klick aus. Die dargestellten Optionen basieren auf App-eigenen Metafeldern, die Sie im Admin-Interface verwalten. Erscheinungsbild und Abstände werden über den Theme Editor gesteuert und lassen sich zusätzlich mit eigenem CSS erweitern.
Funktionsweise
Der Block ist als Theme App Extension implementiert und wird als Section-Block auf Produktvorlagen geladen. Beim Seitenaufruf liest das Liquid-Template die konfigurierten Varianten-Optionen aus den Shop-Metafeldern aus und stellt die verfügbaren Werte je Produktvariante als Buttons dar. Ein Best-Match-Algorithmus wählt bei Änderungen automatisch die nächstpassende Variante aus, falls die bisherige Kombination nicht mehr verfügbar ist. Das Custom CSS aus dem Admin-Interface wird über ein Shop-Metafeld bereitgestellt und direkt in die Seite eingebettet.
Installation
Die App wird über den Shopify App Store installiert. Nach der Installation erscheint der Block Easy Variant Picker automatisch im Theme Editor unter Abschnitte → Blöcke. Fügen Sie den Block zu Ihrer Produktvorlage hinzu und konfigurieren Sie ihn direkt im Editor.
Variantenoptionen verwalten
Bevor der Block auf der Storefront Optionen anzeigen kann, müssen die gewünschten Variantenoptionen im Admin-Interface angelegt werden.
Option hinzufügen
- Öffnen Sie die App im Shopify Admin
- Geben Sie unter Option hinzufügen einen Key (internen Bezeichner, z. B.
material) und einen Anzeigenamen (z. B.Material) ein - Klicken Sie auf Hinzufügen
Die App legt daraufhin eine Metafeld-Definition vom Typ Einzelzeilentext im $app-Namespace für Produktvarianten an. Tragen Sie den gewünschten Optionswert anschließend am jeweiligen Produktvariant in Shopify ein.
Voraussetzungen:
- Der Key darf nur Kleinbuchstaben, Ziffern und Unterstriche enthalten (z. B.
color,shoe_size) - Jeder Key kann nur einmal angelegt werden
Option löschen
Nicht mehr benötigte Optionen lassen sich unter Aktuelle Definitionen mit der Schaltfläche Löschen entfernen. Dabei wird die Metafeld-Definition samt allen damit verbundenen Variantenwerten aus Shopify gelöscht.
Einstellungen
Alle Einstellungen werden direkt im Shopify Theme Editor am Block vorgenommen.
Farben
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Primärfarbe | Farbe | #008060 | Farbe für Hover-Zustand und ausgewählte Option |
| Rahmenfarbe | Farbe | #c4c4c4 | Rahmenfarbe der Buttons im Normalzustand |
| Textfarbe | Farbe | #202123 | Textfarbe der Button-Beschriftungen |
Typografie
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Schriftgröße | Schieberegler | 14 px | Schriftgröße der Button-Beschriftungen (12–20 px, Schritte: 1 px) |
Abstände
| Einstellung | Typ | Standard | Beschreibung |
|---|---|---|---|
| Horizontaler Innenabstand | Schieberegler | 16 px | Linker und rechter Innenabstand der Buttons (8–32 px, Schritte: 2 px) |
| Vertikaler Innenabstand | Schieberegler | 8 px | Oberer und unterer Innenabstand der Buttons (4–16 px, Schritte: 2 px) |
| Eckenradius | Schieberegler | 4 px | Eckenradius der Buttons (0–20 px, Schritte: 2 px) |
Custom CSS
Im Shopify Admin auf der App-Einstellungsseite kann eigenes CSS für den Block hinterlegt werden. Das CSS wird im Shop-Metafeld $app:custom_css gespeichert und beim Seitenaufruf direkt in den <head> eingebettet.
Das Admin-Interface validiert das CSS in Echtzeit mit der css-tree-Bibliothek und zeigt Syntaxfehler mit Zeilennummer an, bevor gespeichert wird.
CSS-Custom-Properties
Der Block stellt folgende CSS-Custom-Properties zur Verfügung, die über die Theme-Editor-Einstellungen gesetzt werden:
| Variable | Beschreibung | Standardwert |
|---|---|---|
--evp-primary | Primärfarbe (Selektion, Hover) | #008060 |
--evp-primary-hover | Hover-Farbe der Primärfarbe | abgeleitet von --evp-primary |
--evp-border | Rahmenfarbe | #c4c4c4 |
--evp-bg | Hintergrundfarbe nicht ausgewählter Buttons | #ffffff |
--evp-bg-selected | Hintergrundfarbe ausgewählter Buttons | abgeleitet von --evp-primary |
--evp-text | Textfarbe | #202123 |
--evp-text-selected | Textfarbe ausgewählter Buttons | abgeleitet von --evp-primary |
--evp-radius | Eckenradius | 4px |
--evp-gap | Abstand zwischen den Buttons | 8px |
--evp-font-size | Schriftgröße | 14px |
CSS-Klassen
| Klasse | Element | Hinweis |
|---|---|---|
#easy-variant-picker | Haupt-Container des Blocks | Enthält alle Optionsgruppen |
.evp-option | Einzelner Auswahlbutton | Basisklasse für alle Zustände |
.evp-option--selected | Ausgewählter Button | Wird beim aktiven Variantenwert gesetzt |
.evp-option--disabled | Nicht verfügbarer Button | Variante existiert nicht, ist ausverkauft oder deaktiviert |
Beispiel
#easy-variant-picker {
gap: 12px;
}
.evp-option {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.evp-option--disabled {
opacity: 0.4;
text-decoration: line-through;
}
Barrierefreiheit und Tastaturnavigation
Der Block ist vollständig barrierefrei umgesetzt:
- Jede Optionsgruppe besitzt ein
aria-label-Attribut mit dem Optionsnamen - Ausgewählte Buttons werden mit
aria-pressed="true"markiert - Nicht verfügbare Buttons erhalten
aria-disabled="true" - Die Pfeiltasten ← → ermöglichen die Navigation zwischen den Buttons einer Optionsgruppe
Metafeld-Struktur
Die App verwendet ausschließlich den App-eigenen $app-Namespace für Metafelder und greift nicht auf Theme- oder Custom-Metafelder zu.
| Metafeld | Typ | Beschreibung |
|---|---|---|
Shop: $app:variant_option_keys | Text | Kommagetrennte Liste der angelegten Option-Keys |
Shop: $app:variant_option_labels | JSON | Zuordnung Key → Anzeigename |
Shop: $app:custom_css | Text | Benutzerdefiniertes CSS |
Variante: $app:<key> | Text | Optionswert der jeweiligen Variante |