# 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZ6U8dYBuiT376GjMqdBh%2FOff%20Canvas%20Layout%20Image%203.jpg?alt=media&#x26;token=a86229fa-2713-4b00-84bc-de98d4168857" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FUYeJkqmRy3T6kf9s96d7%2FExpand%20Collapse%20Layout%201%20(1).jpg?alt=media&#x26;token=56ea5ca2-e307-449a-aa97-9393a3c3b67a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F89y9PPAFSpjHeIJi4JP3%2FExpand%20Collapse%20Layout%202%20(1).jpg?alt=media&#x26;token=efbbbd41-c46f-4d81-a6cf-e0a760c73320" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F5vebfzarFrs3vWBI6SGK%2FExpand%20Collapse%20Layout%203%20(1).jpg?alt=media&#x26;token=b6db50a0-7651-4bb0-aec8-8650f0982ff2" 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.