# Expand/Collapse Layout

The filter group are **collapsed or expanded into clickable headers**. The user can expand only the filter option that they care about, it's great for deep or complex catalogs product , so that nobody feels overwhelmed.

[Click here to see the layout demo](https://library.smind.io/collections/collection-page?view=collection-page-3-2)

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FepskKLXFW27XWMHwlwX7%2FExpand%20Collapse%20Layout%2011.gif?alt=media&token=8790ca72-470b-4866-90b0-bb561e28bca7>" %}

## Key Features

* Filter groups shown as collapsible accordions—only headers visible until clicked.

## Benefits

* **Focused exploration:** users feel in control, opening relevant sections only
* **Increased add-to-cart:** controlled refinement uncovers more matching items, boosting multi-item orders

## Real Example

**Steve Madden** was founded in 1990 by designer Steve Madden. The company’s principal executive offices are located at 52-16 Barnett Avenue, Long Island City, New York 11104, USA.

* Revenue: Fiscal 2024 of Total revenue of **$2,282.9 million**, up 15.2 % from $1,981.6 million in 2023. [Sources](https://www.tradingview.com/news/tradingview%3A958b0ba05397d%3A0-steven-madden-ltd-sec-10-k-report/)

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

## How to use?

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Collection Page 3-2**
3. Click **Install** and **Customize.**

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

4. Click **Add Section**
5. Search for **Collection Page 3-2** and click on it

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

## How to edit the Collection Page 3-2?

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

1. **Container**

* Full-width: When **On**, your collection grid stretches edge-to-edge of the browser window. When **Off**, it’s constrained to your theme’s maximum content width.
* Enable spacing between items: Adds consistent margins between product cards for a clean look.

2. **Toolbar Settings**

* Toolbar style (1 / 2 / 3): Three preset layouts for the toolbar
* Show total results: Displays all the results
* Show columns switcher: Lets user choose 1–4 columns on desktop.
* Enable sorting: Adds a “Sort by” dropdown

3. **Filter Settings**

* Filter style: Three preset layouts for the filter: **Left drawer** (slide-out panel on desktop), **Right drawer** and **Toggle** style.
* Filter size (S / M / L / XL): Adjusts the width of the filter container.
* Heading size (XS / S / M / L): Controls the font size of each filter group title
* Limit filter widget height: When On, the filters area scrolls internally if it grows too tall, preventing the sidebar from pushing the product grid down
* Collapse filters: When **On,** all groups start collapsed when you click to filter.
* Show count: When On, displays the number of results next to each filter option
* Tag filter label: Enter the name of filter label you set in Search & Discovery app.
* Tag style (Default / 1 / 2): Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link)

4. **Layout Settings**

* Products per page: Drag the slider or type a value to set how many items load before paginating.
* Number of columns on desktop (1 / 2 / 3 / 4): Choose your default grid width on large screens.
* Number of columns on mobile (1 / 2): Choose grid width on mobile views.
* Pagination: Default, Infinite scroll, or “Load more” button.
* Default pagination style: Select shapes for page-number buttons (e.g. square, circle, text).

5. **Product Card**

* Media ratio (Adapt, Square, Portrait, Landscape): Controls how images are cropped/fitted.
* Media shape (Default, Round, Blob): Applies a mask to your images for a distinctive look.
* Content alignment (Left, Center, Right): Aligns title, price, and buttons within each card.
* Show “Add to cart” button
* Show price (toggle)
* Show second image on hover (toggle)
* Show vendor (toggle)
* Show color swatch (toggle)

6. **Color**

* Section color scheme: Applies a preset background/text color palette to the whole section.
* Product card color scheme:

7. **Section Padding**

* Top padding & Bottom padding (px): add white-space above and below the collection grid.


---

# 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.smind.io/sections/collection-page/expand-collapse-layout.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.