Someone taps your ad because their skin has been tight and flaky since June, or because whey wrecks their stomach, or because their leggings roll down every squat. That is what the ad was about. The page they land on is about your products: a title, a count, then tile after tile of names they have never read. From that screen a shopper either finds something written in their words, or starts translating their own problem into your product names.

Call it the shop-by-problem block: a quiz, a set of concern links, a row of named ranges, whatever lets someone say what is wrong before they look at a product. In your theme it may be a section, a menu link or an app, and which one it is decides how you move it. We walked four collection pages OSEA Malibu, Tula, Naked Nutrition and Alphalete, two beauty, one supplement, one fitness — and every one of them has built one. Two put it above the grid, and one of those two runs its own label off the edge of the phone: Tula's sticky row reads SHOP ALL, BEST SELLERS, SAVE ON SETS and a fourth that renders as SKIN QU.

If your shop-by-problem block is below the grid, a shopper who arrived with a symptom and no product name has three moves: read every tile and translate, tap Filter and hope your words match, or go back to wherever the ad came from. That is not a forecast. It is the list.

Above the first tile

Alphalete's women's leggings page opens with its shop-by-problem block rather than with the grid. Under WOMEN'S and LEGGINGS sit six named ranges — Pump, Amplify, Contour, Revive, Aura, Tenacity — each card carrying two labelled lines above its link: Designed for: Glute focused training, leg days, and sculpting workouts, then Feels like: Supportive, high-compression sculpt with flexible stretch. Above the grid, on the screens we walked on 18 August 2026, those are the only lines written in the language a shopper arrives with. Someone who came for leg day does not have to already know what Pump means.

Alphalete: the shop-by-problem block is the first thing under the page title, and two of its six cards plus the edge of a third fill the phone screen with no product on it.

Copy this when your products differ by how they get used rather than by what is in them — training style, routine step, skin state. The six cards sit in a row that scrolls sideways, so on a phone you get two and a half of them and the other four need a swipe: build your own row for the number that fits on a phone and put the rest behind a link. Below the cards, on a freshly loaded page, the Filters and Featured buttons and the line Showing 50 of 183 products are faint enough to read as empty space; they come up solid only after a scroll. Load your own page, keep your thumb still, and see whether your controls are there before anything moves.

In the control row, in the store's own words

Naked Nutrition puts its controls on the first screen, at the end of a queue: an app-install banner, an announcement carousel, the header, a breadcrumb, the word PRODUCTS, and then two controls, Filter and Sort. Filter opens exactly two groups: Flavors, with 28 values, and Size, with 12. A filter group fills up with whatever the products happen to carry, which is why eight of those 28 under Flavors are sizes or product names rather than tastes. Read your own groups the way a shopper does, throw out the values the heading does not promise, and add the filter your support inbox keeps asking for. On a protein catalogue that is diet, or goal; neither is here.

That row is right for a shopper who has settled the category and is picking between forms of one thing. Flavour and size is the correct question for someone who came for chocolate whey isolate and needs it in 5LB. It is not the question for someone who came because dairy wrecks them. The store has an answer for that shopper too — WHICH PRODUCTS ARE RIGHT FOR YOU? above a Start Quiz button — nine phone screens down, under every tile in the grid.

That control row is also supposed to stay with you as you scroll. It does not. A little over half a screen down it slides underneath the site header, where it cannot be seen, and a tap where it ought to be lands on the header instead. Do the same on your own page: if your sticky row is hiding under your header, give it its own space below the header, or let it scroll away with the page rather than pretend to follow.

Two taps inside the drawer

Tula carries that sticky row on every screen, and below it, before the grid, five image cards — Bestsellers, Moisturizers, Treatments & Serums, Eye Care, Sunscreen — which link out to other collections rather than filter this one, two on screen at a time. The page states 89 Results, offers Filter and Sort, and Filter opens three rows: an In stock only (86) toggle, Price, and Product type with fourteen values, the largest Bundles & Sets (28). None of those rows asks what a shopper's skin is doing.

The shop-by-problem block does exist here. SKIN SOLUTIONS, inside the menu drawer, opens four links: Acne & Oil Control, Ageless Skin, Dryness & Barrier Boost, Dullness & Uneven Tone. Two taps from the collection page, in the place a returning customer goes to navigate — the right home for a full taxonomy, the wrong one for someone arriving from an ad. The move on your own store is not to build anything: those four links already exist, and they belong in a row above the first tile, with a label short enough to survive a phone.

One more thing about that row, and it costs nothing to copy. Two of the four stores tell a shopper what order the grid is already in: Alphalete's button is labelled with its current setting, Featured, and Tula ticks Featured inside its sort sheet. If your own button just says Sort, make it say what it is sorted by instead.

Below the grid, and the case for the plain list

OSEA Malibu states 114 products and lists them alphabetically, with no filter and no sort anywhere on it. Read that as deliberate, because it can be. Alphabetical puts a lip oil keychain second and a book about the vagus nerve third, ahead of the first full-size cream, and puts identical names side by side: tiles seven and eight both read Anti-Aging Body Balm, the second with no price and no button. If two tiles in your own grid share a title, the sample or the travel size needs that word in the title itself, where a shopper reads it.

OSEA Malibu: alphabetical order puts a book ahead of the creams, and the tile after Advanced Protection Cream is its 0.25 oz size, marked Out of Stock with no button.

The shop-by-problem block is here too. Questions? Take our Quiz. and Get a Custom Routine with Clean Essentials sit eight phone screens down, under the whole grid and under the paginator. A shopper who scrolls past every tile reaches it. A shopper who arrived knowing the product name never needs it. A shopper who arrived with tight, flaky skin and no product name is the one who does not get that far.

OSEA Malibu: eight phone screens down, the last thing before the shop-by-problem block is a Trending carousel, with its arrows and four slide dots.

A plain alphabetical list can still be the right call: the cheapest screen you can serve, standing between nobody and a product they already came for. Three things have to be true. Shoppers arrive with a product name rather than a symptom, which is ordinary for a brand with a big repeat base. The names on the tiles are words those shoppers would say out loud. And no two tiles carry the same name. Where the last one breaks, the list becomes a list of names to tell apart, and the words to fix that are usually already in the building: OSEA's own menu carries Anti-Aging, Hydration & Glow and Sensitive, each linking to a different collection.

Where the block goes, by the shape of your catalogue

The rule

Unless your shoppers arrive with a product name rather than a symptom, put your shop-by-problem block above the first product tile — because everything below that tile can only be reached by a shopper who has already scrolled past the names they could not translate.

Do this today

Open your own collection page on your phone, and do not scroll yet. Write down what sits between the top of the page and the first product image. Then scroll, counting screens, until you reach your shop-by-problem block. If that count is anything but zero, the change is a move rather than a build: the block goes above the first tile, and its label stops being the name of a control and becomes the name of a problem.

Sources

  • OSEA Malibu — https://oseamalibu.com/collections/all
  • Alphalete — https://alphaleteathletics.com/collections/womens-leggings
  • Naked Nutrition — https://nakednutrition.com/collections/all
  • Tula — https://tula.com/collections/all