Configurar bloques de Productos y Categorías

Qué vas a lograr

• Agregar un bloque de Productos conectado al catálogo de la tienda.
• Elegir si mostrar últimos productos, productos específicos, categorías o marcas.
• Crear una grilla de Categorías con imágenes, textos y enlaces.

---

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: dentro del editor visual, usa Añadir o Agregar bloque.
• Panel central: selecciona cada bloque y revisa la vista previa.
• Panel derecho: editarás fuente de productos, cantidad, categorías, enlaces y presentación.
• Acción clave: revisa escritorio, tablet y móvil antes de Publicar cambios.

1) Agregar los bloques correctos

1. Abre la página que quieres editar.
2. Elige la sección donde quieres mostrar el catálogo.
3. Haz clic en Añadir o Agregar bloque.
4. Busca Productos dentro de Comercio.
5. Agrega el bloque y selecciónalo.
6. Repite el proceso con Categorías si quieres mostrar accesos visuales a colecciones.

Resultado esperado: tienes un bloque para mostrar productos y otro para mostrar categorías o accesos visuales.

2) Configurar el bloque Productos

1. Selecciona el bloque Productos.
2. En Fuente de productos, elige una opción: Últimos, Productos, Categorías o Marcas.
3. Si eliges Productos, usa Seleccionar productos.
4. Si eliges Categorías, usa Seleccionar categorías.
5. Si eliges Marcas, usa Seleccionar marcas.
6. En Cantidad, define Productos a mostrar.
7. En Presentación, ajusta la Alineación del título.
8. En Tarjetas visibles, define cuántas tarjetas se ven en Mobile, Tablet y Desktop.
9. Activa o desactiva Mostrar flechas y Mostrar paginación.
10. Edita el título del bloque directamente en la vista previa.

Resultado esperado: el bloque muestra productos publicados según la fuente elegida y con una cantidad adecuada por dispositivo.

3) Configurar el bloque Categorías

1. Selecciona el bloque Categorías.
2. En el panel Categorías, usa Buscar categoría real para agregar una categoría existente.
3. También puedes usar Agregar categoría para crear una tarjeta manual.
4. Haz clic en una tarjeta de la lista para editarla.
5. En Categoría real, puedes buscar una categoría y autocompletar la tarjeta.
6. En Texto, ajusta el Título visible y el Subtítulo opcional.
7. En Imagen, usa Agregar, Cambiar o Quitar.
8. En Enlace, completa el Enlace de la categoría si la tarjeta debe abrir una página.
9. En Presentación, revisa Columnas visibles, Separación, Proporción, Recorte, Posición, Radio, Labels e Intensidad del overlay.
10. Ordena, duplica o elimina tarjetas desde la lista si lo necesitas.

Resultado esperado: la grilla muestra categorías con imagen, texto y enlaces útiles para el cliente.

---

Checklist final rápido

• Agregué el bloque Productos.
• Elegí la Fuente de productos correcta.
• Definí Productos a mostrar.
• Revisé tarjetas visibles en Mobile, Tablet y Desktop.
• Agregué el bloque Categorías.
• Agregué categorías reales o tarjetas manuales.
• Revisé imagen, texto y enlace de cada tarjeta importante.
• Probé la vista en escritorio, tablet y móvil.
• Publiqué los cambios.

---

Errores comunes

• Buscar "Product Slider" o "Category Grid". En Flobu estos bloques aparecen como Productos y Categorías.
• Esperar que el bloque Productos cree productos nuevos. Este bloque solo muestra productos que ya existen y están publicados.
• Cambiar la Fuente de productos sin revisar selecciones anteriores. Al cambiar de fuente, puedes perder la selección actual.
• Dejar una fuente sin productos disponibles. El bloque puede mostrarse vacío si no hay resultados.
• Crear tarjetas de Categorías sin enlace. Se verán, pero no llevarán al cliente a ninguna página.
• Usar imágenes muy distintas entre sí. La grilla se ve mejor con imágenes de proporción similar.
• Publicar sin revisar móvil. La cantidad de tarjetas y columnas cambia según el ancho de pantalla.