# 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2ePsHbYmCZAhLyNrIiVF%2FVertical%20Layout%20Image%202%20(1).jpg?alt=media&#x26;token=2e89c6f3-1b18-4ea3-abfc-e38be874cdfe" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F9Vj2rI6UISpVWlvij5Cl%2FVertical%20Layout%201%20(1).jpg?alt=media&#x26;token=a259ae71-ad50-44a3-859e-16ed30cf7b6e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZm8Wfh30XrOsYjPsfTKQ%2FVertical%20Layout%202%20(1).jpg?alt=media&#x26;token=bf002ce6-f212-4c01-8076-92bde1631dd4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FXILkIHPtR9OPpFUuAMgS%2FVertical%20Layout%203%20(1).jpg?alt=media&#x26;token=ee139d9c-6f49-4e4e-bf46-366ccd706b36" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FSnqZWSLNF4S1sRYn5utq%2FVertical%20Layout%204%20(1).jpg?alt=media&#x26;token=9152c8b4-09b6-498a-927f-6147d14768d3" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKJN0d6Zmk2JTmMz52iqT%2FVertical%20Layout%205%20(1).jpg?alt=media&#x26;token=da928361-54d8-4d46-9b12-96820a341d9a" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FDAKuikxFB8n6BOXBYDnl%2FVertical%20Layout%206%20(1).jpg?alt=media&#x26;token=2aee0bfd-fd53-4bb1-8bb6-4d3f5b4d384c" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FhOgGOSLkAJUGwEA1LGCL%2FVertical%20Layout%207%20(1).jpg?alt=media&#x26;token=1e2a1541-40a0-4e31-982b-1815f654cf70" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZkTXrSScogsmaKsQmwIJ%2FVertical%20Layout%208%20(1).jpg?alt=media&#x26;token=7da3e63b-c7e4-4569-8c1b-f0ac1c4c85e8" 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](https://docs.smind.io/guides/showing-social-media-icons)
* 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.