Produktvarianten

Ausgewählte Links

1. Shopify-Blog: Farbfelder
2. Shopify-Entwicklerdokumentation zum Swatch-Objekt
3. MDN-Dokumentation zu benannten Farben
4. Shopify-Dokumentation zum Hinzufügen von Varianten
5. Shopify Translate & Adapt-App
6. Shopify-Dokumentation zum Hinzufügen von Farb-Farbfeldern mithilfe von Kategorie-Metafeldern

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie den Variant selector-Block von Align, damit Kunden Produktoptionen wie Größe, Farbe oder Ärmellänge auswählen können. Fügen Sie den Block dem Abschnitt Product information in einer Produktvorlage oder einem Abschnitt Featured product in einer anderen Vorlage hinzu.

Informationen zur Einrichtung von Produkten und Varianten in Shopify finden Sie in der Shopify-Dokumentation zum Hinzufügen von Varianten

Produkte mit Variantenoptionen benötigen einen Variant selector-Block, damit die Warenkorb-Aktion funktioniert. Der Block wird bei Produkten ohne Variantenoptionen nicht angezeigt.

Stile der Variantenauswahl

Wählen Sie aus, wie standardmäßige Variantenoptionen in der ausgewählten Align-Vorlage angezeigt werden. Jeder Variant selector-Block verfügt über eigene Einstellungen, sodass Sie das Erlebnis für verschiedene Produkte oder Kollektionen anpassen können.

Dropdowns und Pillen

Verwenden Sie die Einstellung Variant selector style, um eines der folgenden Layouts auszuwählen:

• Dropdowns ist das Standardlayout und platziert Optionen wie Größe, Farbe und Ärmel in Auswahlmenüs.

  Dropdown style

• Pills zeigt Optionen als auswählbare Schaltflächen an.

  Pills style

Farbfelder

Farbfelder sind visuelle Varianten-Steuerelemente, mit denen sich Optionen leichter vergleichen lassen als in reinen Text-Dropdowns oder -Schaltflächen. Sie können visuelles Feedback geben, ein kompakteres Layout ermöglichen und Kunden dabei helfen, Farben, Muster oder Produktbilder schnell zu erkennen.

Align unterstützt zwei Farbfeldtypen:

1. Color swatches zeigt eine Farbe für einen Optionswert an.
2. Image swatches zeigt das Vorschaubild an, das einer Variantenoption zugewiesen ist.

Farb-Farbfelder

Farb-Farbfelder versuchen automatisch, einen Optionswert einer benannten CSS-Farbe zuzuordnen. Ein Optionswert wie Black verwendet beispielsweise standardmäßig #000000. Fügen Sie benutzerdefinierte Farbdefinitionen hinzu, wenn Optionswerte eine bestimmte Farbdarstellung benötigen.

Farb-Farbfelder aktivieren

1. Öffnen Sie eine Produktvorlage im Shopify Theme-Editor.

2. Wählen Sie im Abschnitt Product information den Block Variant selector aus.

3. Aktivieren Sie Farb-Farbfelder.

   [!NOTE] Farb-Farbfelder setzen den ausgewählten Stil der Variantenauswahl außer Kraft, sodass die betroffene Option nicht mehr Dropdown- oder Pillen-Steuerelemente verwendet.

4. Geben Sie den Namen oder die Namen der Variantenoption unter Color swatch Option names ein.

   • Verwenden Sie den Optionsnamen, z. B. Color, und nicht die Werte, z. B. Black, Brown, Blue.
   • Sie können mehrere Optionsnamen eingeben, die durch Kommas getrennt sind.
   • Übersetzte Optionsnamen funktionieren ebenfalls. Stores, die beispielsweise die Shopify Translate & Adapt-App verwenden, können Color, Couleur oder Spalva nutzen.

5. Sehen Sie sich die Farbfelder in der Vorschau an. Standardmäßig verwendet jedes Farbfeld seinen Optionswert als Farbnamen. Eine Liste verfügbarer benannter Farben finden Sie unter CSS named colors

6. Fügen Sie bei Bedarf benutzerdefinierte Farbwerte hinzu.

   1. Öffnen Sie Theme settings im Theme-Editor.
   2. Öffnen Sie Colors und suchen Sie nach Custom color swatches.
   3. Geben Sie durch Kommas getrennte Paare aus Optionswert und HEX-Farbe ein, zum Beispiel: Black: #000, Red: #ff0000.

Informationen zur Einrichtung von Farben über Kategorie-Metafelder finden Sie in der Shopify-Dokumentation zum Hinzufügen von Farb-Farbfeldern mithilfe von Kategorie-Metafeldern

