# Collection Layout Settings

> **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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/plain-jane-interactive/theme-settings/collection-layout-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.