# 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