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?
From our app, click Library.
In the Sections tab, search for the keyword Collection Page 2-1
Click Install and Customize.
Click Add Section
Search for Collection Page 2-1 and click on it
How to edit the Collection Page 2-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.
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)
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).
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)
Color
Section color scheme: Applies a preset background/text color palette to the whole section.
Product card color scheme:
Section Padding
Top padding & Bottom padding (px): add white-space above and below the collection grid.
Last updated