Developing Product Catalog Page Design for a Website
The catalog page is a decision-making point. Users arrive with the intention to find the right product from hundreds or thousands of items. Catalog design isn't about aesthetics: it's about finding speed, filtering efficiency, and information density on screen. Mistakes here directly convert to abandonment and lost orders.
Catalog Page Structure
Typical layout includes several independent zones, each solving its own task:
Category Navigation Zone
Breadcrumbs (Home → Electronics → Laptops) + sidebar or horizontal subcategory hierarchy. For deep catalogs (3+ levels) — flyout menu or mega-menu on desktop.
Filter Zone Sidebar filter on desktop, offcanvas drawer on mobile. Filters grouped by semantics: characteristics → price range → availability → rating. Each group — collapsible accordion with active filters indicator.
Listing Management Zone Result count, sorting (by popularity, price, newest), view toggle (grid/list), items per page.
Product Card Grid Main working area. Grid parameters:
| Device | Cards Per Row | Recommended Gap |
|---|---|---|
| Desktop (1280px+) | 3–4 | 24px |
| Tablet (768–1280px) | 2–3 | 16px |
| Mobile (320–768px) | 1–2 | 12px |
Pagination
"Load more" (append) vs classic pagination vs infinite scroll. Infinite scroll hurts SEO and prevents returning to position — use only with virtualization. Append-pagination with position preservation via history.pushState — optimal compromise for most catalogs.
Product Card in Listing
The catalog card contains less info than the product page, but should give enough for comparison:
- Photo (usually square 1:1, hover changes to second photo if exists)
- Title (max 2 lines,
overflow: hidden; -webkit-line-clamp: 2) - Price (current + crossed out when discounted + discount percentage badge)
- Rating (stars + review count)
- Availability (in stock / pre-order / out of stock)
- CTA button (add to cart / in cart / select variant)
Additional elements by context: badges (new, bestseller, sale), wishlist icon, quick view.
Filter Design: UX Details
Checkboxes vs tags. Checkboxes suit 3–8 option filters. For colors — visual swatches. For 10+ options — search field within filter.
Price range. Double slider (range slider) with input fields. Histogram of product distribution by price above slider gives user context — pattern from Amazon, ASOS.
Filter application. Two approaches:
- Instant (applies on click) — for small catalogs with fast server response
- Deferred (Apply button) — for catalogs with slow API, mobile devices
Active filters. Tag pills above results with X to remove each and "Clear all" button.
Empty States and Edge Cases
Zero filter results — not a "404 page", but special screen with:
- Illustration (not stock photo)
- Explanation of what happened
- "Clear filters" button
- Suggestion of similar categories or popular products
Catalog with one product — redirect to that product's page, don't show listing with single card.
Skeleton Loading
On AJAX catalog update (apply filters, change page) show skeleton placeholders, not spinner:
.skeleton-card {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
SEO Requirements for Design
- Each filter page with unique params should have canonical → main category page (if filters don't create separate SEO pages)
- H1 should change on category selection: "Laptops", not "Catalog"
- Result count text for search engines: "142 laptops in stock"
- Structured data:
ItemListwith first 10 products
Performance
Images — main catalog bottleneck. Recommendations:
- WebP + AVIF with JPEG fallback via
<picture> - Lazy load for cards below fold
- Eager load for first 4–8 cards (visible without scroll)
- Image sizes: 400×400 for listing (don't load 1200×1200)
-
aspect-ratio: 1/1on image container — prevents CLS
Design Tools
Catalog design is developed in Figma with:
- Card components with all states (hover, in cart, out of stock, discounted)
- Auto Layout for grid with proper gap and padding
- Component variants for different breakpoints
- Prototype showing filter behavior
Timeline
Catalog design for 1 product type, 1 breakpoint (desktop) without filters — 2–3 days. Full design: desktop + mobile, complex filters, all card states, pagination, empty states — 5–8 days. Design + component system + handoff to development — 1.5–2 weeks.