# 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