# Horizontal Layout

This layout live in a slim **top bar** above your grid. It helps your store minimal that customers can dive straight into browsing and fine-tune their view with neat dropdowns.

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

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FaKKsWv0xJPhysjosSf1g%2FHorizontal%20Layout%2011.gif?alt=media&token=809b4dee-6c5c-4594-a055-b4ce7a03f343>" %}

## Key Features

* Filters & sort controls spread across the top above the product grid.
* Dropdowns buttons for each filter group.

## Benefits

* **Higher impulse adds:** showing products immediately encourages quick selections.
* **Cleaner aesthetic:** less visual friction keeps shoppers focused on products.
* **Improved SEO:** more products above the fold can boost organic visibility.

## Real Example

**Death Wish Coffee** was founded in 2012 by Mike Brown in Saratoga Springs, New York, where it remains headquartered. The brand positions itself as the maker of the “World’s Strongest Coffee,” blending robusta and Arabica beans sourced from India, Peru, and other regions in South and Central America

**Revenue:**

* Growjo estimates annual revenue at **$44.5 million** per year. [Sources](http://growjo.com/company/Death_Wish_Coffee_Company)
* LeadIQ reports annual revenue of **$35 million** as of April 2025. [Sources](https://leadiq.com/c/death-wish-coffee-company/5a1d9d5823000054008d308e)&#x20;

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FxaHbS3JecF3pU2t7JzFT%2FHorizontal%20Layout%20Image%202%20(1).jpg?alt=media&#x26;token=0fa202d0-ecbd-4b4d-bf3a-2e6dcecd52b6" alt=""><figcaption></figcaption></figure>

## How To Use?

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Collection Page 2-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%2FGgTuXRgFpovX9Sp4m6vn%2FHorizontal%20Layout%201%20(1).jpg?alt=media&#x26;token=2278b070-f06e-498f-a85e-09eee3c42f01" alt=""><figcaption></figcaption></figure>

4. Click **Add Section**
5. Search for **Collection Page 2-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%2F6xbWwZ5PK04ajnHy5yuc%2FHorizontal%20Layout%202%20(1).jpg?alt=media&#x26;token=c432710d-b11c-4fbf-8d1a-8d8d95cb9c07" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FQNCZG8wOvpjdI7cPqPsi%2FHorizontal%20Layout%203%20(1).jpg?alt=media&#x26;token=dfae000b-315a-4ea4-bca3-018e67a502fa" alt=""><figcaption></figcaption></figure>

1. **Container**

* Container full-width: When **On:** Grid spans the entire browser window. When **Off:** Constrained to your theme’s max content width.
* Enable spacing between items: Adds consistent margins between product cards for a clean look.

2. **Filter Settings**

* Filter style (1 / 2 / 3): Three preset layouts for how filters appear
* Enable sorting: Adds a “Sort by” dropdown alongside the filters.
* Show columns switcher: Lets user choose 1–4 columns on desktop.
* 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)

3. **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).

4. **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)

5. **Color**

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

6. **Section Padding**

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