Collection Page

Plain Jane includes two layout types for collection pages:

For Plain Jane, and Plain Jane Interactive

What You’ll Learn

  • The difference between Classic and Sidebar Collection layouts
  • How to connect a custom menu to your collection pages
  • Tips for displaying products and customizing design settings

🧱 Collection Layout Options

Plain Jane includes two layout types for collection pages:

Layout Type Description
Classic Collection Minimal design with a fixed category menu and sort/search icons
Sidebar Collection Includes a customizable sidebar with advanced layout and background options

You can toggle between these layouts by enabling/disabling the Classic Collection or Sidebar Collection section in the Theme Editor.

💡 Tip: Use only one collection section at a time (hide the other).

🔗 Connect a Custom Collection Menu

To create a custom navigation menu for your collection page:

  1. Go to Online Store > Navigation in the Shopify Admin
  2. Click Add menu and name it (e.g. Shop Menu)
  3. Add links for your categories (e.g. Tops, Bottoms, Accessories)
  4. (Optional) Nest items for second/third-level dropdowns
  5. Click Save

Then:

  1. Open the Theme Editor
  2. Select Collections > [Your Collection] from the top dropdown
  3. Click on Classic Collection or Sidebar Collection
  4. Under Select Collection Menu, choose the menu you just created

⚙️ Key Layout Settings

  • Position: Left or right
  • Text alignment: Left, center, or right
  • Font size and spacing: Adjust top-level and nested menu link spacing

🎨 Style Settings

  • Menu Colors: Customize link, hover, and background colors
  • Product Titles & Prices: Show/hide, adjust size, and change colors
  • Product Labels: Enable "On Sale" tags with custom colors and size

💡 Tip: Use consistent image dimensions (e.g. 1000x1000px) to align product grids.

🖼 Product Image Styling

  • Product Frame: Add a hover outline with adjustable color and thickness
  • Image Corners: Adjust background radius for sharp or rounded edges
  • Background Color: Only works if images are uploaded as transparent .png
To enable custom background colors:
- Use transparent PNGs
- Toggle "Make Background Transparent" off

🔍 Search and Sort Controls

  • Icon Position: Left, center, or right
  • Toggle Visibility: Hide or show icons individually
  • Color Settings: Customize icon and background colors
  • Search Bar Overlay: Adjust opacity and background color

When customers click the filter or sort icons:

  • Filter icon opens a draggable search overlay
  • Sort icon lets customers sort by price, newest, A-Z, or featured
  • Upload Sidebar Skin: Add a background image or pattern
  • Sidebar Opacity: Control transparency of sidebar
  • Sticky Sidebar: Enable fixed position as users scroll
  • Sidebar Shadow: Adds a subtle edge shadow for depth

🛠 Manual Product Sorting

⚠️ Important: To control product order in a collection, set the sort type to Manual.

Steps:

  1. Go to Products > Collections in Shopify Admin
  2. Choose your collection and click Sort > Manual
  3. Drag and reorder products as needed

This order will reflect on the front-end collection page.

📌 Notes on Product Images

  • Misaligned product titles/prices are usually caused by inconsistent image sizes
  • Use uniform square images (e.g. 1000x1000) for best visual alignment

Need Help?