This page is how you build shop categories so products can be grouped, the public shop can filter, and related products can appear. A category can have a cover and an optional icon. A page can insert category cards that stay in sync, or a three-column category hero.
Checking categories on a product is the Category field in Publish a product.
On public /shop, the left side shows a collapsible tree of parents and children. Choosing a parent lists published products in that category and in its children. To jump straight to a category from the header, footer, or a button, pick the commerce product-category target in the link picker.
Siblings in the sidebar collapse like an accordion by default (only one open). To keep several open, turn on Allow multiple category branches open under Store settings → List. See Store and checkout.
Before you start
- Commerce is on.
- Owners and editors can change categories. A viewer is read-only.
Where
Sidebar Commerce → Categories (/admin/commerce/categories).
The page title is Product categories. The top right can return to the product list.
Add a category
- In Add category at the top of the page, fill the table below and press Add. Success says “Category created”. The form clears, so you can add the next one at once. You do not have to press Save on the bottom bar first.
| Field | Required | What it means |
|---|---|---|
| Name | Yes | The name in the admin and on the public site. On a multilingual site you can fill the other languages too. |
| Slug | Yes | For the URL. Lowercase English and hyphens work well, for example business-card. Unique on this site. |
| Parent | Optional | (No parent) means the first level. Pick another category to build a tree. |
| Cover image | Optional | Upload or pick from the library. Without a cover, the public card still shows the category name. |
| Icon | Optional | From the icon library, separate from the cover. Used in the left column of the category hero, not as a thumbnail in the shop sidebar. |
A new category lands at the end of the list. Reorder by dragging. Do not type a sort number.
Change the name, slug, parent, or cover
An existing row can be edited in place: name, slug, parent, cover, and icon. Then press Save at the bottom. Success says “Categories saved”. The bottom bar only holds drafts of those fields. Add, delete, duplicate, and drag save immediately.
The list can copy the public shop filter link for that category.
Drag to reorder
Hold the handle on the left of the row and move it. When you let go, the order syncs (you may briefly see that it is syncing). You do not press Save at the bottom.
Duplicate a category
The duplicate control on that row creates a copy: the name gains a copy suffix, the slug is unique in the -copy series, and the other language names, parent, cover, and icon come along.
Assign it to a product
- Open the product under Product management.
- On Basic, choose Category.
- Save or publish.
No category shows (Uncategorized) on the list. The product editor can check more than one category. None checked means uncategorized. With Show related products on, the page recommends other published products that share any category with this one.
Put category cards on a page
To list categories on the homepage or any page, and have the grid follow later edits:
- Open that page in The full-screen page editor.
- From the block library, add product categories (the category cards, not the product list).
- By default only top-level categories show. In the block settings, the range can be children only (categories that have a parent, including deeper ones) or all.
- The block can paginate: none, load more, or page numbers, and a page size up to 24. With no pagination it shows a fixed count.
- A visitor who clicks a card goes to
/shop?category=plus that slug.
Without a cover, the card still shows the name. The shop sidebar does not use these cover thumbnails.
If you want a few fixed marketing tiles that do not follow the category tree, use an image service card and point the link at a product category.
Put a category hero on a page
For a shop doorway with categories on the left, a carousel in the middle, and links on the right:
- Open that page in The full-screen page editor.
- From the block library, add the category hero (not the category-card grid).
- Upload the center carousel. The right side can hold shortcuts, such as member sign-in or LINE.
- The left column fills itself with parent and child categories that have a published product, all expanded. On the category page, pick an Icon for each one if you want.
- On a desktop, hovering a category on the left lists product names in the center, grouped by child category and separated with
|. A product name opens that product. A category row opens that category in the shop. A phone has no hover preview. Tapping a category goes straight to the shop.
Delete a category
- Press Delete on that row. Confirm “Delete “{name}”?”.
- If it asks you to remove or move child categories first, clear their parent or delete the children.
- If products still use this category, move them to another category (or clear it) before you delete. After deletion they become uncategorized.
This page cannot undo a delete.
How to check
- Name, slug, parent, and cover look right. After a drag, the public shop category order follows.
- The product editor’s category checkboxes include the new one, and more than one can be checked.
- The public shop’s left categories collapse. A parent shows published products in that category and its children. A child shows only that child.
- A header menu item aimed at a commerce product category opens
/shop?category=plus that slug. - After you insert the category-card block, each card opens the matching shop filter. A card with no cover still shows the name.
- With load more or page numbers on, the public block can change page. A refresh stays on that page.
- A category row can have an icon. After you insert the category hero, the left column expands children. On a desktop, hovering lists product names by child category, and a name opens the product. On a phone, a category tap opens the shop.
When it sticks
| What you see | What to do |
|---|---|
| “Enter name and slug for the new category” | Both fields need a value. |
| “A category with this slug already exists” | Use a different path segment. |
| “Parent category cannot be the category itself” | Do not set a category as its own parent. |
| It will not delete | Deal with the child categories first. |
| Leaving the page warns about unsaved changes | You changed a name, slug, or parent and have not pressed Save at the bottom. Adding a category does not raise this warning. |