Einstellungen für Produktkarten

Ausgewählte Links

1. Shopify-Dokumentation zum Anpassen von Themes
2. Shopify-Dokumentation zu Abschnitten und Blöcken

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Diese Einstellungen definieren das Standardaussehen und -verhalten von Produktkarten in Ihrem Theme. Verwenden Sie sie, um ein konsistentes Browsing-Erlebnis für Produktgitter, Listen und andere produktbezogene Darstellungen auf Kartenbasis zu schaffen, und überschreiben Sie sie nur dort, wo ein bestimmtes Template einen anderen Ansatz benötigt. Für einen umfassenderen Überblick über die Konfiguration auf Theme-Ebene siehe Shopify-Dokumentation zum Anpassen von Themes

Globales Karten-Layout

Beginnen Sie hier, um die Gesamtstruktur Ihrer Produktkarten zu gestalten. Kartenstil, Bildverhältnis, Textdarstellung, Ausrichtung und Schaltflächenbehandlung wirken zusammen und bestimmen, wie visuell, kompakt oder informationsreich Ihre Produktlisten wirken.

Verwenden Sie separate Bildverhältnisse für Desktop und Mobilgeräte, damit Karten auf unterschiedlichen Bildschirmgrößen ausgewogen bleiben. Ein konsistentes Verhältnis ist besonders hilfreich, wenn sich Produktfotos unterscheiden, da es Gitternetzansichten sauberer und leichter erfassbar macht.

Texteinstellungen steuern, wie viel Kontext angezeigt wird, bevor ein Kunde das Produkt öffnet. Wenn Titel und Auszug angezeigt werden, kann das die Entdeckung unterstützen, während Layouts nur mit Titel in der Regel besser für dichtere Gitter oder stark visuelle Kataloge geeignet sind.

Karten im Banner-Stil zeigen immer nur ein einzelnes Bild an, daher gelten die Diashow-Einstellungen nicht. Die vertikale mittige Textausrichtung funktioniert ebenfalls nur mit dem Banner-Stil.

Produktdetails und Aktionen

Diese Steuerelemente legen fest, welche wichtigen Produktdetails auf Karten angezeigt werden, einschließlich Preis, Anbieter, Badges, Schnellkauf-Aktionen und Variantenauswahl. Verwenden Sie sie, um zu entscheiden, wie viel vom Einkauf direkt über die Karte statt auf der Produktseite stattfinden kann.

Schnellkauf ist am nützlichsten, wenn Kunden mit hoher Sicherheit direkt aus der Gitteransicht kaufen können. Wenn die Variantenauswahl aktiviert ist und das Produkt verfügbar ist, kann die Karte einen direkteren In-den-Warenkorb-Ablauf unterstützen; andernfalls führt die Aktion Kunden möglicherweise stattdessen zur vollständigen Produktseite.

Collection-Badges können ausgewählte Produkte mit leichtgewichtigen Merchandising-Labels hervorheben. Das eignet sich gut für Aktionen, kuratierte Bearbeitungen oder Produktgruppen, die Kunden schnell wahrnehmen sollen.

Hover-Einstellungen

Hover-Medien lassen Produktkarten ein alternatives Asset anzeigen, wenn Kunden sie auf dem Desktop mit der Maus überfahren. Das ist nützlich, um eine zweite Perspektive, eine Detailansicht oder ein anderes unterstützendes Bild zu zeigen, ohne der Karte mehr Text hinzuzufügen.

Sie können automatisch eine Galerieposition auswählen oder auf ein Metafeld verweisen, wenn Sie eine genauere Kontrolle über das Hover-Asset für jedes Produkt wünschen. Eine Metafeld-basierte Einrichtung ist besonders hilfreich, wenn das ideale Hover-Bild in Ihrem Katalog nicht durchgängig an derselben Position liegt.

Hover-Medien funktionieren nicht, wenn der Bildstil der Produktkarte auf Diashow gesetzt ist.

Diashow-Einstellungen

Wenn Sie Produktkarten im Diashow-Stil verwenden, steuert diese Untergruppe, wie sich diese Galerien auf Desktop und Mobilgeräten verhalten. Sie können die sichtbare Anzahl der Folien, den Animationsstil, die Geschwindigkeit, Autoplay, das Looping sowie die Navigation oder Seitennummerierung auf der Karte anpassen.

Diashows eignen sich am besten, wenn mehrere Produktbilder Kunden dabei helfen, Artikel aus der Gitteransicht zu vergleichen oder zu bewerten. Für einfachere Kataloge ist ein Ein-Bild-Setup in der Regel leichter zu erfassen und lenkt die Aufmerksamkeit stärker auf die Produktliste als Ganzes.