Wenn Sie eine Nicht-Farboption wie Material als Farb-Farbfeld verwenden, definieren Sie jeden Wert unter Custom color swatches. Ohne passende Definition werden die Farbfelder leer angezeigt.

Bild-Farbfelder

Bild-Farbfelder zeigen das Vorschaubild an, das jeder Variantenoption zugewiesen ist. Eine Option ohne zugehöriges Bild wird leer angezeigt. Wenn sowohl Farb- als auch Bild-Farbfelder auf dieselbe Option angewendet werden, haben Bild-Farbfelder Vorrang.

Bild-Farbfelder aktivieren

1. Öffnen Sie eine Produktvorlage im Shopify Theme-Editor.

2. Wählen Sie im Abschnitt Product information den Block Variant selector aus.

3. Aktivieren Sie Bild-Farbfelder.

   [!NOTE] Bild-Farbfelder setzen den ausgewählten Stil der Variantenauswahl für die betroffene Option außer Kraft.

4. Geben Sie den Namen oder die Namen der Variantenoption unter Image swatch Option names ein.

Verhalten von Bild-Farbfeldern

• Farb- und Bild-Farbfelder können kombiniert werden. Ein Produkt kann für verschiedene Optionsgruppen unterschiedliche Farbfeldtypen verwenden.
• Jede Variante unterstützt ein Bild-Farbfeld.
• Variantenkombinationen verwenden ihr jeweiliges Bild. Eine Variante mit den Optionen Small und Black verwendet beispielsweise das Bild, das genau dieser Kombination zugewiesen ist.
• Doppelte Bilder werden einmal angezeigt. Wenn mehrere Optionsgruppen dasselbe Bild verwenden würden, zeigt nur die zuerst in der Einstellung aufgeführte Option ein Bild-Farbfeld an. Spätere Optionsgruppen verwenden die Standardoberfläche, damit dasselbe Bild nicht wiederholt angezeigt wird.

Einstellungen für den Farbfeldstil

Farb- und Bild-Farbfelder enthalten Anzeigeeinstellungen, mit denen Sie Form und Layout anpassen können.

Farbfeldstil

Wählen Sie einen Farbfeldstil, der zu den Produktbildern und zum verfügbaren Platz passt:

• Default zeigt Bild-Farbfelder in ihrem natürlichen Seitenverhältnis an. Diese Option ist nur für Bild-Farbfelder verfügbar.
• Circle
• Landscape
• Portrait
• Square
• Widescreen

Spaltenanzahl

Verwenden Sie separate Spalteneinstellungen für Desktop und Mobilgeräte, um die Farbfeldbreite in einem responsiven Layout zu steuern. Höhere Spaltenanzahlen erzeugen schmalere Farbfelder, während niedrigere Spaltenanzahlen breitere Farbfelder erzeugen.

1. Wählen Sie zwischen einer und acht Spalten.
2. Prüfen Sie sowohl die Desktop- als auch die Mobilansicht und passen Sie anschließend jede Einstellung an, um eine komfortable Touch-Zielgröße und ein gut lesbares Layout zu gewährleisten.
3. Die Spaltenanzahl steuert die Breite von Farb- und Bild-Farbfeldern und verwendet automatisch eine geeignete Bildgröße.

Tipp

Sehen Sie sich Farbfelder immer auf Mobilgeräten in der Vorschau an, insbesondere wenn Produkte viele Optionswerte haben. Eine Spaltenanzahl, die auf dem Desktop funktioniert, kann Farbfelder auf kleineren Bildschirmen zu klein oder zu dicht machen.

Nutzungshinweise

1. Halten Sie einen Auswahlblock verfügbar. Produkte mit Varianten benötigen den Variant selector-Block, damit Kunden die ausgewählte Variante in den Warenkorb legen können.
2. Verwenden Sie exakte Optionsnamen. Geben Sie beim Aktivieren von Farbfeldern Optionsbezeichnungen wie Color oder Material ein, nicht einzelne Optionswerte.
3. Definieren Sie nicht standardmäßige Farben. Fügen Sie benutzerdefinierte Farbdefinitionen für Werte hinzu, die nicht als Farbnamen erkannt werden, damit Farb-Farbfelder nicht leer bleiben.
4. Weisen Sie Variantenbilder sorgfältig zu. Bild-Farbfelder hängen von den Bildern ab, die den entsprechenden Variantenkombinationen zugewiesen sind.
5. Prüfen Sie mobile Layouts. Überprüfen Sie die mobilen Spaltenanzahlen und Farbfeldgrößen, bevor Sie Änderungen veröffentlichen.