Collection List Page

In the Shopify Theme Editor:

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?