Collection Layout Settings
For Plain Jane, and Plain Jane Interactive
What You’ll Learn
How to customize the layout of your collection pages
How to adjust column count, spacing, image size, and hover effects
🧭 Overview
The Collection Layout settings allow you to control how products are displayed on your collection pages across desktop and mobile. These options help create the ideal shopping experience that matches your brand's look and product range.
🖥️ Layout Options
Desktop Columns
Choose how many products display per row on desktop:
Options: 2, 3, 4, 5, or 6 columns
Mobile Columns
Choose how many products display per row on mobile:
Options: One or Two columns
💡 Use fewer columns for large product images or premium items
Column & Row Gaps
Adjust spacing between products to control visual density:
Column Gap (Desktop)
Row Gap (Desktop)
Column Gap (Mobile)
Row Gap (Mobile)
All values are measured in pixels (px) and adjustable via slider.
🖼️ Image Settings
Product Image Size
Adjust the percentage size of the product image relative to its container (e.g., 100%)
Product Image Aspect Ratio
Choose how product images are shaped across your grid:
Natural (Original Image Size)
Square
Portrait
Landscape
💡 Choose Square for a more uniform layout
Show 2nd Product Image on Hover
Toggle this on to reveal the second image in a product listing when hovering on desktop
Commonly used to show alternate views or product angles
🧪 Common Use Cases
Minimal Stores — Use 2–3 columns and larger spacing
High-Volume Stores — Use 4–6 columns to display more products
Interactive Displays — Enable 2nd image hover for product engagement
Need Help?
💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6
📧 Email us at: support@openspaces.design
💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website
Last updated