# Sidebar Collection

### 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: 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/sidebar-collection.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.