Concern Tabs — shop by what a product fixes

Some stores don't merchandise by brand or by collection name — they merchandise by the problem a product solves. Pore Care. Firming. Acne & Soothing. There was no section for that, so here is one.

Up to twenty categories sit in a scrolling rail of pastel icon discs. Tapping one swaps the shelf of products below it. Each category brings its own icon, its own icon colour and its own disc colour.

The icon can be three things, and the disc looks the same either way. Pick one of twelve icons drawn for beauty and wellness — bubbles, a lift arrow, leaves, a sparkle, a water drop, a flower, a soap bar, a sun, a serum dropper, a drink, a hairbrush, a face roller — or paste an emoji, or upload your own image. An upload fills the disc edge to edge, so your own art lands in the same shape as ours.

Nothing on the card is made up. The discount and the struck-through original price are worked out from your compare-at price. The "New" mark comes from the date you published the product, and never appears on something that's sold out. The sale flag on the photo shows only on discounted products, with a label you write. If you want your own tag — "Best", "Staff pick", anything — set a product's custom.badge metafield and it appears beside the others.

Every caption row keeps its height whether or not a product has that data, so prices line up across the shelf instead of stepping up and down. Products with a single version get an add-to-cart button; anything with sizes or shades links to the product page instead, because a cart button there would add a version nobody picked.

On a phone the rail swipes, showing two products and a peek of the third.