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: support@openspaces.design

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

Last updated