# Collection List Page

> **What You’ll Learn**
>
> * How to set up and style your Collection List page
> * How to customize 3D Collection Cards
> * Where to assign collections, images, and visual effects

***

### 🧭 Where to Find It

In the Shopify Theme Editor:

1. Go to **Online Store > Themes**
2. Click **Customize** on your active theme
3. Use the top dropdown to navigate to `Collection list`

***

### 🗂 Section Overview

The Collection List page is a stylized grid of selected collections using fully customizable **3D Collection Cards**. Each card can link to a specific collection and respond to mouse hover with visual effects and text overlays.

#### 🧱 Collection Card Blocks

Each card allows you to:

* Select a specific **collection** to display
* Assign **desktop** and **mobile featured images**
* Control **hover effects** and text **alignment**
* Adjust **colors**, **shadows**, **spacing**, and **hover animation**

***

🖼️ Setting the Featured Image

> ⚠️ Featured images for Collection Cards are pulled directly from the collection setup in the Shopify Admin.

1. Go to **Shopify Admin > Products > Collections**
2. Click on the collection you want to use
3. Upload a featured image
4. Return to the Theme Editor to continue styling the card

***

### 🎛 Key Settings (per Collection Card)

#### ✅ Visibility Toggles

* `Show Collection Image`
* `Show Header`
* `Show Description`
* Toggle hover-specific content (Image, Header, Description)

#### 🌀 Card Effects (Desktop Only)

* `Enable Tilt`
* `Enable Tilt Glare`

> 💡 Effects only display on the **live site**, not in the Theme Editor preview.

#### 🎨 Colors

* Background color
* Hover background color
* Header and description colors (default and hover)

#### 🎯 Alignment and Position

Adjust **header** and **description** alignment and pixel positioning using:

* `Up/Down` and `Left/Right` sliders
* Separate options for **default** and **hover** states

***

### 📐 Card Design Settings

* **Card Curve**: Rounds the corners of the card (e.g., `30px`)
* **Custom Hover Title & Description**: Optional text overlay on hover
* **Card Background on Hover**: Upload alternate background image
* **Gradient Overlays**: Add top/bottom gradients on hover with color + opacity

***

### 📏 Image Sizing

* **Desktop Card Dimensions**: `740px x 350px`
* **Mobile Card Dimensions**: `315px x 350px`

> ⚠️ Ensure all your collection cards use consistent image sizes for a clean layout

***

### 🎵 Bonus Tip

If using the **Music Player** section with Collection List, remember:

> ⚠️ The music player **only works with direct `.mp3` file URLs.** Links to streaming platforms (e.g., Spotify, Apple Music) will not work.

***

### **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/pages-and-menus/collection-list-page.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.