3. Creating and Customizing Your Collections Page

For Plain Jane and Interactive

What You'll Learn

  • How to create and organize collections in Shopify

  • How to create and assign menus to collection pages

  • How to use and customize the "Classic Collection" and "Sidebar Collection" in the Plain Jane v3 and Interactive v2 themes

  • How to edit design settings like spacing, fonts, colors, and product display options

🛠️ Getting Started: Shopify Setup Basics

This section is for beginners setting up their store for the first time.

1. Create Product Collections

  1. Go to your Shopify Admin > Products > Collections.

  2. Click Create Collection.

  3. Name your collection (e.g., Tops, Bottoms, Accessories).

  4. Set the collection type to Manual.

    ⚠️ Manual collections let you control the product order manually.

  5. Click Save, then use the Browse button to add products.

Repeat for each category.

2. Create a Menu for Your Collection Sidebar

  1. Go to Online Store > Navigation.

  2. Click Add Menu.

  3. Name it something like Shop Menu.

  4. Add links like:

    • Tops → Link to your Tops collection

    • Bottoms → Link to your Bottoms collection

    • Outerwear, Footwear, etc.

  5. You can drag items to nest them (e.g., Shorts under Bottoms).

  6. Click Save Menu.

🎨 Theme Customization: Collection Pages

These instructions apply to both Plain Jane v3 and Interactive v2 themes.

  1. Navigate to Online Store > Themes > Customize

  2. Use the page selector dropdown to switch to Collections template

Collections page template in theme customizer
Collections page template in the theme customizer

Classic Collection Section

  1. Go to Online Store > Themes > Customize.

  2. From the left panel, select the Collection Page template.

  3. Look for a section labeled Classic Collection.

Key Settings:

Collection products display settings
Collection products display settings and customization options

  • Select Menu: Assign the custom Shop Menu you created.

  • Menu Position: Choose Left or Right.

  • Text Alignment: Options for Left, Center, or Right.

  • Font Size & Spacing: Adjust menu and link spacing.

  • Menu Colors: Customize background and text colors.

  • Show Product Titles/Prices: Toggle visibility and adjust font size and color.

  • Product Frames: Add borders and hover effects.

  • Product Background Radius: Adjust corners from sharp to rounded.

  • Make Background Transparent: Works best with transparent PNGs.

Collection layout options Classic vs Sidebar
Collection layout options showing Classic and Sidebar variations

Search and Sort Options

  • Position: Align icons Left, Center, or Right.

  • Colors: Customize icon and dropdown menu colors.

  • Search Overlay Settings:

    • Adjust background opacity

    • Set search box background color

  • Sort Menu: Choose how products are sorted: Featured, Newest, Price, etc.

Sale Labels

  • Show discount labels like "On Sale"

  • Customize label font size, text color, and background color

Uploading Products with PNGs

💡 Tip: Use transparent PNGs if you want to control background colors using the theme editor.

🧭 Sidebar Collection (Optional)

Want a more traditional layout? Use the Sidebar Collection instead.

  1. In the same Collection Page template, hide the Classic Collection section.

  2. Enable Sidebar Collection instead.

Sidebar Collection Settings:

  • Assign a Menu

  • Sidebar position: Left or Right

  • Upload Sidebar Background (called a "skin")

  • Adjust opacity, shadows, and fixed scroll behavior

💡 Tip: Fixed sidebars stay visible when scrolling.

All other display settings like product info, labels, and search/sort icons work the same as in the Classic Collection section.

✅ Final Notes

  • Always click Save in the theme editor after making changes.

  • If changes don’t appear right away, try refreshing the page.

  • Keep product image sizes consistent (e.g., 1000x1000px) for aligned layouts.

Need Help?

Previous2. Setting Up Your HomepageNext4. Creating and Customizing Your Product Page

Last updated