---
title: Cómo se muestra el catálogo al cliente
section: fo-guide
slug: catalogo-fo
description: "Guía sobre cómo se presenta el catálogo en el front office de PrestaShop: páginas de categoría, fichas de producto, filtros, ordenación, productos relacionados y SEO."
keywords: catálogo prestashop, ficha producto, página categoría, filtros producto, SEO catálogo, front office prestashop
last_updated: 2026-04-05
source_url: "https://ayudaprestashop.es/fo-guide/catalogo-fo"
---

# Cómo se muestra el catálogo al cliente

> Guía sobre cómo se presenta el catálogo en el front office de PrestaShop: páginas de categoría, fichas de producto, filtros, ordenación, productos relacionados y SEO.

El catálogo es el corazón de tu tienda online. La forma en que se presentan los productos al cliente determina directamente las ventas. En esta guía veremos cómo PrestaShop muestra el catálogo en el front office y cómo puedes optimizarlo.

## Página de categoría

La página de categoría es donde el cliente navega por los productos agrupados. Por defecto, PrestaShop muestra una cuadrícula de productos con imagen, nombre, precio y botón de añadir al carrito.

Puedes configurar la apariencia desde <strong>Parámetros de la tienda → Productos → Configuración de producto</strong>:

| Opción | Descripción | Recomendación |
| --- | --- | --- |
| Productos por página | Número de productos mostrados antes de paginar | 12-24 productos es lo habitual |
| Modo de visualización por defecto | Cuadrícula (grid) o lista | Cuadrícula para moda/decoración, lista para productos técnicos |
| Mostrar precios | Muestra u oculta precios en el listado | Siempre visible, excepto B2B con precios bajo solicitud |
| Mostrar disponibilidad | Indica si hay stock en el listado | Sí, genera confianza y urgencia |

La descripción de la categoría se muestra en la parte superior de la página. Aprovecha este espacio para incluir texto relevante para SEO y para orientar al cliente sobre los productos que encontrará.

*Ruta para editar la descripción de categoría*

```text
Catálogo → Categorías → [Seleccionar categoría]
  └── Descripción: texto HTML con información relevante
  └── Imagen de portada: imagen representativa de la categoría
  └── Miniatura: icono o imagen pequeña para menús
```

## Filtros y navegación por facetas

Los filtros permiten al cliente refinar la búsqueda dentro de una categoría. PrestaShop incluye el módulo <strong>Navegación por facetas</strong> (ps_facetedsearch) que permite filtrar por precio, atributos (talla, color), características (material, marca), disponibilidad y más.

Para configurar los filtros, ve a <strong>Módulos → Módulos y servicios</strong> y busca «Navegación por facetas». Desde su configuración puedes:

| Acción | Cómo hacerlo |
| --- | --- |
| Crear una plantilla de filtros | Define qué filtros aparecen y en qué orden |
| Asignar plantilla a categorías | Cada categoría puede tener filtros diferentes |
| Elegir tipo de filtro | Checkbox, desplegable, slider (para precio), bloques de color |
| Controlar la visibilidad | Mostrar solo filtros relevantes (que tengan resultados) |
| Indexar filtros | Botón «Indexar todos los precios/atributos» para actualizar |

> **[TIP] Rendimiento de filtros**
>
> Si tienes un catálogo grande (miles de productos), asegúrate de ejecutar la indexación periódicamente y considera limitar el número de filtros visibles. Demasiados filtros ralentizan la página y confunden al usuario.

## Ordenación de productos

Los clientes pueden ordenar los productos en la página de categoría. Las opciones de ordenación disponibles por defecto son:

| Criterio | Descripción |
| --- | --- |
| Relevancia | Orden por posición manual definida en la categoría |
| Nombre A-Z / Z-A | Orden alfabético por nombre de producto |
| Precio bajo-alto / alto-bajo | Orden por precio final (con impuestos) |
| Novedades | Productos más recientes primero |

El orden por defecto se configura en <strong>Parámetros de la tienda → Productos</strong>, sección «Ordenación por defecto». Si eliges «Posición dentro de la categoría», podrás controlar manualmente el orden desde la pantalla de edición de cada categoría, arrastrando los productos.

## Ficha de producto

La ficha de producto es la página más importante para la conversión. Aquí el cliente decide si compra o no. Los elementos principales son:

