Una cuadrícula de productos con desplazamiento horizontal: en lugar de una sola fila de tarjetas, el widget muestra dos o más filas, y cada columna de tarjetas se desplaza de lado como una unidad. Muestra muchos más productos en el mismo espacio de pantalla — ideal para las secciones «Quizá le guste» en páginas de categoría, páginas de inicio y cualquier lugar donde un slider plano se quede escaso. Las tarjetas usan el aspecto Clean Catalog: tarjetas blancas con la foto del producto, el título, el precio, las insignias y un botón Añadir al carrito siempre visible, con botones de flecha redondos en la barra de título.
Inicio rápido
- Añada la acción y elija la plantilla Product Grid Slider.
- Haga que Main Product Image Column (Item Image) apunte al campo de imagen de su catálogo. Si todavía no hay ningún catálogo conectado, aparecen en el editor seis productos de demostración con un aviso — los visitantes nunca los ven, y desaparecen en cuanto se carga su catálogo.
- Defina el número de filas en Slider & Items Per View → Rows (vea más abajo).
- Elija cuántas columnas se ven en cada dispositivo (Items Visible — Desktop / Tablet / Mobile).
- Previsualice en todos los tamaños de dispositivo y publique.
El ajuste Rows
El campo Rows admite una palabra por fila:
auto auto— dos filas (el valor predeterminado)auto— una fila: el slider clásico de una sola filaauto auto auto— tres filas
auto significa que cada fila es tan alta como su contenido. Avanzado: sustituya auto por alturas fijas para forzar filas uniformes — por ejemplo, 260px 260px da dos filas de exactamente 260px. Puede combinar valores.
Los productos llenan cada columna de arriba abajo y luego siguen en la columna siguiente — así que, con 2 filas, los productos 1 y 2 forman la primera columna, el 3 y el 4 la segunda, y así sucesivamente. El widget pide hasta 24 productos para mantener llenas varias filas.
Cómo funciona el desplazamiento
La cuadrícula se desplaza en horizontal por columnas. Los clics en las flechas y los puntos avanzan una vista completa cada vez, y cada paso de columna hace pasar una columna entera de productos — con 2 filas, un paso de columna avanza 2 productos. El desplazamiento táctil y por arrastre, el ajuste a las tarjetas, la reproducción automática opcional y la barra de desplazamiento opcional funcionan exactamente igual que en los sliders de una fila. De forma predeterminada, esta plantilla muestra botones de flecha redondos en la barra de título (junto al título del widget); las flechas laterales clásicas están disponibles con un interruptor.
El ancho de las tarjetas y el mínimo
El ancho de las columnas se calcula automáticamente a partir de Items Visible en cada breakpoint, con un mínimo de Minimum Card Width (200px de forma predeterminada) para que las tarjetas nunca se aplasten en pantallas estrechas — cuando el ancho calculado quedaría por debajo del mínimo, el widget muestra menos columnas y se desplaza.
Productos de demostración — el conjunto predeterminado
La misma lógica que en las demás plantillas de recomendaciones: seis productos de demostración que solo se muestran en contextos de vista previa (el editor de Personyze y los enlaces de vista previa) cuando no hay ningún catálogo conectado, junto con un aviso. Los visitantes reales nunca los ven, y los productos reales toman el relevo automáticamente en cuanto su catálogo devuelve resultados. Un solo interruptor lo controla: Widget Layout → Demo Products (Preview Only).
Qué comparte con los otros sliders
Las insignias con el sistema de esquinas que se apilan solas, los precios de oferta con tachado, las valoraciones con estrellas, el corazón de la lista de deseos, las filas de estadísticas y Añadir al carrito con avisos de confirmación son las mismas secciones probadas que en los otros sliders de recomendaciones, y se configuran igual. La referencia completa está en la guía principal del slider: Slider de recomendaciones — guía completa. En esta plantilla, el botón Añadir al carrito está siempre visible en la tarjeta (en lugar de aparecer al pasar el ratón), a juego con la disposición más densa de la cuadrícula.
Preguntas frecuentes
La cuadrícula solo muestra una fila. Revise Slider & Items Per View → Rows: debe contener una palabra por fila, p. ej. auto auto para dos filas. Si el campo se editó antes, el valor guardado prevalece sobre el valor predeterminado de la plantilla.
¿Pueden las filas tener alturas distintas? De forma predeterminada, cada fila se ajusta a su contenido. Para filas uniformes, use alturas fijas en el campo Rows, p. ej. 260px 260px.
¿Cuántos productos debe devolver mi algoritmo? El widget pide hasta 24. Para que una cuadrícula de 2 filas se vea llena, asegúrese de que su algoritmo y su respaldo puedan aportar al menos entre 8 y 12 productos.
¿Puedo usarla como un slider normal de una sola fila? Sí — ponga Rows en auto y se comportará exactamente como el slider Clean Catalog de una sola fila.