> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-interactive/pages-and-menus/collection-page/sidebar-collection.md).

# Sidebar Collection

For Plain Jane, and Plain Jane Interactive

### What You’ll Learn

* How to configure the Sidebar Collection section
* How to adjust cart, menu, product, and label settings
* How to enable sort, search, and pagination behavior

***

### How to Customize the Sidebar Collection

1. **Navigate to Theme Editor**
   * From your Shopify admin, go to **Online Store > Themes**
   * Click **Customize** on your active theme
   * Open the **Collection** template and select the **Sidebar Collection** section
2. **Sidebar Menu**
   * Click **Select** to assign a menu
   * Position the sidebar on the **Left** or **Right**
   * Optionally **upload a skin image** to customize the background
3. **Sidebar Settings**
   * Adjust **Sidebar Opacity** using the slider (e.g. 1 px)
   * Set the **Background Color** (e.g. `#202020`)
   * Toggle **Enable Fixed Menu** or **Enable Sidebar Shadow** as needed
4. **Date & Time (Optional)**
   * Customize **Date/Time Colors** for desktop and mobile
   * Toggle **Show Date/Time** to display timestamps
5. **Sidebar Links**
   * Set **Text Alignment** (Left, Center)
   * Adjust spacing for **link levels** and **font size**
   * Customize colors:
     * **Menu & Cart Link Colors**
     * **Cart Text**, **Quantity**, and **Background** colors
     * **Mobile Colors** included
6. **Product Titles & Prices**
   * Customize **font size** and **text color** for titles and prices
   * Set **Compare Price Color** (e.g. red `#FF0000`)
   * Toggle display options:
     * Show Product Titles
     * Show Product Prices
     * Show Compare Prices
7. **Labels**
   * Set font size and background/text colors for:
     * Pre-Order
     * On Sale
     * Out of Stock
   * Toggle visibility of each label type
8. **Product Background**
   * Set **corner radius** and **background color**
   * Optionally make the background transparent
9. **Search & Sort Icons**
   * Set icon **position** and **colors**
   * Toggle visibility of **search/sort icons** and **swap icons**
10. **Search Bar**
    * Adjust **background opacity** and **colors** for:
      * Search box
      * Cancel button
      * Search results
      * Input field
    * Style corners and shadows optionally
11. **Sort Menu**
    * Customize:
      * Text & background colors for default and active options
      * Sort menu handle colors
12. **Pagination & Loading**
    * Choose **Pagination Type**: `Infinite Scroll` or `Page Numbers`
    * Set colors for:
      * Pagination Text
      * Active Page and its text
      * Pagination Arrows

> 💡 Tip: Make sure to preview on both desktop and mobile views to confirm spacing, readability, and layout integrity.

### **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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.openspaces.design/plain-jane-interactive/pages-and-menus/collection-page/sidebar-collection.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.