Zum Inhalt springen

Produkt

Heben Sie ein Produkt mit flexiblen Steuerungen für Kartenstil, Farbe und Sichtbarkeit hervor.

Verwenden Sie diesen Block, um überall dort eine einzelne Produktkarte anzuzeigen, wo Sie ein bestimmtes Produkt hervorheben möchten. Er kann das Produktkarten-Design Ihres Themes übernehmen oder es hier überschreiben, wenn diese Karte ein eigenes Layout oder eine eigene visuelle Behandlung benötigt. Für einen umfassenderen Überblick darüber, wie Blöcke im Theme-Editor funktionieren, siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Wählen Sie das Produkt aus, das dieser Block anzeigen soll. Die übrigen Blockeinstellungen bestimmen, wie dieses Produkt erscheint. Daher eignet sich dieser Block am besten, wenn das ausgewählte Produkt bereits ein starkes Hauptbild und klaren Produkttext hat.

Diese Einstellungen steuern das Layout der Karte, den Bildzuschnitt, die Textdarstellung, die Schaltflächendarstellung und die Variantendarstellung. Lassen Sie sie auf Use theme setting, wenn dieser Block zu Ihren anderen Produktkarten passen soll, oder überschreiben Sie sie, wenn dieses Produkt eine andere Gewichtung benötigt.

Der Kartenstil ist die wichtigste visuelle Entscheidung. Banner-Stile eignen sich für größere Werbeflächen, während einfachere Stile sich meist leichter in engere Layouts oder gemischte Inhaltszeilen einfügen lassen.

Das Bildverhältnis für Desktop und Mobilgeräte kann getrennt festgelegt werden. Wenn die Karte auf dem Desktop ausgewogen wirkt, das Bild auf kleineren Bildschirmen aber unvorteilhaft zugeschnitten wird, passen Sie das mobile Verhältnis an, statt den gesamten Kartenstil zu ändern.

Der Schaltflächenstil verändert, wie prominent sich die Kaufaktion anfühlt. Auf Mobilgeräten wird nur ein Symbol verwendet, daher sollten Produktbild und Text die Karte auch ohne langen Schaltflächentext verständlich machen.

Texteinstellungen ermöglichen es Ihnen, die Karte zu vereinfachen, wenn der Platz begrenzt ist. Größere Platzierungen können sowohl Titel als auch Auszug unterstützen, während kleinere Platzierungen oft besser nur mit dem Titel funktionieren.

Die mittige vertikale Textausrichtung funktioniert nur mit dem Kartenstil Banner.

Variantenauswahlen können die Karte für Produkte mit sinnvollen Optionen nützlicher machen, jedoch nur, wenn diese Optionen klar eingerichtet sind und sich aus der Karte selbst leicht verstehen lassen.

Weitere allgemeine Informationen zum Verhalten finden Sie in der Referenz zu Produktkarteneinstellungen.

Diese Einstellungen überschreiben nur die Kartenfarben für diesen Block. Verwenden Sie sie, wenn ein hervorgehobenes Produkt auffallen soll oder wenn der Hintergrund der umgebenden Seite eine andere Kartendarstellung für besseren Kontrast benötigt.

Die Banner-Overlay-Einstellungen gelten nur für den Kartenstil Banner. Sie sind nützlich, wenn Produktbilder unruhig sind und Sie die Lesbarkeit des Textes verbessern müssen, ohne das Bild zu ersetzen.

Hintergrund-, Rahmen-, Überschrift- und Textfarben lassen sich am besten gemeinsam anpassen. Das führt in der Regel zu einem saubereren Ergebnis, als eine einzelne Farbe isoliert zu ändern.

Zum gemeinsamen Verhalten der Kartenfarben siehe die Referenz zu Karteneinstellungen.

Verwenden Sie die Sichtbarkeitssteuerung, um diesen Block überall anzuzeigen oder ihn auf dem Desktop oder Mobilgerät auszublenden. Das ist hilfreich, wenn Sie eine Version einer hervorgehobenen Produktkarte für größere Bildschirme und eine einfachere oder anders zugeschnittene Version für kleinere Bildschirme möchten.

Weitere Informationen zur Anzeige-Steuerung finden Sie in der Referenz zu Sichtbarkeitseinstellungen.

Verwenden Sie den Editor-Titel, um den Block in der Seitenleiste klar zu beschriften. Das ist besonders hilfreich, wenn ein Layout mehrere Produktblöcke enthält und Sie jeden einzelnen beim Bearbeiten schnell erkennen möchten.

  1. Wählen Sie ein starkes Produkt aus. Wählen Sie ein Produkt mit einem klaren Hauptbild und kurzem unterstützendem Text, damit die Karte auf einen Blick gut lesbar ist.
    1. Verwenden Sie ein Produkt, das auch dann noch sinnvoll ist, wenn das Bild auf kleineren Bildschirmen stärker zugeschnitten wird.
    2. Stellen Sie sicher, dass das Hauptproduktbild lesbar bleibt, wenn Sie die Kartenfarben überschreiben oder ein Overlay hinzufügen möchten.
  2. Passen Sie Überschreibungen an die Aufgabe an. Lassen Sie gemeinsame Karteneinstellungen unverändert, wenn Sie Konsistenz wünschen, und überschreiben Sie sie nur dann, wenn dieses hervorgehobene Produkt eine stärkere visuelle Rolle benötigt.
    1. Leere Werte oder Werte im Standardstil behalten in der Regel die Fallback-Formatierung bei.
    2. Explizite Farben oder Medieneinstellungen lassen diese Karte unabhängiger vom Rest des Layouts wirken.
  3. Prüfen Sie Mobilgeräte separat. Überprüfen Sie Bildzuschnitt, Textlänge und die Klarheit der Schaltfläche auf kleineren Bildschirmen, bevor Sie den Block finalisieren.
    1. Mobile Steuerelemente können Ausrichtung, Sichtbarkeit und Medienverhalten im Vergleich zum Desktop ändern.
    2. Wenn Desktop- und mobile Medien unterschiedlich sind, prüfen Sie beide Ansichten, um sicherzustellen, dass die Karte weiterhin klar lesbar ist.
  4. Verwenden Sie Varianten nur, wenn sie hilfreich sind. Zeigen Sie Farbfelder oder Schaltflächen nur dann an, wenn sie die Produktauswahl direkt über die Karte verbessern.
  5. Testen Sie den Kontrast sorgfältig. Wenn Sie Farben oder Overlays überschreiben, stellen Sie sicher, dass der Produkttext über verschiedene Bilder und Geräte hinweg gut lesbar bleibt.