HomeCasa Product listing page filters design for an online store
Design your store's category page: which filters to show and in what order, the control for each attribute, mobile filters, active chips, sorting, product cards, faceted SEO and metrics. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.
Intermediate · Text · Pending editorial review
Prompt
Act as an e-commerce UX designer specializing in search and faceted navigation.
Context:
- Store: {{store}}
- Product category: {{category}}
- Attributes available in the catalog: {{attributes}}
- Catalog size in this category: {{catalog}}
- Priority device: {{device}}
Deliverables:
1. Filter priority: which attributes become filters, in what order and which to leave out, based on how shoppers in this category decide.
2. Control type per filter: checkboxes, price range with editable inputs, color swatches, size buttons, a toggle (for example "in stock only") and search within a filter when there are many options.
3. Desktop: sidebar or horizontal filter bar, how many options to show before "show more" and what happens on apply.
4. Mobile: sticky filter button, bottom sheet or full screen, live apply or apply button, and a result count that updates before applying.
5. Active filters: chips, removing one at a time, "clear all" and how to avoid zero results (counts per option, disabled options).
6. Sorting: recommended options for this category and the default order.
7. Product card in the listing: essential information, color variants, price and discount, ratings if available and quick actions.
8. URLs and SEO: filter parameters, which combinations to index, canonical tags and pagination.
9. Accessibility: filter groups with fieldset and legend, announced result counts, focus after applying and keyboard-operable controls.
10. Metrics to evaluate the filters (usage per filter, zero-result rate, conversion from listing).
Constraints:
- Do not invent attributes that are not in the catalog; if a key one is missing, suggest it as [FILL IN: confirm the data exists].
- Do not invent behavioral data; justify priorities with reasoning and propose how to measure them.
- If the catalog size or attributes are unclear, ask me first.
Format: a filters table (attribute, priority, control, notes), text wireframes for desktop and mobile, and lists for the rest.How to use it
- Export the real product attributes for the category. 2. Review the priority table with your catalog team. 3. Build the mobile filter panel first and track usage per filter after launch.
Usage example
Store: running shoes · Category: road running · Attributes: size, brand, gait, drop, cushioning, color, price · Catalog: 600 products · Device: mobile.
Sample output
Filters table
| Attribute | Priority | Control | Notes |
|---|---|---|---|
| US size | 1 | Size buttons | Hide out-of-stock sizes or show them disabled with a 0 count |
| Terrain | 2 | Checkboxes (road, trail, mixed) | Decides the shoe type before brand does |
| Gait type | 3 | Checkboxes with a "What's this?" tip | Technical term: add a short explanation |
| Cushioning | 4 | Checkboxes (low, medium, high) | — |
| Price | 5 | Range with editable inputs | — |
| Brand | 6 | Checkboxes with search | Search when there are more than 8 brands |
| Drop | 7 | Range checkboxes | For advanced runners |
| Color | 8 | Named color swatches | Don't rely on color alone |
| Availability | — | "In stock only" toggle | Always visible at the top |
Mobile wireframe
Running shoes · 600 products
[ Filters (2) ] [ Sort: Relevance ▾ ]
(Size 9 ×) (Road ×) Clear all
┌ Bottom sheet ──────────────────┐
│ US size [8][8.5][9][9.5]… │
│ Terrain ☐ Road ☐ Trail │
│ [ Show 86 products ] │
└────────────────────────────────┘The button shows the updated count before applying, so nobody hits zero results without warning…
Key facts
- Category
- UI/UX design · E-commerce
- Output type
- Text
- Level
- Intermediate
- Designed for
- ChatGPT, Claude, Gemini and Microsoft Copilot
- Verified in
- Pending editorial verification
- Variables
- Store, Category, Available attributes, Catalog size and Priority device
- Language
- English
- Price
- Free, no sign-up
- Updated
- Nov 7, 2026
Frequently asked questions
Should filters apply instantly or with a button?
Instant apply usually works on desktop. On mobile, a "Show X results" button avoids reloads while users pick several options and tells them how many products they will see.
Should filtered pages be indexed?
Only combinations with real search demand, such as "women's trail running shoes". The rest should avoid creating duplicate pages through canonicals or non-indexable parameters. Check with your SEO lead.
What is this prompt for?
Design your store's category page: which filters to show and in what order, the control for each attribute, mobile filters, active chips, sorting, product cards, faceted SEO and metrics.
Which AI tools does it work with?
It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.
How do I customize the prompt?
Click “Customize” and fill in the variables (Store, Category, Available attributes, Catalog size and Priority device). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.
Do I need experience to use it?
It is intermediate: it helps to know the topic so you can provide good context and review the result critically.
Is this prompt free?
Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.
Can I trust the AI output?
Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.