Zum Inhalt springen

Karten-Einstellungen

Optimieren Sie wiederverwendbares Karten-Layout, Bilder, Text, Ausrichtung und Schaltflächen für eine bessere Passform auf jedem Bildschirm.

Verwenden Sie diese Einstellungen, wenn ein kartenbasierter Bereich eine andere Darstellung benötigt als Ihre breiteren Theme-Standardeinstellungen. Sie ermöglichen es Ihnen, das Erscheinungsbild und die Lesbarkeit von Karten fein abzustimmen, ohne jeden anderen Kartenstil im Storefront zu ändern. Einen breiteren Überblick darüber, wo diese Einstellungen einzuordnen sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Der Kartenstil steuert die gesamte Darstellung jeder Karte, einschließlich des Maßes an Struktur, Abstand oder Bildbetonung. Das ist der beste Ausgangspunkt, wenn Karten zu überladen, zu schlicht oder nicht passend zu den dargestellten Inhalten wirken.

Stile mit mehr Innenabstand machen gemischte Inhalte in der Regel leichter erfassbar. Bildstärkere Stile funktionieren besser, wenn Fotos den Großteil der Aussage tragen sollen.

Behalten Sie Use theme setting bei, wenn Sie Konsistenz mit dem restlichen Theme wünschen. Überschreiben Sie es nur, wenn diese Kartengruppe einen klaren visuellen oder inhaltsspezifischen Bedarf hat.

Das Bild-Seitenverhältnis steuert, wie Kartenbilder beschnitten und gerahmt werden. Separate Desktop- und Mobile-Einstellungen sind besonders nützlich, wenn derselbe Zuschnitt auf großen Bildschirmen ausgewogen wirkt, auf kleineren jedoch wichtige Inhalte abschneidet.

Querformat- und Breitbildverhältnisse eignen sich in der Regel für horizontale Bilder und dichtere Layouts. Quadrat- und Hochformatverhältnisse können ein stärkeres Raster erzeugen oder höheren Bildern mehr Raum geben. Wenn Bilder auf dem Smartphone unpassend wirken, passen Sie zuerst das mobile Verhältnis an, statt das Desktop-Layout zu beeinträchtigen.

Der Schaltflächenstil verändert, wie deutlich die Aktion der Karte dargestellt wird. Verwenden Sie auffälligere Stile, wenn Karten zu Klicks anregen sollen, und dezentere Stile, wenn Titel und Bild das Ziel bereits klar machen.

Kleinere Schaltflächen helfen, visuelle Unruhe in engen Rastern zu reduzieren. Das Ausblenden der Schaltfläche kann in sehr klaren, bildbetonten Layouts funktionieren, aber nur, wenn die Karte weiterhin eindeutig als interaktiv erkennbar ist.

Die Textanzeige steuert, wie viel schriftlicher Kontext innerhalb jeder Karte erscheint. Das beeinflusst sowohl die Geschwindigkeit beim Überfliegen als auch die Menge an Orientierung, die Kundinnen und Kunden vor dem Klicken erhalten.

Sowohl Titel als auch Auszug anzuzeigen, funktioniert gut, wenn Karten eine Erklärung benötigen oder wenn Bilder weniger aussagekräftig sind. Layouts nur mit Titel wirken sauberer und funktionieren meist am besten, wenn Bild und Bezeichnung bereits genug leisten. Minimale Textstile sollten am besten für stark visuelle Layouts mit gutem umgebendem Kontext reserviert bleiben.

Horizontale und vertikale Ausrichtung helfen dabei, dass Text im gewählten Kartenstil bewusst platziert wirkt. Die Ausrichtung wird in bildbetonten Layouts wichtiger, in denen die Platzierung die Lesbarkeit genauso stark beeinflusst wie den visuellen Stil.

Links ausgerichteter Text ist in Rastern in der Regel am einfachsten zu erfassen, während zentrierter Text stärker werblich wirkt. Die vertikale Positionierung ist vor allem bei Karten im Banner-Stil und anderen Layouts wichtig, in denen Text über oder neben dem Bild steht.

Diese Einstellungen sind als lokale Überschreibungen für wiederverwendbare Karten gedacht. Wenn Sie die meisten Optionen auf Use theme setting belassen, bleibt die Konsistenz erhalten, während gezielte Änderungen es Ihnen ermöglichen, eine bestimmte Kartengruppe an unterschiedliche Inhaltstypen, Bildformate oder das Browsing-Verhalten anzupassen.

Wenn Sie feststellen, dass Sie fast jede Option ändern, prüfen Sie die Gesamtpräsentation dieses Kartenbereichs. Eine geringere Anzahl gezielter Überschreibungen führt in der Regel zu einem konsistenteren Ergebnis als das erneute Erstellen des Kartenstils von Grund auf.

Weitere Details zu den verfügbaren Steuerelementen finden Sie in der Company XYZ-Dokumentation zu Einstellungen/Karten und in der Shopify-Dokumentation zum Anpassen von Abschnitten

  1. Prüfen Sie beide Breakpoints. Desktop- und Mobile-Steuerelemente können Layout, Ausrichtung, Sichtbarkeit und Medienverhalten unterschiedlich beeinflussen. Prüfen Sie daher beide Ansichten vor der Veröffentlichung.
  2. Achten Sie auf das Slider-Verhalten. Präsentationen im Slider-Stil können Navigation, Pagination, Vorschauen und das Verhalten an Breakpoints im Vergleich zu einem statischen Raster oder einem gestapelten Layout verändern.
  3. Halten Sie Fallbacks einfach. Leere, transparente oder Standardwerte bewahren in der Regel das breitere Fallback-Styling, während explizite Farben, Verläufe oder Medien-Überschreibungen den lokalen Bereich unabhängiger machen.
  4. Schützen Sie die Lesbarkeit von Bildern. Wenn Desktop- und Mobile-Medien getrennt festgelegt werden, bestätigen Sie Zuschnitt, Laden, Fallback und Textkontrast auf beiden Bildschirmen.
  5. Bewahren Sie klare Navigationshinweise. Wenn Karten Menüs, Drawer, verschachtelte Links oder nur für Mobilgeräte vorgesehene Steuerelemente enthalten, stellen Sie sicher, dass ausgeblendete oder neu angeordnete Elemente den Weg nicht blockieren, den Kundinnen und Kunden erwarten.