Qué vas a lograr
- Insertar los bloques Productos y Categorías en una página del Page Builder v2.
- Configurar un slider de productos usando últimos productos, productos específicos, categorías o marcas.
- Configurar una grilla visual de categorías entendiendo que en Flobu este bloque se arma manualmente con imágenes y enlaces.
Paso a paso en Flobu
Cómo funciona la interfaz de Flobu en este tutorial
- Menú lateral: para este tutorial ya debes estar dentro del Page Builder v2, trabajando en una página con al menos una sección disponible.
- Panel central: usarás el canvas para revisar la vista previa del slider y de la grilla, y para editar el título del bloque Productos.
- Acciones clave: insertarás los bloques desde Añadir o Agregar bloque, y luego usarás el inspector derecho para definir fuente de datos, cantidad, ítems, imágenes y enlaces.
- Alcance de este tutorial: aquí te enfocarás en los dos bloques de comercio del editor. No crearás productos, categorías ni marcas nuevas desde esta pantalla.
1) Insertar los bloques correctos y reconocer sus nombres reales
- Abre una página dentro del Page Builder v2.
- Ubica la sección y la columna donde quieras mostrar catálogo destacado.
- Haz clic en Agregar bloque o abre la pestaña Añadir.
- Busca el bloque Productos.
- Insértalo en la zona donde quieras mostrar tarjetas del catálogo.
- Luego repite el flujo y busca el bloque Categorías.
Hay un matiz importante de la interfaz: en el roadmap se habla de product slider y category grid, pero en la biblioteca real de Flobu los verás como Productos y Categorías.
- Cuando insertas Productos, el editor muestra un carrusel conectado al catálogo real de tu tienda.
- Cuando insertas Categorías, el editor muestra una grilla visual de cuadros. Este bloque no trae categorías automáticamente desde el catálogo; cada cuadro se arma con una imagen y un enlace.
Por eso conviene pensar estos bloques como dos herramientas distintas: Productos para mostrar inventario real, y Categorías para construir accesos visuales dentro de la página.
Si hace falta, cambia entre Escritorio, Tablet y Móvil para decidir mejor dónde te conviene dejar cada uno.
Resultado esperado:
- Insertaste los bloques Productos y Categorías en la página.
- Entendiste que la UI real usa esos nombres y que cada bloque cumple una función distinta dentro del sitio.
2) Configurar el bloque Productos con la fuente correcta del catálogo
- Haz clic sobre el bloque Productos.
- En el inspector derecho verás primero Largo de la lista. Ese selector define cuántas tarjetas intentará mostrar el slider; en la interfaz actual puedes elegir entre 1 y 15.
- Debajo encontrarás Fuente de Productos. Flobu ofrece cuatro modos:
- Últimos productos
- Productos específicos
- Productos de categorías
- Productos de marcas
- Si eliges Últimos productos, el bloque no pide selecciones manuales. Solo mostrará los productos más recientes disponibles en tu tienda según el límite que definiste.
- Si eliges Productos específicos, aparecerá el selector Seleccionar productos. Al abrirlo, Flobu muestra un buscador y una lista con checkboxes; puedes buscar por nombre y marcar varios productos. El botón del selector te mostrará cuántos ítems llevas seleccionados.
- Si eliges Productos de categorías, el flujo es similar pero buscando categorías.
- Si eliges Productos de marcas, harás lo mismo con marcas.
Importante: al cambiar Fuente de Productos, Flobu puede pedir confirmación porque ese cambio borra las selecciones del modo anterior.
Este bloque no ordena manualmente tarjeta por tarjeta dentro del editor. Tú defines la fuente y el límite; luego Flobu consulta el catálogo real y muestra los productos que correspondan. Si el filtro no encuentra productos, el slider puede quedar sin tarjetas útiles. Mientras carga, el editor muestra placeholders temporales.
El título del bloque también es especial: no se edita desde el inspector lateral. Debes escribirlo directamente en el canvas, en la parte superior del bloque.
Cuando el resultado te convenza, revisa la vista en Escritorio, Tablet y Móvil. El comportamiento real del slider cambia por ancho: en móvil tiende a mostrar menos tarjetas visibles; en escritorio puede llegar a varias más por fila.
Resultado esperado:
- Configuraste el bloque Productos con una fuente coherente y un límite de tarjetas adecuado.
- Entendiste que el slider trabaja sobre el catálogo real de la tienda y que su título se edita directamente en el canvas.
3) Configurar la grilla Categorías ítem por ítem
- Haz clic sobre el bloque Categorías.
- En el inspector derecho verás el panel Ítems. Normalmente, al insertar este bloque ya tendrás una base inicial de ítems para editar, cada uno listado como Ítem 1, Ítem 2, Ítem 3, y así sucesivamente.
- Haz clic en uno de esos ítems para activarlo. Cuando un ítem queda activo, Flobu abre su panel específico debajo con dos campos:
- Imagen
- Enlace del ítem
- Para la imagen, puedes usar Agregar, Cambiar o Quitar. Flobu abrirá el gestor multimedia para elegir un archivo ya cargado o subir uno nuevo.
- Luego completa Enlace del ítem con la ruta o página que quieras abrir al hacer clic.
- Repite el mismo flujo con cada cuadro de la grilla.
- Si necesitas más tarjetas, usa Agregar nuevo ítem.
- Si te sobra una, puedes eliminarla desde el ícono de basura.
- También puedes cambiar el orden desde el ícono de agarre en la lista de ítems.
Importante: el bloque Categorías no se sincroniza con tus categorías reales de productos. No trae nombre, foto ni URL automáticamente desde el catálogo. En la práctica, es una grilla manual de imágenes clicables. Si quieres usarla como acceso a colecciones, debes definir tú mismo cada enlace.
Este bloque tampoco tiene título, descripción ni texto por ítem. Si necesitas texto visible, deberás combinarlo con otros bloques de la página.
Otros detalles a tener en cuenta:
- Si dejas un ítem sin imagen, Flobu mostrará un placeholder visual.
- Si dejas el enlace en #, el cuadro seguirá existiendo, pero no llevará a un destino útil para el cliente.
Por eso conviene validar cada tarjeta antes de publicar. Revisa al final la grilla en Escritorio, Tablet y Móvil; su distribución cambia según el ancho de pantalla, pero sigue siendo una grilla visual compacta.
Resultado esperado:
- Configuraste la grilla Categorías con imágenes y enlaces funcionales.
- Entendiste que este bloque se arma manualmente y que no reemplaza un listado automático de categorías del catálogo.
Checklist final rápido
- Inserté el bloque Productos.
- Ajusté Largo de la lista.
- Revisé Fuente de Productos y dejé el modo correcto.
- Si hacía falta, seleccioné productos, categorías o marcas desde el selector múltiple.
- Edité el título del bloque Productos directamente en el canvas.
- Inserté el bloque Categorías.
- Revisé al menos un ítem de la grilla.
- Cargué una imagen para cada cuadro importante.
- Configuré Enlace del ítem en cada tarjeta que deba ser clicable.
- Validé ambos bloques en Escritorio, Tablet y Móvil.
Errores comunes
- Buscar "Product Slider" o "Category Grid" con el nombre exacto del roadmap dentro de la biblioteca. En la UI real los verás como Productos y Categorías.
- Pensar que el bloque Productos sirve para crear o editar productos. Ese bloque solo muestra el catálogo existente de tu tienda.
- Cambiar Fuente de Productos sin notar la advertencia. Si cambias de modo, Flobu puede borrar las selecciones del modo anterior.
- Intentar editar el título del slider desde el inspector lateral. En este bloque el título se escribe directamente en el canvas.
- Suponer que Categorías carga automáticamente tus categorías reales con imagen y enlace. En Flobu ese bloque es manual: imagen más enlace por ítem.
- Dejar "Enlace del ítem" en # y pensar que ya quedó listo. El cuadro puede verse bien, pero no llevará al cliente a una página útil.
- Publicar la grilla con placeholders esperando completarla después. Si faltan imágenes o enlaces, el resultado puede verse incompleto o poco claro para el cliente.