> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-interactive/sections-and-features/collection-display-section.md).

# Collection Display Section

### What You’ll Learn

* How to feature products from a collection
* Customize layout, typography, spacing, and product hover styles
* Use the **Auto Cycle** feature to rotate product images automatically

***

### Overview

The **Collection Display Section** in the Plain Jane and Interactive themes allows you to highlight products from any Shopify collection. It’s a minimalist, image-first layout, great for showcasing lookbooks or featured drops.

This section supports:

* Title display
* Flexible grid layouts (1–6 products per row on desktop, 1–3 on mobile)
* Custom spacing and hover effects
* Auto-rotating product images using the **Auto Cycle** feature

> 💡 Tip: This section is visually distinct from the **Collection List Section**, which displays multiple collections. Here, you’re featuring products from a single collection.

***

### How to Use

1. In the **Theme Editor**, click **Add Section** → **Collection Display**.
2. Under **Content & Data**:
   * Choose a **Collection** from your Shopify store.
   * Add a **Section Title** (optional).
3. In the **Layout & Display** panel:
   * Adjust **Text Alignment** (Left, Center, Right).
   * Toggle whether to show **Titles**, **Prices**, **Compare-at Price**, and product status tags like **Sold Out**, **Pre-Order**, or **Sale**.
   * Set **Products per Row** for both desktop and mobile.

***

### Auto Cycle Feature

> 🎯 Purpose: Enhance visual engagement by rotating through product images automatically.

When you enable **Auto Cycle** under **Image Hover Effect**, your product images will transition through multiple angles or styles (if uploaded to the product in Shopify).

#### How to Enable It

1. Scroll to **Image Hover Effect**.
2. Select:
   * `Auto Cycle Through All Images`
   * Or limit the number using the **Misc** dropdown: `Loop through all images`, `Limit to first 2`, etc.
3. Adjust **Image Transition Duration** (default: 550ms).

> 💡 Tip: For best results, ensure your products have multiple images in Shopify. This feature won’t activate for products with only one image.

***

### Typography

You can adjust font sizes for:

* Section Title
* Product Title
* Product Price

Controls are available separately for desktop and mobile.

***

### Colors

Customize:

* Background Color
* Section Title Color
* Product Title Color

***

### Spacing

Includes granular controls for:

* Top & bottom padding (desktop and mobile)
* Space between section title and products
* Space between product image, title, and price
* Gaps between products and rows

***

### View All Button

You can add a CTA linking to the full collection:

* Customize **Button Background Color**
* Customize **Button Text Color**

***

### **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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.openspaces.design/plain-jane-interactive/sections-and-features/collection-display-section.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.