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

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
• LeadIQ reports annual revenue of $35 million as of April 2025. Sources

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.

1. Click Add Section

2. Search for Collection Page 2-1 and click on it

How to edit the Collection Page 2-1?

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.

1. 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)

1. 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).

1. 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)

1. Color

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

• Product card color scheme:

1. Section Padding

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