# Classic Collection

### What You’ll Learn

* How to enable and configure the Classic Collection section on your Collection page
* How to use built-in product sorting
* How to adjust styling and labels

<figure><img src="/files/lLtcPY6jJXRI7mHtMXDd" alt=""><figcaption></figcaption></figure>

***

### 1. Add the Classic Collection Section

1. In the Shopify admin, navigate to **Online Store > Themes**.
2. Click **Customize** on the active theme.
3. From the **Collection** page template, add the **Classic Collection** section.

> 💡 Tip: This section supports sorting, product labels (preorder, on sale, out of stock), and detailed display settings.

***

### 2. Add and Configure Sorting Options

You can add multiple sort types like "Featured", "Lowest Priced", and "Newest First".

#### Steps:

1. Inside the **Classic Collection** section settings, add new **Sort Option** blocks.
2. For each one:
   * Set the **Option Title** (what your users will see)
   * Choose the **Sort By** method (e.g. Featured, Price, Date)

***

### 3. Style the Collection Layout

The Classic Collection section provides many options for layout and typography:

#### Cart & Header Settings:

* Toggle date/time
* Set cart icon colors

#### Collection Menu:

* Menu position and alignment
* Link spacing and font size
* Menu colors (hover, submenu, etc.)

!\[Placeholder for Screenshot - Collection menu styling]

#### Product Titles & Prices:

* Font size and colors
* Compare price styling
* Currency format toggle

***

### 4. Label Controls

Show or hide product labels and change their appearance:

* **Pre-Order**
* **On Sale**
* **Out Of Stock**

You can adjust label background, text colors, and font sizes.

***

### 5. Background & Icons

Control the visual appearance of the section:

* Product background colors and border radius
* Search and sort icon colors and placement

***

### 6. Pagination Settings

Choose between **infinite scroll** or **pagination** and style the navigation elements:

* Set active page colors
* Customize arrow icons and fonts

### **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/classic-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.