# 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

<figure><img src="/files/AaZTpdyDblztS5nJ1t1s" alt=""><figcaption></figcaption></figure>

***

### 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: 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/readme-1/sections-and-features/collection-display-section.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.