Einstellungen für die Kollektionen-Ansicht

Für Plain Jane und Plain Jane Interactive

Was Sie lernen werden

  • So passen Sie das Layout Ihrer Kategorieseiten an

  • So passen Sie Spaltenanzahl, Abstände, Bildgröße und Hover-Effekte an


🧭 Überblick

Die Kategorieseiten-Layout Einstellungen ermöglichen Ihnen zu steuern, wie Produkte auf Ihren Kategorieseiten auf Desktop und Mobil angezeigt werden. Diese Optionen helfen dabei, das ideale Einkaufserlebnis zu schaffen, das zum Erscheinungsbild Ihrer Marke und Ihrem Produktsortiment passt.


🖥️ Layout-Optionen

Desktop-Spalten

  • Wählen Sie, wie viele Produkte pro Zeile auf dem Desktop angezeigt werden:

    • Optionen: 2, 3, 4, 5, oder 6 Spalten

Mobile-Spalten

  • Wählen Sie, wie viele Produkte pro Zeile auf Mobilgeräten angezeigt werden:

    • Optionen: Eine oder Zwei Spalten

💡 Verwenden Sie weniger Spalten für große Produktbilder oder Premium-Artikel

Spalten- & Zeilenabstände

Passen Sie den Abstand zwischen Produkten an, um die visuelle Dichte zu steuern:

  • Spaltenabstand (Desktop)

  • Zeilenabstand (Desktop)

  • Spaltenabstand (Mobil)

  • Zeilenabstand (Mobil)

Alle Werte werden in Pixeln gemessen (px) und sind über einen Schieberegler einstellbar.


🖼️ Bildeinstellungen

Produktbildgröße

  • Passen Sie die prozentuale Größe des Produktbilds relativ zu seinem Container an (z. B. 100%)

Seitenverhältnis des Produktbilds

Wählen Sie, wie Produktbilder in Ihrem Raster geformt werden sollen:

  • Natürlich (originale Bildgröße)

  • Quadratisch

  • Hochformat

  • Querformat

💡 Wählen Sie Quadratisch für ein gleichmäßigeres Layout

Zweites Produktbild beim Hover anzeigen

  • Schalten Sie dies ein, um beim Hover auf dem Desktop das zweite Bild in einer Produktauflistung anzuzeigen

  • Wird häufig verwendet, um alternative Ansichten oder Produktwinkel zu zeigen


🧪 Übliche Anwendungsfälle

  • Minimalistische Shops — Verwenden Sie 2–3 Spalten und größere Abstände

  • Hochvolumige Shops — Verwenden Sie 4–6 Spalten, um mehr Produkte anzuzeigen

  • Interaktive Präsentationen — Aktivieren Sie das zweite Bild beim Hover für mehr Produktinteraktion


Brauchen Sie Hilfe?

Zuletzt aktualisiert