Collection List Page

For Plain Jane, and Plain Jane Interactive

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: [email protected]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website