HomeCasa Diseño de filtros y listado de productos para una tienda online
Diseña la página de categoría de tu tienda: qué filtros mostrar y en qué orden, tipo de control por atributo, filtros en móvil, chips activos, ordenación, tarjeta de producto, SEO de facetas y métricas. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.
Intermedio · Texto · Pendiente de revisión editorial
Prompt
Actúa como diseñador UX de ecommerce especializado en búsqueda y navegación por facetas.
Contexto:
- Tienda: {{tienda}}
- Categoría de producto: {{categoria}}
- Atributos disponibles en el catálogo: {{atributos}}
- Tamaño del catálogo en esta categoría: {{catalogo}}
- Dispositivo prioritario: {{dispositivo}}
Entregables:
1. Prioridad de filtros: qué atributos convertir en filtros, en qué orden y cuáles dejar fuera, según cómo deciden los compradores de esta categoría.
2. Tipo de control por filtro: casillas, rango de precio con campos editables, muestras de color, tallas en botones, interruptor (por ejemplo, «solo disponibles») y búsqueda dentro del filtro si hay muchas opciones.
3. Escritorio: barra lateral o barra horizontal de filtros, cuántas opciones mostrar antes de «ver más» y comportamiento al aplicar.
4. Móvil: botón de filtros fijo, panel inferior o pantalla completa, aplicar en vivo o con botón, y contador de resultados actualizado antes de aplicar.
5. Filtros activos: chips, eliminar uno a uno, «borrar todo» y cómo evitar los cero resultados (recuentos por opción, opciones deshabilitadas).
6. Ordenación: opciones recomendadas para esta categoría y orden por defecto.
7. Tarjeta de producto en el listado: información imprescindible, variantes de color, precio y descuento, valoraciones si existen y acciones rápidas.
8. URLs y SEO: parámetros de filtro, qué combinaciones indexar, etiqueta canonical y paginación.
9. Accesibilidad: grupos de filtros con fieldset y legend, anuncio del número de resultados, foco tras aplicar y controles operables con teclado.
10. Métricas para evaluar los filtros (uso por filtro, cero resultados, conversión desde listado).
Restricciones:
- No inventes atributos que no estén en el catálogo; si falta alguno clave, propónlo como [COMPLETAR: confirmar si existe el dato].
- No inventes datos de comportamiento; justifica las prioridades con razonamiento y propón cómo medirlas.
- Si no está claro el tamaño del catálogo o los atributos, pregúntame antes.
Formato: tabla de filtros (atributo, prioridad, control, notas), wireframes en texto de escritorio y móvil, y listas para el resto.Cómo usarlo
- Exporta la lista de atributos reales de los productos de la categoría. 2. Revisa la tabla de prioridades con el equipo de catálogo. 3. Implementa primero el panel de filtros móvil y mide el uso de cada filtro tras el lanzamiento.
Ejemplo de uso
Tienda: zapatillas deportivas · Categoría: running · Atributos: talla, marca, pisada, drop, amortiguación, color, precio · Catálogo: 600 productos · Dispositivo: móvil.
Resultado de ejemplo
Tabla de filtros
| Atributo | Prioridad | Control | Notas |
|---|---|---|---|
| Talla EU | 1 | Botones de talla | Ocultar tallas sin stock o mostrarlas desactivadas con recuento 0 |
| Terreno | 2 | Casillas (asfalto, montaña, mixto) | Decide el tipo de zapatilla antes que la marca |
| Tipo de pisada | 3 | Casillas con ayuda «¿Qué es?» | Términos técnicos: añadir explicación breve |
| Amortiguación | 4 | Casillas (baja, media, alta) | — |
| Precio | 5 | Rango con campos editables | — |
| Marca | 6 | Casillas con buscador | Buscador si hay más de 8 marcas |
| Drop | 7 | Casillas por rangos | Para corredores avanzados |
| Color | 8 | Muestras de color con nombre | No depender solo del color |
| Disponibilidad | — | Interruptor «Solo en stock» | Siempre visible arriba |
Wireframe móvil
Zapatillas de running · 600 productos
[ Filtros (2) ] [ Ordenar: Relevancia ▾ ]
(Talla 42 ×) (Asfalto ×) Borrar todo
┌ Hoja inferior ─────────────────┐
│ Talla EU [40][41][42][43]… │
│ Terreno ☐ Asfalto ☐ Montaña │
│ [ Ver 86 productos ] │
└────────────────────────────────┘El botón muestra el recuento actualizado antes de aplicar, así nadie llega a cero resultados sin aviso…
Datos clave
- Categoría
- Diseño UI/UX · E-commerce
- Tipo de resultado
- Texto
- Nivel
- Intermedio
- Pensado para
- ChatGPT, Claude, Gemini y Microsoft Copilot
- Verificado en
- Pendiente de verificación editorial
- Variables
- Tienda, Categoría, Atributos disponibles, Tamaño del catálogo y Dispositivo prioritario
- Idioma
- Español
- Precio
- Gratis, sin registro
- Actualizado
- 07/11/2026
Preguntas frecuentes
¿Es mejor aplicar los filtros al momento o con un botón?
En escritorio suele funcionar aplicar al momento. En móvil, un botón «Ver X resultados» evita recargas mientras el usuario elige varias opciones y le muestra cuántos productos va a encontrar.
¿Deben indexarse las páginas filtradas?
Solo las combinaciones con demanda de búsqueda real, como «zapatillas de trail mujer». El resto debe evitar crear páginas duplicadas mediante canonical o parámetros no indexables. Revísalo con tu responsable de SEO.
¿Para qué sirve este prompt?
Diseña la página de categoría de tu tienda: qué filtros mostrar y en qué orden, tipo de control por atributo, filtros en móvil, chips activos, ordenación, tarjeta de producto, SEO de facetas y métricas.
¿Con qué herramientas de IA funciona?
Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.
¿Cómo personalizo el prompt?
Pulsa «Personalizar» y rellena las variables (Tienda, Categoría, Atributos disponibles, Tamaño del catálogo y Dispositivo prioritario). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.
¿Necesito experiencia para usarlo?
Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.
¿Este prompt es gratis?
Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.
¿Puedo fiarme del resultado de la IA?
Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.