Zum Inhalt springen

Layouteinstellungen

Legen Sie im Theme-Editor Grid- oder Diashow-Layouts sowie Spaltenanzahlen für jede Bildschirmgröße fest.

Verwenden Sie diese Einstellungen, um festzulegen, wie wiederholte Inhalte auf Desktop, Tablet und Mobilgerät angezeigt werden. Sie können für jede Gerätegröße ein Grid oder eine Diashow wählen und dann anpassen, wie viele Elemente gleichzeitig angezeigt werden, damit es zu Ihren Inhalten und dem verfügbaren Bildschirmplatz passt. Für einen umfassenderen Überblick darüber, wie Theme-Komponenten organisiert sind, siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Der Layoutstil steuert, ob Elemente in einem festen Grid oder in einer wischbaren Diashow angezeigt werden. So haben Sie mehr Flexibilität, auf größeren Bildschirmen mehr Elemente gleichzeitig zu zeigen und kleinere Bildschirme leichter durchsuchbar zu halten.

  1. Wählen Sie Grid, wenn Kundinnen und Kunden mehrere Elemente nebeneinander vergleichen sollen.
  2. Wählen Sie Diashow, wenn jedes Element mehr Fokus benötigt oder der Platz begrenzt ist.
  3. Kombinieren Sie die Stile bei Bedarf geräteabhängig. Ein Grid auf dem Desktop und eine Diashow auf Mobilgeräten ist oft eine praktische Kombination.

Wählen Sie Layoutstil und Spaltenanzahl zusammen aus. Dichte Grids eignen sich am besten für einfache Inhalte, während Diashows in der Regel weniger sichtbare Elemente und mehr Platz pro Karte benötigen.

Spaltenanzahlen steuern, wie viele Elemente in jeder Zeile für jede Gerätegröße angezeigt werden. Höhere Anzahlen erhöhen die Browsing-Dichte, verringern aber auch den verfügbaren Platz für Bilder, Titel, Preise und unterstützende Details.

  1. Auf dem Desktop können höhere Spaltenanzahlen gut für kompakte Karten und das Durchsuchen vieler Elemente funktionieren.
  2. Auf dem Tablet hilft eine separate Anzahl dabei, Layouts zu vermeiden, die auf mittelgroßen Bildschirmen zu eng wirken.
  3. Auf dem Mobilgerät sind niedrigere Anzahlen in der Regel leichter zu lesen und zu antippen.

Wenn die Spaltenanzahl für das Tablet auf 0 gesetzt ist, verwenden Tablet-Bildschirme stattdessen die Desktop-Spalteneinstellung. Das ist nützlich, wenn Sie ein konsistentes Layout für größere Bildschirme wünschen, sollten aber dennoch prüfen, ob die Karten auf dem Tablet genug Platz haben.

Das beste Layout hängt davon ab, wie viele Informationen jedes Element anzeigen muss. Einfache, bildorientierte Karten kommen mit dichteren Layouts zurecht, während textlastige oder detailreiche Karten in der Regel mehr Platz benötigen.

  1. Verwenden Sie weniger Spalten für längere Titel, mehrere Labels, Preise oder zusätzliche Metadaten.
  2. Verwenden Sie mehr Spalten für Layouts zum schnellen Überfliegen mit wenig Text.
  3. Verwenden Sie Diashow-Layouts, wenn sich Kundinnen und Kunden jeweils auf ein Element konzentrieren sollen, statt eine ganze Zeile zu überfliegen.
  1. Beginnen Sie mit der Inhaltsgröße. Wählen Sie Ihre Spaltenanzahlen danach aus, wie viel Text und Bildmaterial jedes Element bequem anzeigen muss.
  2. Prüfen Sie das Tablet separat. Das Übernehmen der Desktop-Spaltenanzahl kann Zeit sparen, aber Tablet-Layouts benötigen oft eine eigene Feinabstimmung.
  3. Halten Sie das Mobilgerät antippbar. Vermeiden Sie mobile Layouts, durch die Karten zu schmal oder Touch-Ziele zu klein werden.
  4. Verwenden Sie die Diashow gezielt. Wählen Sie die Diashow, wenn der Fokus wichtiger ist als die Anzeige der maximalen Anzahl an Elementen gleichzeitig.
  5. Bewahren Sie das Standardaussehen, wenn Sie ein Fallback-Styling wünschen. Leere, transparente oder standardmäßige Werte behalten in der Regel das übernommene Erscheinungsbild bei, während explizite Farben, Verläufe oder Medienüberschreibungen diesen Bereich eigenständiger wirken lassen. Für Einrichtungsdetails im Theme-Editor siehe Shopify-Dokumentation zum Anpassen von Abschnitten