Expand/Collapse Layout

The filter group are collapsed or expanded into clickable headers. The user can expand only the filter option that they care about, it's great for deep or complex catalogs product , so that nobody feels overwhelmed.

Click here to see the layout demo

Key Features

• Filter groups shown as collapsible accordions—only headers visible until clicked.

Benefits

• Focused exploration: users feel in control, opening relevant sections only

• Increased add-to-cart: controlled refinement uncovers more matching items, boosting multi-item orders

Real Example

Steve Madden was founded in 1990 by designer Steve Madden. The company’s principal executive offices are located at 52-16 Barnett Avenue, Long Island City, New York 11104, USA.

• Revenue: Fiscal 2024 of Total revenue of $2,282.9 million, up 15.2 % from $1,981.6 million in 2023. Sources

How to use?

1. From our app, click Library.

2. In the Sections tab, search for the keyword Collection Page 3-2

3. Click Install and Customize.

1. Click Add Section

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

How to edit the Collection Page 3-2?

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. Toolbar Settings

• Toolbar style (1 / 2 / 3): Three preset layouts for the toolbar

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

• Filter style: Three preset layouts for the filter: Left drawer (slide-out panel on desktop), Right drawer and Toggle style.

• Filter size (S / M / L / XL): Adjusts the width of the filter container.

• Heading size (XS / S / M / L): Controls the font size of each filter group title

• 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

• Collapse filters: When On, all groups start collapsed when you click to filter.

• Show count: When On, displays the number of results next to each filter option

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