Category Pills

Shoppers who land on your home page and have to scroll past everything to find the one thing they want often do not find it. Category Pills is a single row of links that gets them there in one tap.

It is deliberately just the row. No product grid, no photos to source. Drop it above whatever you already run and it does its job.

The filled pill looks after itself

One pill is filled in and the rest are outlined, so the row always has a place to start. You never have to keep that up to date.

On your home page, the pill you marked as the default is the filled one. On a collection page, the pill for that collection fills itself instead, so a shopper browsing Gut Health can see at a glance where they are and what else there is. Add the section to your collection template as well and it doubles as a way to move between categories.

Because it is worked out from the page itself, it can never disagree with where the shopper actually is, and two pills can never end up filled at once.

What you can change

Every pill points at a collection, or at all products, search, your home page, or a link you type. Leave the label blank and it borrows the collection's name.

The shape is yours: roundness from a full pill down to a square chip, outline width, padding, label size and weight, uppercase, letter spacing, and the gap between them. Separate colors for the label, the outline and the filled pill, with the filled pill's label color worked out for you so it stays readable whichever background you pick.

You can also switch on a real product count per pill, read from the collection itself, and choose whether the row wraps onto more lines on a phone or stays on one line you can swipe.

Getting it on your store

Open Sections in Modulo, install Category Pills, then add it in your theme editor. It ships with seven pills already pointing somewhere real, so it works before you change a thing. Open each one and pick a collection.