Categories, Subcategories & Collections
Structure your product hierarchy and curate high-converting seasonal collections
Categories vs Collections: What's the Difference?
Understanding how Teyweb distinguishes between Categories and Collections is essential for effective merchandising:
| Attribute | Category (`Category.ts`) | Collection (`CollectionPage.tsx`) |
|---|---|---|
| Primary Purpose | Permanent structural classification of goods | Dynamic marketing curation and promotional campaigns |
| Product Relationship | Each product belongs to 1 primary category | A product can belong to multiple promotional collections |
| Example | Apparel > Women's Wear > Dresses | Summer Beachwear 2026, Black Friday Deals, Staff Picks |
| Navigation Position | Main store navigation menu & filter sidebars | Homepage featured carousels, banner grids, and promo links |
Creating & Nesting Categories
Navigate to Products > Categories from your merchant sidebar. Here you can build a clean hierarchy:
Add Category Name
Enter a clear name (e.g., "Electronics", "Beauty & Skincare"). A URL slug is generated automatically.
Set Parent Category (Optional)
Leave blank for a top-level department, or select a parent category to create a subcategory (e.g. Parent: "Electronics" > Subcategory: "Laptops & MacBooks").
Upload Category Thumbnail
Upload a representative square image. This thumbnail is displayed inside your storefront category slider pills.
Save & Reorder
Click Save. Categories immediately populate the filter drawers and navigation menus across your storefront.
Curating Promotional Collections
Navigate to Products > Collections. Collections allow you to group related products across different categories for seasonal marketing campaigns (e.g., "Back to School Bundle", "Valentine's Gifts Under ₦20,000").
Simply give your collection a title, upload a high-impact horizontal banner, and select which products to include using the search and checkbox picker.
Homepage Placement & Store Navigation
Once a category or collection is created:
- Storefront Header: Top-level categories automatically appear in the desktop navigation bar and mobile drawer.
- Homepage Banners: You can link any hero slider banner or promo card directly to a collection URL.
- Customer Filtering: On the `/categories` storefront page, customers can filter by price range, brand tags, and subcategories.
Was this guide helpful?
Help us improve our merchant documentation by sharing your feedback.