Die Fade-Animation erzeugt eine einfachere Darstellung, erzwingt aber auch ein Einzelfolien-Layout und zeigt keine Seitennummerierung an. Wenn Folienanzahl und Navigationsrückmeldung wichtig sind, wählen Sie einen Animationsstil ohne Fade.

Achtung

Beim Standard-Animationsstil werden Karten für Produkte mit weniger als vier Medienelementen nicht geloopt, selbst wenn Looping aktiviert ist.

Farbfeld-Einstellungen

Farbfelder ermöglichen es Kunden, Variantenauswahlen direkt auf der Produktkarte zu sehen. Sie sind am effektivsten, wenn Farbe eine zentrale Browsing-Entscheidung ist und Ihre Optionsbenennung über alle Produkte hinweg konsistent ist.

Geben Sie die Optionsnamen ein, nicht die Optionswerte, für die Variantenoptionen, die Farbfelder anzeigen sollen. Wenn die Benennung inkonsistent ist, werden Farbfelder möglicherweise nur bei einigen Produkten oder gar nicht angezeigt.

Eigene Farbdefinitionen sind nützlich, wenn Ihre Farbnamen über die standardmäßigen benannten Farben hinausgehen oder wenn Sie mehr Kontrolle darüber wünschen, wie Farbfelder erscheinen.

Bild-Farbfeld-Einstellungen

Bild-Farbfelder ersetzen flache Farbkacheln durch mit Varianten verknüpfte Miniaturbilder. Das ist eine gute Wahl, wenn sich Varianten besser durch Muster, Textur, Finish oder ein kleines Produktbild unterscheiden lassen.

Jede relevante Variantenoption benötigt ein zugehöriges Bild, damit sie gut angezeigt wird. Wenn einige Varianten keine Bilder haben, können diese Farbfelder unvollständig wirken.

Wenn sowohl Bild- als auch Farbfelder für dasselbe Optionsbenennungsmuster konfiguriert sind, haben Bild-Farbfelder Vorrang. In den meisten Fällen ist es besser, für jeden Variantentyp eine Hauptmethode für Farbfelder zu wählen.

Einstellungen für den Farbfeldrahmen

Steuerelemente für den Farbfeldrahmen helfen dabei, Farb- und Bild-Farbfelder vor unterschiedlichen Hintergründen und Bildern sichtbar zu halten. Sie sind besonders nützlich für helle Farbfelder, Karten mit geringem Kontrast oder Themes mit subtiler Oberflächengestaltung.

Wenn Sie die Rahmenfarben leer lassen, verwendet das Theme stattdessen die Rahmenfarben der primären Schaltfläche. Die aktive Variante behält immer einen sichtbaren ausgewählten Zustand, sodass Kunden weiterhin erkennen können, welche Option derzeit ausgewählt ist.

Nutzungshinweise

1. Legen Sie Standardwerte fest, bevor Sie Ausnahmen machen. Erstellen Sie hier zuerst einen starken globalen Produktkartenstil und verwenden Sie Template-Ebene-Überschreibungen nur dann, wenn ein bestimmtes Layout wirklich ein anderes Verhalten benötigt. Hinweise dazu, wie Theme-Bereiche organisiert sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
2. Wählen Sie ein Medienmuster. Verwenden Sie einzelne Bilder für schnelles Scannen, Hover-Medien für eine schnelle zweite Ansicht oder Diashows, wenn mehrere Bilder auf Kartenebene das Browsing eindeutig verbessern.
3. Prüfen Sie beide Haltepunkte. Karten auf Desktop und Mobilgeräten können sich unterschiedlich verhalten. Prüfen Sie daher Bildverhältnisse, Ausrichtung, Navigation und Sichtbarkeit der Medien auf beiden Bildschirmgrößen, bevor Sie veröffentlichen.
4. Halten Sie das Fallback-Styling klar. Leere Werte oder Werte im Standardstil bewahren in der Regel das integrierte Erscheinungsbild des Themes, während explizite Farben, Verläufe oder Medien-Überschreibungen einen Produktkartenbereich eigenständiger wirken lassen.
5. Achten Sie auf Funktionswechselwirkungen. Bannerkarten verwenden keine Diashows, Diashow-Karten unterstützen keine Hover-Medien, und Bild-Farbfelder überschreiben Farbfelder, wenn beide auf dieselbe Option zielen.