Gitter-Interface-Einstellungen

Ausgewählte Links

1. Shopify-Dokumentation zum Theme-Editor
2. Company XYZ-Dokumentation zu den Einstellungen der Rasteransicht
3. Shopify-Dokumentation zu Abschnitten und Blöcken

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie diese Einstellungen, um zu steuern, wie sich gitterbasierte Seiten beim Durchsehen anfühlen. Sie können das Standard-Layout für größere Bildschirme und Mobilgeräte festlegen und dann entscheiden, ob Kunden eine integrierte Oberfläche sehen, um die Gittergröße selbst umzuschalten. Einen umfassenderen Überblick darüber, wie Theme-Einstellungen organisiert sind, finden Sie in Shopify-Dokumentation zum Theme-Editor

Diese Einstellungsgruppe ist auf Seiten am nützlichsten, auf denen Kunden mehrere Artikel in einem Gitter erfassen. Eine gute Einrichtung bietet Ihnen ein starkes Standardlayout und lässt dennoch Raum für unterschiedliche Browsing-Präferenzen.

Standard-Grid-Layout

Ihre Auswahl für die Grid-Größe auf Desktop und Mobilgeräten legt die Ausgangsansicht fest, wenn ein Gitter zum ersten Mal angezeigt wird. Ein dichteres Layout zeigt mehr Artikel auf einmal, während ein großzügigeres Layout jeder Karte mehr Platz für Bilder, Titel, Preise und andere Details gibt.

Auf größeren Bildschirmen kann ein engeres Gitter gut funktionieren, wenn Karten visuell einfach sind und Kunden wahrscheinlich viele Artikel schnell vergleichen. Ein großzügigeres Desktop-Gitter ist in der Regel einfacher zu durchsehen, wenn Karten längere Namen, Badges, Farbfelder oder andere unterstützende Informationen enthalten.

Mobilgeräte verdienen eine eigene Entscheidung. Ein einspaltiges Layout gibt jedem Artikel mehr visuelle Aufmerksamkeit und kann die Lesbarkeit verbessern, während ein zweispaltiges Layout Kunden hilft, schneller zu scannen und weniger zu scrollen.

Wählen Sie Ihr Standardlayout auf Basis der Menge an Inhalt innerhalb jeder Karte, nicht nur anhand der Anzahl der Artikel, die sichtbar sein sollen. Wenn Karten mehrere Labels oder längeren Text enthalten, kann sich ein dichteres Gitter sehr schnell überladen anfühlen.

Grid-Größen-Steuerung

Wenn die Oberfläche für die Grid-Größe aktiviert ist, können Kunden zu einem Layout wechseln, das zu ihrem eigenen Browsing-Stil passt. Das ist hilfreich, wenn manche Besucher möglichst viele Artikel scannen möchten, während andere größere Karten bevorzugen, die leichter zu lesen sind.

Wenn Sie eine stärker kuratierte Darstellung möchten, können Sie die Oberfläche deaktiviert lassen und sich auf die von Ihnen festgelegten Standardeinstellungen verlassen. Wenn Flexibilität wichtiger ist, gibt die Aktivierung der Steuerung Kunden eine einfache Möglichkeit, die Ansicht anzupassen, ohne den zugrunde liegenden Inhalt zu ändern.

Weitere Details dazu, wie diese Oberfläche in unterstützten Gittern funktioniert, finden Sie in Gitter-Interface-Einstellungen. Weitere Hinweise zur Einrichtung des Themes finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Sticky-Steuerungen

Die Sticky-Oberfläche hält diese Steuerungen beim Scrollen der Kunden in der Nähe des Seitenanfangs verfügbar. Das kann das Browsing-Erlebnis auf längeren Grid-Seiten angenehmer machen, da Nutzer nicht zum Anfang zurückkehren müssen, nur um das Layout zu ändern.

Sticky-Steuerungen sind am nützlichsten, wenn Gitter lang sind und Layoutänderungen wahrscheinlich sind, nachdem das Scrollen begonnen hat. Auf kürzeren Seiten oder bei Layouts, die bereits mehrere Steuerungen sichtbar halten, kann sich eine Sticky-Oberfläche unnötig anfühlen.

Tipp

Verwenden Sie Sticky-Steuerungen, wenn die Wahl des Layouts Teil des Browsing-Erlebnisses ist und nicht nur eine kleine Bequemlichkeit. Wenn Kunden die Ansicht wahrscheinlich nicht ändern, wirkt eine einfachere nicht-sticky Einrichtung oft übersichtlicher.

Nutzungshinweise

1. Beginnen Sie mit dem Karteninhalt. Wählen Sie die Grid-Dichte danach aus, wie viel Text und unterstützende Details jede Karte klar anzeigen muss.
2. Passen Sie Mobilgeräte separat an. Legen Sie den Mobilgeräte-Standard für die Lesbarkeit auf kleinen Bildschirmen fest, statt die Desktop-Präferenz zu spiegeln.
3. Prüfen Sie beide Viewports. Desktop- und Mobilgeräte-Steuerungen können Layout, Ausrichtung, Sichtbarkeit und Medienanzeige unterschiedlich beeinflussen. Prüfen Sie daher vor der Veröffentlichung jede Bildschirmgröße.
4. Achten Sie auf Unterschiede in der Vorschau. Die Editor-Vorschau kann ein Gitter verfügbar machen, bevor Live-Inhalt vorhanden ist. Bestätigen Sie das Endergebnis nach Möglichkeit mit echtem Inhalt.
5. Erwarten Sie, dass sich das Slider-Verhalten ändert. Wenn das Gitter als Slider-ähnliches Layout dargestellt wird, können Navigation, Paginierung, Vorschau und Breakpoint-Verhalten von einem statischen Gitter oder einem gestapelten Layout abweichen.
6. Behalten Sie das Fallback-Styling bei. Lassen Sie leere oder Standard-Stilwerte stehen, wenn der umgebende Bereich sein integriertes Erscheinungsbild behalten soll; verwenden Sie explizite Farben, Verläufe oder Medien-Overrides nur dann, wenn der Gitterbereich stärker hervorgehoben werden soll.