Category Groups

Category Pills gives you one row of links. This gives you several, each under a heading a shopper actually thinks in.

by recipient · For her, For him, For teachers, Treat yourself by mood · Self-care, Cozy nights, Funny & bold by price · Under $20, Under $50, Splurge, Gift card

They all sit inside one card, so three ways into your catalogue read as a single control rather than three sections stacked on top of each other. Turn the card off if you would rather have the pills sit bare on the page.

How it is built

Add a Group block to name an axis, then add Pill blocks underneath it. Pills belong to the group above them, so reordering is drag and drop.

Every pill can point at a collection, your search page, your full catalogue, or any link you type. A pill with no collection picked links to your catalogue rather than nowhere, so nothing is a dead end while you are still setting it up.

Small things that matter

• On a collection page, the pill for that collection fills itself and tells screen readers it is the page you are on. Nothing to configure.
• Product counts are optional, and they come from the collection itself, so they can never be out of date.
• Group labels are italic by default. Switch them to uppercase, resize them, or give them their own font.
• On phones the groups stack full width and the pills stay a comfortable size to tap.
• Add a fifth or sixth group and they wrap onto a tidy second row instead of one of them stretching across the whole card.