Smind Documentation
  • In-app
    • Getting started
    • Library
      • Product blocks
      • Sections
      • Templates
      • Themes
      • Styles
    • My library
    • Page Builder
    • Theme Builder
    • Subscription plans
    • Settings
    • Support
  • Guides
    • Color block and color scheme
    • Enabling account
    • Getting Google Maps iframe
    • Getting TikTok video URL
    • Configuring color swatches
    • Configuring sale badge
    • Configuring size chart
    • Showing social media icons
    • Deleting data
    • Moving Sections
  • Sections
    • Header
    • Product Detail
    • Product Bundles
    • Collection Page
      • Vertical Layout
      • Horizontal Layout
      • Off-Canvas Layout
      • Expand/Collapse Layout
    • Wishlist & Wishlist Page
    • Compare & Compare Page
    • Quick Add
    • Quick View
  • Cart Drawer
    • Estimate Shipping
    • Free Shipping Progress Bar
    • Complementary Product
    • Cart Notes
  • FAQs
    • Why does the section appear on all pages?
    • Why are section layouts broken?
    • Why do spaces appear when hiding the theme's header?
    • How to change default text in sections?
    • How to update sections?
    • How to set the default template for product pages?
    • Why are the sections I installed not showing up in the theme editor?
    • Integrate review scores from other apps.
  • How To Transfer Data To New Theme?
  • Dev
    • Product detail event
    • Product form event
    • Cart Drawer event
Powered by GitBook
On this page
  • Key Features
  • Benefits
  • Real Example
  • How To Use?
  • How to edit the Collection Page 1-1?
  • Filter
  • Categories
  • Gallery
  • Image Banner
  • Social Media
  1. Sections
  2. Collection Page

Vertical Layout

PreviousCollection PageNextHorizontal Layout

Last updated 4 hours ago

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.

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.

Revenue:

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:

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.

  1. Click Add Section

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

How to edit the Collection Page 1-1?

  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.

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

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

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

  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. Colors

  • 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.

Filter

Tags

  • 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

  • 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

  • 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

  • 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

  • Heading: You can change whatever label you like (“Connect,” “Follow us,” etc.).

  • Icon Style: Three preset looks for your icons.

  • Icon Size: Drag the slider or type a value to scale your icons up or down.

Growjo estimates $941.6 million in annual revenue.

ECDB (eCommerceDB) records $871.2 million in net e-commerce sales for 2024.

Full-year 2024 net revenue was $189.8 million.

In Q3 2024 alone, net revenue totaled $43.0 million.

To add a social media icon link:

Sources
Sources
Sources
Sources
Click here to add
Click here to see the layout demo