HomeCasa Design dei filtri e della pagina elenco prodotti di un negozio online
Progetta la pagina categoria del tuo negozio: quali filtri mostrare e in che ordine, controllo per attributo, filtri su mobile, chip attivi, ordinamento, card prodotto, SEO delle faccette e metriche. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.
Intermedio · Testo · In attesa di revisione editoriale
Prompt
Agisci come UX designer e-commerce specializzato in ricerca e navigazione a faccette.
Contesto:
- Negozio: {{negozio}}
- Categoria di prodotto: {{categoria}}
- Attributi disponibili nel catalogo: {{attributi}}
- Dimensione del catalogo in questa categoria: {{catalogo}}
- Dispositivo prioritario: {{dispositivo}}
Consegne:
1. Priorità dei filtri: quali attributi trasformare in filtri, in che ordine e quali escludere, in base a come decidono gli acquirenti di questa categoria.
2. Tipo di controllo per filtro: caselle di spunta, intervallo di prezzo con campi modificabili, campioni colore, taglie a pulsanti, interruttore (per esempio «solo disponibili») e ricerca nel filtro se le opzioni sono molte.
3. Desktop: barra laterale o barra orizzontale, quante opzioni mostrare prima di «mostra altro» e comportamento all'applicazione.
4. Mobile: pulsante filtri fisso, pannello dal basso o a schermo intero, applicazione immediata o con pulsante e numero di risultati aggiornato prima di applicare.
5. Filtri attivi: chip, rimozione singola, «cancella tutto» e come evitare zero risultati (conteggi per opzione, opzioni disattivate).
6. Ordinamento: opzioni consigliate per questa categoria e ordine predefinito.
7. Card prodotto nell'elenco: informazioni indispensabili, varianti di colore, prezzo e sconto, recensioni se presenti e azioni rapide.
8. URL e SEO: parametri dei filtri, quali combinazioni indicizzare, tag canonical e paginazione.
9. Accessibilità: gruppi di filtri con fieldset e legend, annuncio del numero di risultati, focus dopo l'applicazione e controlli usabili da tastiera.
10. Metriche per valutare i filtri (uso per filtro, tasso di zero risultati, conversione dall'elenco).
Vincoli:
- Non inventare attributi che non sono nel catalogo; se ne manca uno chiave, proponilo come [DA COMPLETARE: verificare che il dato esista].
- Non inventare dati di comportamento; motiva le priorità con il ragionamento e proponi come misurarle.
- Se la dimensione del catalogo o gli attributi non sono chiari, chiedimeli prima.
Formato: tabella dei filtri (attributo, priorità, controllo, note), wireframe testuali desktop e mobile ed elenchi per il resto.Come usarlo
- Esporta l’elenco reale degli attributi dei prodotti della categoria. 2. Rivedi la tabella delle priorità con il team catalogo. 3. Realizza prima il pannello filtri mobile e misura l’uso di ogni filtro dopo il lancio.
Esempio d'uso
Negozio: scarpe da running · Categoria: strada · Attributi: taglia, marca, appoggio, drop, ammortizzazione, colore, prezzo · Catalogo: 600 prodotti · Dispositivo: mobile.
Esempio di risultato
Tabella dei filtri
| Attributo | Priorità | Controllo | Note |
|---|---|---|---|
| Taglia EU | 1 | Pulsanti taglia | Nascondere le taglie esaurite o mostrarle disattivate con conteggio 0 |
| Terreno | 2 | Checkbox (strada, trail, misto) | Decide il tipo di scarpa prima della marca |
| Tipo di appoggio | 3 | Checkbox con aiuto «Cos'è?» | Termine tecnico: breve spiegazione |
| Ammortizzazione | 4 | Checkbox (bassa, media, alta) | — |
| Prezzo | 5 | Intervallo con campi modificabili | — |
| Marca | 6 | Checkbox con ricerca | Ricerca oltre le 8 marche |
| Drop | 7 | Checkbox per fasce | Per runner esperti |
| Colore | 8 | Campioni colore con nome | Non affidarsi solo al colore |
| Disponibilità | — | Interruttore «Solo disponibili» | Sempre visibile in alto |
Wireframe mobile
Scarpe da running · 600 prodotti
[ Filtri (2) ] [ Ordina: Rilevanza ▾ ]
(Taglia 42 ×) (Strada ×) Cancella tutto
┌ Pannello inferiore ────────────┐
│ Taglia EU [40][41][42][43]… │
│ Terreno ☐ Strada ☐ Trail │
│ [ Mostra 86 prodotti ] │
└────────────────────────────────┘Il pulsante mostra il conteggio aggiornato prima di applicare, così nessuno arriva a zero risultati senza preavviso…
Dati chiave
- Categoria
- Design UI/UX · E-commerce
- Tipo di output
- Testo
- Livello
- Intermedio
- Pensato per
- ChatGPT, Claude, Gemini e Microsoft Copilot
- Verificato in
- In attesa di verifica editoriale
- Variabili
- Negozio, Categoria, Attributi disponibili, Dimensione del catalogo e Dispositivo prioritario
- Lingua
- Italiano
- Prezzo
- Gratuito, senza registrazione
- Aggiornato
- 07/11/2026
Domande frequenti
Meglio applicare i filtri subito o con un pulsante?
Su desktop l’applicazione immediata funziona di solito bene. Su mobile un pulsante «Mostra X risultati» evita ricaricamenti mentre l’utente sceglie più opzioni e indica quanti prodotti troverà.
Le pagine filtrate vanno indicizzate?
Solo le combinazioni con una reale domanda di ricerca, come «scarpe trail donna». Le altre devono evitare duplicati con canonical o parametri non indicizzabili. Verificalo con il tuo responsabile SEO.
A cosa serve questo prompt?
Progetta la pagina categoria del tuo negozio: quali filtri mostrare e in che ordine, controllo per attributo, filtri su mobile, chip attivi, ordinamento, card prodotto, SEO delle faccette e metriche.
Con quali strumenti di IA funziona?
È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.
Come personalizzo il prompt?
Clicca su «Personalizza» e compila le variabili (Negozio, Categoria, Attributi disponibili, Dimensione del catalogo e Dispositivo prioritario). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.
Serve esperienza per usarlo?
È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.
Questo prompt è gratuito?
Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.
Posso fidarmi dell'output dell'IA?
Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.