# Category and Collection Page > How to Design Category and Collection Pages that Grabs Customer Attention? - Type: Store page blueprint - Level: Intermediate - Reading time: About 17 minutes - Audience: Written for store owners, builders, and designers refining high-performance ecommerce stores. - Last updated: 2026-10-15 - Canonical page: https://academy.getzenbasket.com/store-pages/category-and-collection-page/ - Part of: [Store pages](https://academy.getzenbasket.com/store-pages/) on ZenBasket Academy --- ## What these pages are for "Category page" actually covers three different shapes. Knowing which one you're designing settles most arguments before they start. | **Shape** | **Example** | **What it mainly contains** | |-----------------------------------|---------------------------|---------------------------------------------------------------------------------------------------------| | Top-level / intermediary category | /women | Subcategory links, and little else. Its whole job is to route people one level down. | | Leaf category | /women/bags | Products, filters and sorting, with a light merchandising wrapper. Most shopping actually happens here. | | Collection | /collections/monsoon-edit | A curated set of products chosen around a theme, occasion, price point or audience. | A leaf category page contains a full product listing, the grid, the filters, the sorting, the product cards. That machinery is its own topic. This guide covers everything around the listing: how you structure categories, present subcategories, place the header and copy, handle collections, and design for mobile and search. **Design these pages against three jobs:** **Job 1: Confirm the shopper is in the right place.** Within a second or two, someone should be able to tell what this page contains and roughly how much of it there is. That's the heading, the breadcrumb and the result count doing their job, not a hero image. A page headed "Bags" showing four products tells a very different story than one showing 248. ![1](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/1_1791192221209.png) **Job 2: Route them one level deeper.** This is the main job of intermediary pages, and a real one for leaf pages too. It's also the most commonly neglected part of the page: most stores push subcategory links below a [promotional banner](https://help.getzenbasket.com/zenbasket-builder/attention-banners/), and shoppers hesitate noticeably more when those links are text only, with no representative image. ![2](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/2_1791192254044.png) **Job 3: Give context that helps them choose.** Not keyword copy. Real guidance: how to pick between the subcategories, what the differences actually are. A line explaining the difference between a tote and a satchel does more for a hesitant shopper than three hundred words containing "buy bags online" five times. ![3](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/3_1791192265845.png) --- ## Six decisions to make before you start designing **Decision 1: How deep should the hierarchy go?** Two or three levels suits almost every store. Home, Women, Bags is comfortable. Home, Women, Accessories, Bags, Handbags, Leather Handbags is a maze, every extra level is another click and another page that has to justify existing. When you feel the need for a fourth level, the answer is usually a filter, not a subcategory. Leather is a property of a bag, not a kind of bag. **Decision 2: How many subcategories per page?** Around ten is where shoppers start to feel overwhelmed, and more than that on mobile means scrolling through a long list before anything gets chosen. If a category genuinely needs twenty, group them under labelled headings so the eye has structure to work with. **Decision 3: Can a product sit in more than one category?** Technically yes, and it causes trouble. One product living at both /women/bags and /travel/bags means two URLs with overlapping content, and a breadcrumb that can't tell the shopper where they are. The clean rule: one primary category per product, owning its breadcrumb and its canonical path. Everything else is a collection or a filter. **Decision 4: Are your collections permanent or seasonal?** Both are fine, but they need different handling. Evergreen collections, "Gifts for Him," "Best Sellers," can be treated almost like categories: stable URL, worth indexing, worth investing in. Seasonal ones need an end-of-life plan decided now. Reuse one evergreen URL rather than a new dated one every year; /collections/monsoon-edit, refreshed annually, keeps the search value a new URL each year would throw away. **Decision 5: Who maintains the merchandising, and how often?** Category and collection pages are the most perishable pages in a store. A banner promoting a finished sale, or a collection whose products are all out of stock, does more damage than an empty space would. **Decision 6: Which categories and collections deserve to be found in search?** Not all of them. A category with three products, or a collection built for one email campaign, is a thin page competing with your real ones. Decide up front which pages get full treatment, unique copy, a proper heading, indexing, and which are simply internal routes. --- ## The anatomy of a category page, zone by zone ![4](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/4_1791192282949.png) | **\#** | **Zone** | **What it does** | |--------|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 0 | Breadcrumb | Shows the real path, not a generic "Home \> Products." | | 1 | Heading and scope | One heading naming the category in shoppers' words, with a single scope line underneath. Result count on leaf pages, a short sentence on intermediary pages, "Bags, shoes, clothing and accessories." Not a slogan, "Women" beats "Style That Moves With You." | | 2 | Hero and promotional banner | Optional, and smaller than expected. Earns its place only with something specific and current: a real sale, a new arrival, a genuine seasonal story, not a mood shot. | | 3 | Subcategory navigation | The load-bearing zone. Main content on intermediary pages, directly under the heading. Compresses to a horizontal strip above the grid on leaf pages, so a shopper on "Bags" can jump to "Backpacks" without going back up. | | 4 | Toolbar and product grid | The listing itself: filters, sorting, product cards, paging, a big enough topic for its [own guide](https://help.getzenbasket.com/zenbasket-builder/product-list-page/). Products should start close to the top of the page; the filter set should suit this specific category rather than one global set. | | 5 | Featured collections | A small set of cards cross-promoting curated collections, mainly useful on intermediary pages. Its own labelled strip, separate from subcategory tiles, kept as current as the promotional banner. Rarely needed on leaf categories. | | 6 | Editorial and guidance | A short block linking to a buying guide, a size guide, or a "how to choose" article. Placed after the first row or two of products, or below the grid. | | 7 | Related categories and collections | Links to sibling categories, relevant collections and the parent. Kept genuine, a block of unrelated categories helps nobody. | | 8 | Longer category copy | Several hundred words for search purposes, placed below the products. Search engines read the whole page; only shoppers get blocked by copy at the top. | --- ## Design decisions with real trade-offs **Should an intermediary page show products as well as subcategories?** Subcategories first and prominent; a small selection of products underneath is a useful addition, not a replacement. **Where should category copy go?** A single short line under the heading, anything longer below the grid. Three hundred words between the heading and the first product exists purely for search engines, and it costs real shoppers a screen of scrolling. **Should collections be indexable?** Evergreen collections people genuinely search for, "gifts for him," "plus size dresses," "budget laptops," deserve indexing, unique copy and a stable URL. **What happens when a collection ends?** In order of preference: keep the URL and refresh the contents, best for anything recurring, since the page keeps whatever search value it's earned. Redirect to the closest category, right for a genuinely finished campaign that had links pointing at it. Let it 404 only for pages that were never indexed and never linked. What to avoid is leaving an expired collection live and empty. **Subcategory tiles: images or text links?** Images with text labels in most cases, people decide faster with a picture than a text-only list. The exception is specification-driven catalogues where the categories look identical in photographs. **Should the filter set be global or per category?** Per category, wherever your platform allows it. A global set forces every category to share the lowest common denominator, so shoe shoppers get no width filter and grocery shoppers get no dietary filter. --- ## Designing for mobile first Mobile shoppers frequently misjudge how much of a catalogue they're looking at, sometimes concluding a store's range is narrow when they're actually inside a subcategory. Guard against it with a visible breadcrumb, a clear heading, a result count, and an obvious way back up a level. **Layout guidance:** - Subcategory tiles in a two-column grid, not a single tall column. Two columns show twice as much of the range per screen. - Keep the hero short. A banner taller than about a third of the screen buries everything useful. - On leaf pages, make the subcategory strip horizontally scrollable, with the first few items visible so it's clearly scrollable. - Tap targets of at least 44 by 44 pixels, with the whole tile clickable, not just the label. - Reserve image space before loading so tiles don't jump as a shopper reaches for one. ![5](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/5_1791192314822.png) --- ## Category pages and search Category pages are usually the most valuable pages a store owns in search, because they match how people actually search, "leather laptop bags," not a specific product name. A few things about that affect design directly, not just technical setup: - Use real links, not JavaScript-only click handlers. - Don't reuse the same category description everywhere. - Merge thin categories into their parent. - Never let an empty category go blank or 404. - Keep URLs readable and stable. --- ## Frequently asked questions **What is a category page in ecommerce?** A category page organises part of your catalogue by what the products are, "Women's Bags," "Laptops," "Rice and Grains." It's a permanent part of your site structure, appears in your navigation, and usually holds a heading, subcategory links and a grid of products. For most stores, these are the pages that earn the most search traffic, because they match the way people search. **What is the difference between a category and a collection?** A category groups products by what they are, and is permanent. A collection groups products by an idea, an occasion, a theme, a price point, an audience, and is often temporary. A product belongs to one category but can belong to many collections. The test: would this grouping still make sense in three years, and would a new product obviously belong in it? **What is the difference between a category page and a product listing page?** A category page is the merchandised wrapper, the heading, breadcrumb, subcategory links, editorial content and structure. A [product listing page](https://help.getzenbasket.com/zenbasket-builder/product-list-page/) is the mechanism inside it, the grid, filters, sorting and paging. On most stores they're the same URL, since a category page contains a product listing. **How deep should an ecommerce category structure be?** Two or three levels suits almost every store. Home, Women, Bags is comfortable; five or six levels becomes a maze. When you feel you need another level, the answer is usually a filter rather than a subcategory. **Should subcategory links come before or after the products?** Before. Routing shoppers one level deeper is the page's main job, and most sites bury it beneath a banner. On intermediary pages the tiles should be the main content directly under the heading; on leaf pages they compress into a strip above the grid. **Do subcategory links need images?** Usually yes. Shoppers hesitate more with text-only lists than with a representative image. The exception is technical catalogues where categories look identical in photographs. --- ## Building this in ZenBasket Everything above is platform-independent. If you're building with ZenBasket, categories and collections are handled as separate concepts in the admin, which makes the distinction this guide argues for easy to hold in practice. **[Categories](https://help.getzenbasket.com/products/categories/), with the images you set once reused everywhere.** Each category has its own name, description, parent category and image, set up under Products, Categories. That image is what shows up on subcategory tiles across the store, one place to keep it current rather than a separate upload per page. ![6](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/6_1791192331350.png) **A dedicated toolbar and grid for the listing zone.** The Product List page in ZenBasket Builder covers zone 4 directly: breadcrumb styling, a filter panel built per page rather than shared globally, a configurable sort and view toolbar, and Data Mapping to pull products for one specific category. That's what lets a leaf category own its listing without hand-building a page per category. ![7](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/7_1791192348364.png) **Featured collections, built the same way.** Build the strip from zone 5 as a normal section of [image-and-link cards](https://help.getzenbasket.com/zenbasket-builder/adding-new-section/), so updating or retiring it is exactly as fast as updating the banner next to it. [Featured Categories](https://help.getzenbasket.com/products/featured-categories/), a related but different admin feature, highlights specific categories on the store's homepage; it doesn't populate this zone on a category page itself. ![8](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/8_1791192362546.png) Need step-by-step help? Visit the [ZenBasket Help Center](https://help.getzenbasket.com/zenbasket-builder/) for Builder instructions. Prefer to watch it built? The [ZenBasket Builder video playlist](https://youtube.com/playlist?list=PLaCV5NxaAlPc&si=ZZAwGXLWRpEOlfaG) walks through customizing these page sections step by step.