| Elemento | Configuración | Buenas prácticas |
| --- | --- | --- |
| Imágenes | Catálogo → Productos → [producto] → Imágenes | Mínimo 3-4 fotos, fondo blanco, opción de zoom, incluir foto en uso |
| Título | Pestaña «Básico» del producto | Descriptivo, incluir marca y modelo, 50-70 caracteres |
| Precio | Pestaña «Precios» | Mostrar precio tachado si hay descuento, precio por unidad si aplica |
| Descripción corta | Pestaña «Básico» | 2-3 frases vendedoras, beneficios principales |
| Descripción larga | Pestaña «Básico» | Detalle completo, especificaciones, uso, cuidados |
| Variantes | Pestaña «Combinaciones» | Selector visual de color/talla, mostrar stock por combinación |
| Botón añadir al carrito | Automático según tema | Visible sin scroll, color llamativo, texto claro |
| Información de envío | Automático según configuración de transportistas | Mostrar plazo estimado y coste o envío gratuito |

Las imágenes del producto se gestionan desde la pestaña de imágenes. Puedes definir una imagen de portada que será la que se muestre en los listados. PrestaShop genera automáticamente los tamaños necesarios según la configuración en <strong>Diseño → Imágenes</strong>.

*Tamaños de imagen recomendados*

```text
Imagen original: mínimo 800x800 px (recomendado 1200x1200 para zoom)

Tamaños auto-generados:
  - cart_default: 125x125 px (carrito)
  - small_default: 98x98 px (listados pequeños)
  - medium_default: 452x452 px (listados)
  - home_default: 250x250 px (página inicio)
  - large_default: 800x800 px (ficha producto)
```

> **[!] Formato de imagen**
>
> Usa formato JPG para fotografías y PNG solo cuando necesites transparencia. PrestaShop 1.7.8+ soporta WebP que reduce el peso un 25-35% respecto a JPG con la misma calidad. Actívalo desde Diseño → Imágenes → Generar imágenes en formato WebP.

## Productos relacionados y packs

Los productos relacionados (cross-selling) se configuran desde la pestaña <strong>Opciones</strong> del producto, sección «Productos asociados». Puedes buscar y añadir productos que se mostrarán como sugerencias en la ficha.

Los <strong>packs de productos</strong> permiten vender varios productos juntos con un precio especial. Se crean desde <strong>Catálogo → Productos → Crear producto</strong>, eligiendo el tipo «Pack de productos». Luego seleccionas los productos que lo componen y defines el precio del pack.

| Funcionalidad | Dónde se configura | Para qué sirve |
| --- | --- | --- |
| Productos asociados (cross-sell) | Producto → Opciones → Productos asociados | Sugerir complementos: funda para móvil, pilas para juguete |
| Accesorios | Mismo lugar que productos asociados | PrestaShop los trata igual que los asociados en PS 1.7+ |
| Pack de productos | Crear producto tipo Pack | Vender lotes con descuento: kit iniciación, set regalo |
| Productos de la misma categoría | Automático según tema | El tema classic muestra productos de la misma categoría al final |

## SEO del catálogo

Optimizar el SEO del catálogo es fundamental para atraer tráfico orgánico. PrestaShop ofrece herramientas integradas para ello.

Cada producto y categoría tiene una pestaña <strong>SEO</strong> donde puedes configurar:

| Campo SEO | Descripción | Consejo |
| --- | --- | --- |
| Meta título | Título que aparece en Google (title tag) | Incluir keyword principal + marca, máximo 60 caracteres |
| Meta descripción | Texto bajo el título en resultados de Google | Call to action + beneficio, 120-155 caracteres |
| URL amigable | El slug de la URL del producto/categoría | Corta, con keyword, sin caracteres especiales |
| Etiquetas (tags) | Palabras clave asociadas al producto | Útiles para búsqueda interna, menos relevancia SEO |

Para activar las URLs amigables, ve a <strong>Parámetros de la tienda → Tráfico y SEO → SEO y URLs</strong> y activa la opción <strong>URLs amigables</strong>. También puedes personalizar el esquema de URLs (por ejemplo, incluir la categoría en la URL del producto).

*Ejemplos de URLs amigables*

```text
Sin URL amigable:  tutienda.com/index.php?id_product=42&controller=product
Con URL amigable:  tutienda.com/camisetas/42-camiseta-algodon-azul.html
Con categoría:     tutienda.com/ropa/camisetas/camiseta-algodon-azul
```

> **[TIP] Schema markup**
>
> PrestaShop genera automáticamente datos estructurados (schema.org) para los productos, incluyendo precio, disponibilidad y valoraciones. Verifica que funcionen correctamente con la herramienta de prueba de datos estructurados de Google.


---

*Fuente: [https://ayudaprestashop.es/fo-guide/catalogo-fo](https://ayudaprestashop.es/fo-guide/catalogo-fo). Version Markdown generada automaticamente para consumo por LLMs.*