# Collection Page

> **What You’ll Learn**
>
> * The difference between Classic and Sidebar Collection layouts
> * How to connect a custom menu to your collection pages
> * Tips for displaying products and customizing design settings

***

### 🧱 Collection Layout Options

Plain Jane includes **two layout types** for collection pages:

| Layout Type            | Description                                                                 |
| ---------------------- | --------------------------------------------------------------------------- |
| **Classic Collection** | Minimal design with a fixed category menu and sort/search icons             |
| **Sidebar Collection** | Includes a customizable sidebar with advanced layout and background options |

You can toggle between these layouts by enabling/disabling the `Classic Collection` or `Sidebar Collection` section in the **Theme Editor**.

> 💡 Tip: Use only one collection section at a time (hide the other).

***

### 🔗 Connect a Custom Collection Menu

To create a custom navigation menu for your collection page:

1. Go to **Online Store > Navigation** in the Shopify Admin
2. Click **Add menu** and name it (e.g. `Shop Menu`)
3. Add links for your categories (e.g. Tops, Bottoms, Accessories)
4. (Optional) Nest items for second/third-level dropdowns
5. Click **Save**

Then:

1. Open the **Theme Editor**
2. Select **Collections > \[Your Collection]** from the top dropdown
3. Click on `Classic Collection` or `Sidebar Collection`
4. Under **Select Collection Menu**, choose the menu you just created

***

### ⚙️ Key Layout Settings

#### 🧭 Menu Settings

* **Position**: Left or right
* **Text alignment**: Left, center, or right
* **Font size and spacing**: Adjust top-level and nested menu link spacing

#### 🎨 Style Settings

* **Menu Colors**: Customize link, hover, and background colors
* **Product Titles & Prices**: Show/hide, adjust size, and change colors
* **Product Labels**: Enable "On Sale" tags with custom colors and size

> 💡 Tip: Use consistent image dimensions (e.g. 1000x1000px) to align product grids.

***

### 🖼 Product Image Styling

* **Product Frame**: Add a hover outline with adjustable color and thickness
* **Image Corners**: Adjust background radius for sharp or rounded edges
* **Background Color**: Only works if images are uploaded as transparent `.png`

```
To enable custom background colors:
- Use transparent PNGs
- Toggle "Make Background Transparent" off
```

***

### 🔍 Search and Sort Controls

* **Icon Position**: Left, center, or right
* **Toggle Visibility**: Hide or show icons individually
* **Color Settings**: Customize icon and background colors
* **Search Bar Overlay**: Adjust opacity and background color

When customers click the filter or sort icons:

* Filter icon opens a draggable search overlay
* Sort icon lets customers sort by price, newest, A-Z, or featured

***

### 🧰 Sidebar Collection Extras (Sidebar Layout Only)

* **Upload Sidebar Skin**: Add a background image or pattern
* **Sidebar Opacity**: Control transparency of sidebar
* **Sticky Sidebar**: Enable fixed position as users scroll
* **Sidebar Shadow**: Adds a subtle edge shadow for depth

***

### 🛠 Manual Product Sorting

> ⚠️ Important: To control product order in a collection, set the sort type to **Manual**.

Steps:

1. Go to **Products > Collections** in Shopify Admin
2. Choose your collection and click **Sort > Manual**
3. Drag and reorder products as needed

This order will reflect on the front-end collection page.

***

### 📌 Notes on Product Images

* Misaligned product titles/prices are usually caused by inconsistent image sizes
* Use uniform square images (e.g. 1000x1000) for best visual alignment

***

### **Need Help?**

* 💬 **Join our community 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/pages-and-menus/collection-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.