# 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

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

***

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/getting-started/3.-creating-and-customizing-your-collections-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.