Como crear y configurar carruseles de productos en tu página de inicio

La correcta exhibición de productos en la página principal es vital para el éxito de tu comercio electrónico. En este tutorial técnico, abordaremos el procedimiento exacto para crear carruseles de productos en Qubia. A través de un flujo de trabajo estructurado, aprenderás desde la creación del contenedor del menú hasta la configuración avanzada de la cantidad de ítems a mostrar. Sigue cada instrucción detalladamente para asegurar una configuración exitosa.


Índice de contenido

  1. Gestión del menú superior
  2. Creación del contenedor del carrusel
  3. Asignación de productos al carrusel
  4. Activación y visualización final
  5. Configuración de cantidad de productos

Gestión del menú superior

Ingresa a la administración de Qubia con tus credenciales. En el panel principal, dirige tu atención a la tabla y haz clic en “Menú superior”. También puedes usar el botón anaranjado “Editar submenú” en la columna de acciones.

Esto te llevará al listado donde se estructura tu web. Por defecto, verás el submenú “Inicio“. Ubícate en esa fila y haz clic en su nombre o en el botón anaranjado de editar.


Creación del contenedor del carrusel

En esta vista se mostrarán los menús que actualmente están asociados a tu página de inicio. Para añadir uno nuevo, haz clic en el botón verde ubicado en la esquina superior izquierda de la tabla.

Esto te llevara a un formulario donde ingresaras información básica del menú que contendrá los productos de tu carrusel de productos.

En el campo Nombre, escribe el título que tendrá el carrusel en la pantalla de inicio (ejemplo: “Ofertas Relámpago”). También puedes añadir una Descripción si necesitas incluir detalles adicionales o notas internas (este paso es opcional).

En el selector de tipo de menú, selecciona de tipo productos.

En el apartado de casillas, selecciona la opción Sin color y desmarca Visible y Activo. Así, el carrusel permanecerá oculto en tu sitio web hasta que termines de configurarlo.

Una vez ingresada la información del menú, haz clic en en botón guardar ubicado en la esquina inferior izquierda del formulario

La página se actualizará mostrándote los datos que acabas de ingresar.

Vuelve a la sección anterior haciendo clic en la palabra “Inicio” ubicada en la barra de navegación superior (justo debajo del logotipo).

En la tabla de submenús de Inicio, verás el menú que acabas de crear. Verifica que las casillas Visible y Activo estén desmarcadas.


Asignación de productos al carrusel

Para agregar productos al carrusel tienes dos opciones. La primera es hacer clic en el botón verde con el icono de carrito para crear productos desde cero (puedes guiarte de nuestro FAQ específico para saber cómo hacerlo). La segunda opción, que detallaremos a continuación, es para productos existentes.

Si tienes productos ya creados y asignados a diversas categorías que deseas añadir a este carrusel, vuelve a la página principal haciendo clic en el breadcrumb “Páginas y Menús”.

En la tabla de menús de la página de inicio, localiza la fila llamada “Páginas reservadas” y haz clic en el botón anaranjado de submenú.

En esta vista ubica en la tabla la fila de Productos, haz clic en el nombre o en el boton verde con icono de carrito.

En esta vista podrás visualizar todos los productos existentes en tu sitio web.

Utiliza el buscador de la tabla ubicado en la parte superior. Puedes buscar el producto por su nombre o por su SKU. Una vez localizado, haz clic en el nombre del producto o en el botón gris con icono de lápiz para editarlo.

Nota: Si seleccionas productos agotados, estos no se mostrarán en el carrusel.

Se abrirá una vista con el formulario de edición del producto, el cual contiene varios acordeones. Despliega el acordeón titulado “Categorías y Visibilidad”.

Haz clic en el campo de categorías. Escribe el nombre del menú que creaste anteriormente (el carrusel) y selecciónalo del listado desplegable.

Una vez seleccionado, podrás notar que el nombre se agregará al campo visualizándose como un botón o etiqueta.

Nota: Puedes eliminar la categoría asignada haciendo clic en la ‘X’.

Haz clic en Guardar para actualizar la información del producto. Surgirá una notificación y serás redirigido automáticamente a la vista anterior. Repite esta acción con todos los productos que desees agregar a esta categoría específica.


Activación y visualización final

Vuelve al menú que creaste que contiene el carrusel de productos. Ahora este estará lleno con todos los productos que le asignaste en el paso anterior.

Nota: Los productos aparecerán en el carrusel en el mismo orden que tienen en esta tabla.

Regresa a la vista de Inicio donde se listan sus submenús. Ubícate en la fila del submenú que has creado y activa las casillas de Visible y Activo.

Esto se realiza con la finalidad de que ahora sean visibles públicamente en la página de inicio de tu sitio web.

Ahora dirígete a tu página de inicio. Puedes acceder a ella mediante su URL en una pestaña nueva de tu navegador, o puedes hacer clic en el botón con icono de ojo ubicado en la barra de herramientas superior de la administración.

Dependiendo de la posición del submenú en tu listado del administrador, esa será su posición en el front (parte visible) de la web. Con esto, ya tienes tu carrusel de productos personalizado.


Configuración de cantidad de productos

Para configurar el número de ítems o productos que se muestran en los carruseles de la página de inicio, accede nuevamente a la administración de Qubia. Ubica la barra de herramientas en la esquina superior derecha y haz clic en el icono de tuerca. Se desplegará un menú; activa el switch de “Opciones avanzadas” y luego haz clic en la opción “General”.

En esta vista tendrás todas las configuraciones globales del sitio. Deslízate hacia abajo y despliega el acordeón de “Configuración de carruseles de productos”.

Esta sección controla tanto los carruseles de la pagina de Inicio, como los de productos similares en la vista de detalle del producto. Como podrás notar, suele estar establecido por defecto en 10 ítems. Nos concentraremos en la opción “Número de producto por carrusel de menú padre”.

Haz clic en el número para cambiarlo. Puedes ingresar directamente en el campo la cantidad de productos que quieres mostrar o usar las flechas del campo para aumentar o disminuir las unidades. Luego, haz clic en el botón verde para guardar los cambios.

Surgirá una notificación del sistema indicando que el valor ha sido actualizado. Ahora dirígete a tu sitio web y podrás verificar el cambio en la cantidad de productos mostrados.


Has completado exitosamente la configuración de tus carruseles de productos. Siguiendo estos pasos, garantizas una presentación ordenada y profesional de tu catálogo, optimizando la experiencia de navegación para tus usuarios tanto en la creación del contenido como en su visualización final.