figma guide
Designing category landing pages in Figma: hero, subcategories, and PLP handoff
Design ecommerce category landing pages in Figma with hero banners, subcategory grids, featured collections, and PLP transitions—plus responsive layouts and Dev Mode specs.
- Published
- Updated
- Jun 27, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
A category landing page (CLP) sits between homepage and product listing—it orients shoppers with a hero, subcategory tiles, and curated rows before they reach filters and sort on the PLP. Structure the page as CategoryHero → optional promo banner → SubcategoryGrid → featured product rows → SEO copy block. Each subcategory tile links to a filtered PLP or nested CLP. Reuse product cards and breadcrumbs from listing templates. Start from the Figma guides hub and templates pillar.
Who this is for
- Product designers structuring catalog navigation for DTC and marketplace stores.
- Design system teams defining CLP vs PLP templates so merchandising and dev share one language.
- Engineers implementing CMS-driven heroes, category trees, and deep links to filtered PLPs.
CLP vs PLP: when to use which
| Page type | Primary job | Key UI |
|---|---|---|
| Category landing (CLP) | Orient and branch | Hero, subcategory grid, editorial rows |
| Product listing (PLP) | Browse and compare | Filters, sort, dense product grid |
| Collection landing | Campaign story | Single theme hero + curated SKUs |
| Search results | Query match | Search UI chrome |
Verdict: use a CLP when a category has 3+ meaningful subcategories or merchandising story. Skip CLP for flat catalogs—link straight to PLP from navigation.
Page zones
| Zone | Purpose | Key components |
|---|---|---|
| Global header | Store nav | Navigation, search |
| Breadcrumb | Hierarchy | Breadcrumb |
| Category hero | Title + visual | CategoryHero |
| Subcategory grid | Branch navigation | SubcategoryTile × n |
| Featured row | Merchandising | ProductCard carousel |
| Editorial band | Brand story | Image + CTA |
| SEO / FAQ block | Long-tail content | Collapsed text, optional accordion |
| Footer PLP CTA | ”View all” | Button → full PLP with filters cleared |
CategoryHero anatomy
| Part | Spec | Notes |
|---|---|---|
| Title | H1 category name | One per page; matches breadcrumb leaf |
| Description | 1–2 lines optional | Not a wall of SEO text above fold |
| Background | Image, video, or color | 16:9 desktop; 4:5 or 1:1 crop on mobile |
| Overlay | Gradient for text contrast | Test with accessibility plugins |
| Primary CTA (optional) | “Shop all” | Scroll to grid or jump to PLP |
| Badge | Sale, new season | Reuse badge/chip tokens |
CategoryHero
├── Variant: layout=text-left | text-center | split
├── Variant: media=image | video | color
├── Property: title (string)
├── Property: showDescription=true | false
└── Layers:
├── MediaLayer
├── OverlayGradient
├── Title + Description
└── CTAButton (optional)Use layout grids aligned to PLP gutters so the hero feels continuous with the product grid below.
SubcategoryGrid patterns
| Pattern | Best for | Tile content |
|---|---|---|
| Image tiles (2×2, 3×3) | Visual categories (apparel, home) | Photo, label, optional count |
| Icon tiles | Utility categories | Icon + label |
| List rows | Long taxonomies | Chevron + label + “124 items” |
| Horizontal scroll | Mobile many subs | Snap scroll chips |
| Mega-menu echo | Consistency | Same order as nav dropdown |
SubcategoryTile
├── Variant: style=photo | icon | text
├── Property: label (string)
├── Property: productCount (number, optional)
└── States: default | hover | focus | disabled (empty category)Rule: tile tap target minimum 44×44px on mobile. Empty categories should be hidden or disabled, not dead links.
Featured product rows
| Row type | Purpose | Link target |
|---|---|---|
| Bestsellers in category | Social proof | Filtered PLP ?sort=bestselling |
| New arrivals | Freshness | PLP with new badge filter |
| Staff picks | Editorial | Curated collection ID |
| Recommendations | Personalization | Optional logged-in row |
Reuse the same product card component as PLP at consistent width. Include quick view only if PLP supports it—keep CLP rows simpler on mobile.
Responsive layout comparison
| Breakpoint | Hero | Subcategories | Product rows |
|---|---|---|---|
| Mobile (375) | Stacked text below image | 2-column grid or horizontal scroll | 2-up card carousel |
| Tablet (768) | Split or centered | 3-column grid | 3–4 visible cards |
| Desktop (1280+) | Wide banner or split | 4–6 column grid | Full-width 4–5 card row |
Document constraints on hero text so titles do not collide with nav on short viewports.
CLP → PLP transition
| Entry path | PLP should open with |
|---|---|
| Subcategory tile | Pre-filtered category + subcategory |
| ”Shop all” CTA | Parent category, default sort |
| Featured row “View all” | Same filter as row |
| Breadcrumb leaf on PLP | N/A—user already on PLP |
Handoff: pass category ID and optional facet params in URL. PLP header should show filtered title (“Men’s Running Shoes”) not generic “Products.”
Content and SEO block
Place long SEO copy below merchandising zones—not in the hero. Use a collapsed “About this category” accordion if legal or SEO requires 200+ words. Link internally to related CLPs and PDP templates where relevant.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| CMS fields | hero image, title, description, tile list |
| Category tree depth | CLP at L1/L2; max nesting rules |
| Tile link | /category/{slug} or PLP query |
| Empty subcategory | Hide tile vs show disabled |
| Hero LCP image | Priority load; export WebP srcset |
| Analytics | clp_view, subcategory_click, featured_row_click, shop_all_click |
| a11y | H1 once; tiles are links or buttons with visible labels |
| Breadcrumb sync | Matches category hierarchy API |
Use Dev Mode checklist and share component props with PLP team.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| CLP duplicates full PLP with filters | Redundant maintenance | CLP = orient; PLP = browse |
| 12 subcategory tiles with no images | Weak scan | Use icon or text list pattern |
| Hero H1 differs from nav label | SEO + UX confusion | Single source of title string |
| No “View all products” escape hatch | Trapped users | Footer CTA to PLP |
| Inconsistent card sizes vs PLP | Jarring transition | Shared ProductCard component |
| Wall of SEO text above fold | Hurts conversion | Move copy below rows |
| Broken deep links after CMS rename | 404s | Document slug migration |
Recommended workflow
- Map category tree with merchandising—decide CLP vs direct PLP per branch.
- Build
CategoryHeroandSubcategoryTilewith photo and icon variants. - Compose desktop CLP frame with grid, featured row, and SEO block.
- Adapt mobile frame with horizontal subcategory scroll if needed.
- Link tiles to PLP frames with query annotations in Dev Mode.
- Align breadcrumbs across CLP and PLP.
- Add analytics event names to each interactive zone.
- Review with search and nav teams for consistent labels.
FAQ
One CLP template or per vertical?
Start with one flexible template (hero + grid + row). Add vertical variants only when photo aspect ratios or tile counts genuinely differ.
Show filters on CLP?
Avoid full filter sidebars on CLP—reserve filters for PLP. Optional quick chips (“Under $50”, “On sale”) may deep-link to pre-filtered PLP.
Marketplace with seller categories?
Seller storefronts may use a simplified CLP (banner + PLP). Document seller vs catalog CLP differences in a separate variant frame.
Seasonal campaigns?
Use collection landing frames for short campaigns; keep evergreen CLP stable and link campaign bands as optional CMS modules.
Next steps
- Design product listing and grid UI in Figma — PLP filters, sort, and grid
- Design navigation and tabs in Figma — category entry points
- Design breadcrumbs in Figma — hierarchy across CLP and PLP
- Design cards in Figma — shared product card
- Design search UI in Figma — alternate catalog entry
§ Keep reading