3. Creating and Customizing Your Collections Page

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

For Plain Jane and Interactive

Watch the video

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

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:

  • 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.

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.

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?