skills/catalog-inventory/product-categorization/SKILL.md
Build a clean product hierarchy with collections, categories, tags, and breadcrumb navigation using your platform's native tools
npx skillsauth add finsilabs/awesome-ecommerce-skills product-categorizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
A well-structured product taxonomy makes products findable and drives SEO through category pages. Every platform handles categorization differently: Shopify uses Collections and tags, WooCommerce uses hierarchical Categories and tags, and BigCommerce uses Categories with subcategories. Understanding the platform's native model and configuring it correctly is more impactful than building a custom taxonomy system.
| Platform | Category Model | URL Structure |
|----------|---------------|---------------|
| Shopify | Collections (flat or nested via themes); tags for additional filtering | /collections/womens-dresses |
| WooCommerce | Hierarchical categories (parent/child) + tags | /product-category/clothing/womens/dresses/ |
| BigCommerce | Nested categories (unlimited depth) | /clothing/womens/dresses/ |
| Custom / Headless | Build with materialized paths for efficient breadcrumb queries | /c/clothing/women/dresses |
Choose a depth strategy before building:
Shopify uses Collections as the primary categorization mechanism. Collections can be manual (hand-curated) or automated (rules-based).
Creating a collection hierarchy:
womens-dress)Automated collections (rule-based — recommended):
Manual collections:
Navigation menu hierarchy:
Tags for additional filtering:
color-red, size-M, material-cottonBreadcrumbs: Most Shopify themes include breadcrumbs automatically. If not:
WooCommerce has hierarchical product categories — the closest to a traditional category tree.
Create a category hierarchy:
WooCommerce generates SEO-friendly URLs automatically:
/product-category/clothing//product-category/clothing/womens//product-category/clothing/womens/dresses/Assign products to categories:
Category page SEO:
Breadcrumbs:
BigCommerce has a nested category system with unlimited depth.
Create categories:
Assign products to categories:
Category sort order:
Breadcrumbs: BigCommerce themes include breadcrumbs by default, automatically following the nested category path. Customize the breadcrumb template in your theme's Stencil files if needed.
For headless storefronts, use a materialized path model for efficient breadcrumb queries:
// Category model with materialized path
interface Category {
id: string;
name: string;
slug: string;
parentId: string | null;
path: string; // e.g., "clothing/women/dresses" — ancestor slugs joined by /
pathIds: string[]; // IDs for fast joins: ['cat_root', 'cat_clothing', 'cat_women', 'cat_dresses']
depth: number;
position: number; // Sort order among siblings
published: boolean;
seoTitle?: string;
seoDescription?: string;
}
// Get breadcrumbs in one query using materialized path
export async function getCategoryWithBreadcrumb(slug: string) {
const category = await db.categories.findUnique({ where: { slug } });
if (!category) return null;
// Fetch all ancestors in one query using pathIds
const ancestors = await db.categories.findMany({
where: { id: { in: category.pathIds.slice(0, -1) } },
orderBy: { depth: 'asc' },
});
return {
...category,
breadcrumbs: [
...ancestors.map(a => ({ name: a.name, url: `/c/${a.path}` })),
{ name: category.name, url: `/c/${category.path}` },
],
};
}
// Update materialized paths when a category is moved
export async function moveCategory(categoryId: string, newParentId: string | null) {
const category = await db.categories.findUnique({ where: { id: categoryId } });
const newParent = newParentId ? await db.categories.findUnique({ where: { id: newParentId } }) : null;
const newPath = newParent ? `${newParent.path}/${category.slug}` : category.slug;
const newPathIds = newParent ? [...newParent.pathIds, categoryId] : [categoryId];
// Update this category and all descendants in a transaction
const descendants = await db.categories.findMany({ where: { path: { startsWith: category.path + '/' } } });
await db.$transaction([
db.categories.update({
where: { id: categoryId },
data: { parentId: newParentId, path: newPath, pathIds: newPathIds, depth: newPath.split('/').length },
}),
...descendants.map(desc => db.categories.update({
where: { id: desc.id },
data: {
path: desc.path.replace(category.path, newPath),
pathIds: [...newPathIds, ...desc.pathIds.slice(category.pathIds.length)],
depth: desc.path.replace(category.path, newPath).split('/').length,
},
})),
]);
}
Regardless of platform, every category page needs:
[Category Name] | [Store Name] (e.g., "Women's Dresses | YourStore")/clothing/womens/dresses, not /clothing/womens/dresses?color=red)Canonical URLs for filtered pages:
For catalogs with hundreds or thousands of products to categorize:
Shopify:
WooCommerce:
AI-assisted categorization (any platform):
| Problem | Solution | |---------|----------| | Breadcrumb shows wrong category | On WooCommerce, install Yoast SEO and set the primary category per product; without a primary category, the breadcrumb may show any assigned category | | Shopify collection page has no unique content | Add a collection description in Admin → Collections → [Collection] → Description; many merchants leave this blank and miss an SEO opportunity | | Duplicate content on category + filtered URLs | Set canonical tags pointing to the clean category URL for all filter variations; block crawling of paginated pages beyond page 2 | | Products assigned to too many categories | Each product should have one primary category plus optional secondary ones; too many categories dilutes the signals and confuses navigation | | Category rename breaks existing links | When renaming, set up a URL redirect from the old URL to the new URL; all platforms support redirects in settings |
tools
Let shoppers save products to a wishlist, share it with friends, and get notified when saved items come back in stock or drop in price
development
Build a themeable storefront with design tokens and CSS custom properties that supports white-labeling, multi-brand variants, and dark mode
development
Speed up product discovery with instant search suggestions, fuzzy typo matching, and category-aware results powered by Algolia or Elasticsearch
development
Build a mobile-first storefront with thumb-friendly navigation, sticky add-to-cart buttons, and touch-optimized components for high mobile conversion