Zum Inhalt springen

Einstellungen für Produktkarten

Feinabstimmung von Stil, Bildern, Text, Schaltflächen und Farbfeldern für Produktkarten für übersichtlichere Produkt-Grid-Ansichten.

Verwenden Sie diese Einstellungen, um die Darstellung von Produktkarten dort zu optimieren, wo dieses gemeinsame Kartenmuster verwendet wird. Sie können Karten mit Ihren allgemeinen Theme-Standardwerten ausrichten oder sie überschreiben, wenn eine bestimmte Produktauflistung eine andere Darstellung benötigt. Weitere Informationen dazu, wie diese Einstellungen im Theme-Editor eingeordnet sind, finden Sie in der Shopify-Dokumentation zum Theme-Editor

Diese Gruppe steuert das allgemeine Erscheinungsbild und die Informationsdichte von Produktkarten. Sie ist besonders nützlich, wenn Sie anpassen möchten, wie visuell, kompakt oder handlungsorientiert Produktauflistungen wirken, ohne jede kartenbezogene Einstellung global zu ändern. Weitere Informationen dazu, wie sich diese Steuerelemente auf Theme-Komponenten beziehen, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Die Referenzseite für Karteneinstellungen enthält zusätzliche Hinweise dazu, wie sich diese Überschreibungen auf das allgemeine Theme-Verhalten beziehen: Einstellungen für Produktkarten

Der Kartenstil ändert die Struktur und den Abstand jeder Produktkarte. Verwenden Sie ihn, um Karten je nach Kollektion und Qualität Ihrer Produktbilder redaktioneller, kompakter oder stärker auf Nutzen ausgerichtet wirken zu lassen.

Stärker strukturierte oder großzügiger gepolsterte Stile eignen sich in der Regel am besten, wenn Produktfotos sich in Zuschnitt oder Hintergrund unterscheiden. Engere Stile können mehr Produkte in einer Reihe unterbringen, machen Inkonsistenzen aber auch deutlicher sichtbar.

Wenn Ihre Produktbilder uneinheitlich zugeschnitten sind, wählen Sie einen Stil mit mehr visueller Struktur oder mehr Abstand, damit Produkt-Grid-Ansichten bewusst gestaltet wirken.

Sie können separate Bildverhältnisse für Desktop und Mobilgeräte wählen, was hilfreich ist, wenn ein Zuschnitt nicht für beide Bildschirmgrößen gut funktioniert. Feste Verhältnisse sorgen in der Regel für ein saubereres, konsistenteres Grid, besonders wenn Ihr Katalog verschiedene Bildformate mischt.

Breitere Verhältnisse können redaktioneller wirken, während quadratische oder Hochformat-Verhältnisse Produktauflistungen oft leichter erfassbar machen. Wenn Ihre Produktfotos bereits sorgfältig vorbereitet sind, kann die Verwendung des Standard- oder Theme-Ebenen-Verhältnisses die beabsichtigte Bildkomposition besser bewahren.

Diese Einstellung steuert, wie prominent die Aktion der Produktkarte angezeigt wird. Blenden Sie sie für ein übersichtlicheres Browser-Erlebnis aus oder verwenden Sie einen textbasierten Stil, wenn Kundinnen und Kunden einen klareren Handlungsimpuls benötigen.

Kompakte Schaltflächenstile helfen dabei, dichte Grids ordentlich zu halten. Auf Mobilgeräten wird die Aktion nur als Symbol angezeigt. Stellen Sie daher sicher, dass die Karte weiterhin klar und nutzbar wirkt, wenn die Beschriftung nicht mehr angezeigt wird.

Der Kartentext steuert, wie viele schriftliche Produktinformationen auf jeder Karte angezeigt werden. Mehr Text kann helfen, ein Produkt schnell zu erklären, während weniger Text ein saubereres, stärker bildorientiertes Layout schafft.

Das Anzeigen von Titel und Auszug funktioniert am besten, wenn der Begleittext kurz und konsistent ist. Wenn Auszüge in Ton oder Länge stark variieren, sind Karten nur mit Titel in der Regel leichter zu erfassen.

Die Textausrichtung beeinflusst sowohl die Lesbarkeit als auch die visuelle Wirkung. Linksbündige Ausrichtung ist in der Regel die klarste Wahl für Produkt-Grid-Ansichten, während zentrierter Text stärker werblich oder designorientiert wirken kann.

Die vertikale Ausrichtung ist vor allem in Layouts wichtig, in denen sich Text innerhalb einer stärker gestalteten Karte befindet. Die mittlere Position gilt nur für den Banner-Kartenstil und ist daher hauptsächlich für bannerbasierte Produktkarten-Darstellungen nützlich.

Mit der Varianten-Auswahl können Kundinnen und Kunden Optionen direkt in der Produktkarte mithilfe von Farbfeldern oder Pills ansehen oder auswählen. Das ist besonders nützlich, wenn Farbe, Muster oder bildbasierte Varianten ein wichtiger Teil der Kaufentscheidung sind.

Wenn Ihr Katalog einfache Produkte oder uneinheitliche Varianten-Darstellungen hat, kann das Ausblenden der Auswahl die Karten übersichtlicher halten. Wenn Sie Farbfelder oder Pills aktivieren, stellen Sie sicher, dass die Variantendaten konsistent eingerichtet sind, damit Kundinnen und Kunden eine verlässliche Erfahrung erhalten.

Anleitung zur Einrichtung finden Sie in der Shopify-Dokumentation zu Produktvarianten

  1. Überschreibungen gezielt verwenden. Behalten Sie Theme-Ebenen-Einstellungen bei, sofern ein bestimmter Produktkarten-Kontext nicht ein anderes Erscheinungsbild oder Verhalten benötigt.
  2. Verhältnisse auf Konsistenz ausrichten. Feste Bildverhältnisse helfen dabei, gemischte Fotografie zu vereinheitlichen, während Standardverhältnisse eine natürlichere Bildkomposition bewahren.
  3. Für Mobilgeräte zuerst gestalten. Da Produktkarten-Aktionen auf Mobilgeräten nur als Symbol angezeigt werden, sollten Sie auf starke Bilder und klaren Text setzen, damit Karten verständlich bleiben.
  4. Text gezielt einsetzen. Zeigen Sie Auszüge nur dann an, wenn sie nützlichen Produktkontext liefern; andernfalls sind einfachere Karten mit Titel meist leichter zu erfassen.
  5. Auswahlen dort aktivieren, wo sie wichtig sind. Verwenden Sie Farbfelder oder Pills für Produkte mit aussagekräftigen visuellen Optionen, und bestätigen Sie vor einer breiten Ausrollung, dass Ihre Varianten-Einrichtung konsistent ist.
  6. Sliderartige Karten in beiden Ansichten prüfen. Wenn Sie eine Präsentation im Slider-Stil wählen, überprüfen Sie Navigation, Pagination und Abstände auf Desktop und Mobilgeräten, da sich das Layout anders als ein statisches Grid verhalten kann.
  7. Getrennte Medienauswahlen sorgfältig prüfen. Wenn Desktop und Mobilgeräte unterschiedliche Bildzuschnitte verwenden, überprüfen Sie beide Versionen auf Lesbarkeit, Fallback-Bildausschnitt und unbeabsichtigtes Cropping.