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 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 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 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?

• 💬 For Tech Shpport Join Us On Discord: https://discord.gg/hcc2GvgZc6

• 📧 Email us at: [email protected]

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