# 3. Creating and Customizing Your Collections Page

{% embed url="<https://www.youtube.com/watch?v=_KZdEQFOLfM>" %}

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

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-2376848db1fc78c9a31440084caa301452ee7d17%2F01-collections-template.png?alt=media" alt="Collections page template in theme customizer"><figcaption><p>Collections page template in the theme customizer</p></figcaption></figure>

#### 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:**

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-e0d17f524ce8149b4952441274aa7ec6df6ff5db%2F02-collection-products-settings.png?alt=media" alt="Collection products display settings"><figcaption><p>Collection products display settings and customization options</p></figcaption></figure>

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

<figure><img src="https://3160093597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTKGORQPMrQxrulX5pHNw%2Fuploads%2Fgit-blob-5ffd6e4a70e65211bab9f7a6e22ca44634f787e6%2F03-collection-layout-options.png?alt=media" alt="Collection layout options Classic vs Sidebar"><figcaption><p>Collection layout options showing Classic and Sidebar variations</p></figcaption></figure>

#### 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:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website