Hacer un carrusel horizontal tipo swipe de productos de Divi

En móvil, mostrar muchos productos apilados uno debajo del otro obliga al usuario a un scroll interminable. Una solución más elegante es el swipe horizontal: agrupar productos en una fila por la que el usuario desliza con el dedo, como en las apps de las grandes tiendas. En este tutorial te muestro cómo crear un carrusel horizontal tipo swipe de productos en Divi con un poco de CSS, para que tus categorías de producto se naveguen deslizando en móvil y tablet.

Lo mejor de esta técnica es que no requiere ningún plugin: solo un pequeño fragmento de CSS personalizado aplicado al módulo de productos. Con eso, el usuario en móvil o tablet puede deslizar horizontalmente para recorrer un grupo de productos, dando a tu tienda una experiencia mucho más moderna.

¿Por qué usar swipe horizontal en productos?

El deslizamiento horizontal es un patrón nativo de las apps móviles: el usuario ya sabe que puede deslizar para ver más. Aplicarlo a una categoría de productos en tu tienda mejora la experiencia en pantallas pequeñas, ahorra espacio vertical y hace que explorar productos sea más cómodo y atractivo. En lugar de un muro de productos, presentas grupos navegables que invitan a descubrir. Si estás construyendo tu tienda con Divi, esto complementa todo lo del Curso de Tiendas Online con Divi 5 y WooCommerce.

Paso 1: Crea la categoría o grupo de productos

Primero define qué productos quieres mostrar en el carrusel. Lo habitual es usar el módulo de productos de Divi (o de WooCommerce) configurado para mostrar una categoría concreta o una selección de productos. Configura cuántos productos se muestran y en cuántas columnas — esa configuración será la base sobre la que aplicaremos el efecto de swipe.

Consejo: el swipe horizontal funciona mejor con un número moderado de productos por grupo (entre 4 y 12). Si tienes cientos de productos, agrúpalos por categorías y crea varios carruseles temáticos en lugar de uno gigante. Eso mejora tanto la experiencia como el rendimiento.

Paso 2: Asigna una clase CSS al módulo

Haz clic en el módulo de productos, ve a Avanzado → ID y clases CSS y asígnale una clase personalizada que usaremos para apuntar con el CSS. Esta clase permite que el efecto de swipe se aplique solo a este módulo y no a todos los listados de productos de tu tienda, dándote control sobre dónde aparece el carrusel.

🎓 ¿Quieres construir una tienda WooCommerce moderna y optimizada?
En uxdivi.com/cursos tenemos el Curso de Tiendas Online con Divi 5 y WooCommerce donde diseñamos toda la experiencia de compra, desde el catálogo hasta el checkout. Accede como suscriptor y construye una tienda que vende.

Paso 3: Aplica el CSS del efecto swipe

El corazón del tutorial es el CSS. Con unas reglas, transformamos la cuadrícula de productos en una fila horizontal con desplazamiento por deslizamiento (usando propiedades como display: flex, overflow-x: auto y scroll-snap para que el deslizamiento se sienta natural). El CSS controla el ancho de cada producto, el espaciado y el comportamiento del scroll horizontal. En los recursos del tutorial dejo el código exacto listo para copiar y pegar en las opciones de la página o del sitio.

Paso 4: Ajusta el comportamiento responsive

Lo habitual es activar el swipe horizontal solo en móvil y tablet, donde aporta más, y mantener la cuadrícula normal en escritorio (donde hay espacio horizontal de sobra). Con media queries en el CSS, defines en qué tamaños de pantalla se activa el efecto. Revisa el resultado en las vistas responsive del Divi Builder y en un dispositivo real para confirmar que el deslizamiento se siente fluido. Si te gustan los carruseles de productos, también te puede interesar el tutorial de carrusel de productos con WooCommerce y Divi, que usa un enfoque distinto con flechas de navegación.

Consejo: añade una pista visual de que el contenido se puede deslizar — por ejemplo, dejando que el siguiente producto asome parcialmente en el borde. Eso le indica al usuario que hay más productos deslizando, en lugar de que crea que lo que ve es todo. Es un detalle pequeño que mejora mucho la usabilidad.

Preguntas frecuentes sobre el carrusel swipe de productos

¿Necesito un plugin para el swipe horizontal?

No, esa es la ventaja de esta técnica. Solo necesitas el módulo de productos de Divi y un fragmento de CSS personalizado. No añades ningún plugin, lo que mantiene tu sitio más ligero.

¿Funciona también en escritorio?

Puedes activarlo donde quieras, pero suele tener más sentido en móvil y tablet. En escritorio, donde hay espacio horizontal, la cuadrícula tradicional funciona bien. Con media queries decides en qué tamaños se activa el swipe.

¿El swipe afecta el SEO de los productos?

No. Los productos siguen estando en el HTML como siempre; solo cambia su presentación visual con CSS. Google puede rastrearlos e indexarlos con normalidad.

¿Necesito saber CSS?

El CSS está listo para copiar y pegar. Solo asignas la clase al módulo y pegas el código. Entender qué hace cada regla te ayuda a ajustarlo, pero no es indispensable para replicar el resultado.

Conclusión

Un carrusel horizontal tipo swipe da a tus categorías de producto una experiencia móvil moderna y cómoda, similar a la de las grandes apps de tiendas, y todo sin añadir plugins. Con el módulo de productos de Divi, una clase CSS y el código que dejo en los recursos, transformas un listado vertical en un carrusel deslizable. Activa el efecto en móvil y tablet, añade una pista visual de deslizamiento y tendrás una tienda con una navegación de producto mucho más atractiva.

🎓 ¿Quieres una tienda WooCommerce con experiencia de compra de primer nivel?
En uxdivi.com/cursos tienes el Curso de Tiendas Online con Divi 5 y WooCommerce donde construimos la tienda completa, optimizada para vender en cualquier dispositivo. Accede como suscriptor y lleva tu tienda al siguiente nivel.

Recursos y descargas del tutorial

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