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: [email protected]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website