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:
Go to Online Store > Themes
Click Customize on your active theme
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.
Go to Shopify Admin > Products > Collections
Click on the collection you want to use
Upload a featured image
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
andLeft/Right
slidersSeparate 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