# Vertical Layout

This layout is **a fixed sidebar** that displays every filter category and option simultaneously on the left side , your customer can mix & match filters on the fly—no hidden menus or extra clicks—so they quickly zero in on exactly what they want.

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

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FmsC3bMJJjMqqlrxXOcDk%2FVertical%20Layout%2011.gif?alt=media&token=7fea9c41-f405-4b5e-9222-d92f4a386e9d>" %}

## Key Features

* Persistent left-sidebar showing all filter groups at once (e.g. Price, Color, Vendor, Tags).

## Benefits

* **Faster product find:** it will reduces time to first “Add to Cart”
* **Higher cross-sell:** the customer can spot the complementary items that they hadn’t considered.
* **Boosted AOV:** this layout simplify the complex catalogs to a vertical filtering that increases the likelihood of multi-item baskets.

## Real Example

**Fashion Nova** was founded in 2006 by Richard Saghian in Los Angeles, California. It operates primarily as an online fast-fashion retailer but also maintains five brick-and-mortar stores in the U.S.&#x20;

**Revenue:**

* Growjo estimates **$941.6 million** in annual revenue. [Sources](https://growjo.com/company/Fashion_Nova)
* ECDB (eCommerceDB) records **$871.2 million** in net e-commerce sales for 2024. [Sources](https://ecommercedb.com/store/fashionnova.com)

**Allbirds** was co-founded in March 2016 by Tim Brown and Joey Zwillinger, and is headquartered in San Francisco, California. It is structured as a public benefit corporation, emphasizing sustainable materials and practices

**Revenue:**

* Full-year 2024 net revenue was **$189.8 million.** [Sources](https://www.globenewswire.com/news-release/2025/3/11/3041000/0/en/Allbirds-Reports-Fourth-Quarter-and-Full-Year-2024-Financial-Results.html)&#x20;
* In Q3 2024 alone, net revenue totaled **$43.0 million**. [Sources](https://ir.allbirds.com/news-releases/news-release-details/allbirds-reports-third-quarter-2024-financial-results)

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

## How To Use?

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

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

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

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

## How to edit the Collection Page 1-1?

<figure><img src="/files/iw68FRCoHe6Tb6yBVWpZ" 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. **Sidebar Settings**

* Sidebar size (S / M / L): Adjusts the width of the sidebar panel.
* Heading size (XS / S / M / L): Sets the font size for sidebar section titles
* 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
* Show count: When **On**, displays the number of results next to each filter option

3. **Toolbar Settings**

* 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

4. **Layout Settings**

* Products per page: Display to set how many products load before paginating.
* Number of columns (desktop: 1 2 3 4): Choose the default grid width on large screens.
* Number of columns (mobile: 1 2): Choose grid width on phones.
* 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. **Colors**

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

7. **Section Padding**

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

### Filter

<figure><img src="/files/6HquYgFtKyobNAB2P3K9" alt=""><figcaption></figcaption></figure>

**Tags**&#x20;

* Tag heading: Enter the label that appears above your list of tags. Default: “Tags”
* Tag style: Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link)

### Categories

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

* Heading: Enter the title displayed above your list of category links. You can edit it to anything meaningful (e.g. “Shop by Style,” “Departments,” “Explore”).
* Menu: Choose which navigation menu supplies the links here.

### Gallery

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

* Heading: Enter the title shown above your thumbnails.
* Use media style from theme settings: When On, each thumbnail inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, thumbnails don't display any styling.
* Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab.
* Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page.

### Image Banner

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

* Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page.
* Use media style from theme settings: When On, your banner inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, it don't display any styling.
* Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab.

### Social Media

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

* Heading: You can change whatever label you like (“Connect,” “Follow us,” etc.).
* To add a social media icon link: [Click here to add](/guides/showing-social-media-icons.md)
* Icon Style: Three preset looks for your icons.&#x20;
* Icon Size: Drag the slider or type a value to scale your icons up or down.


---

# 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/vertical-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.