Personalizar la interfaz de la página de inicio (6)
En cuanto a la implementación, sin duda querrás personalizar la apariencia de tu página de inicio para que se adapte a tu marca, productos y experiencia de usuario. En este artículo, exploraremos maneras de personalizar tu página de inicio.
Personalizar la interfaz de la página de inicio (6)
Introducción
Bagisto es una plataforma de comercio electrónico de código abierto construida sobre Laravel y Vue.js. Uno de los temas predeterminados más populares es Velocity – una interfaz moderna y ligera que admite muchas funciones para una página de ventas.
Sin embargo, en una implementación real, sin duda querrá personalizar la interfaz de la página de inicio para adaptarla a su marca, productos y la experiencia del usuario. En este artículo, exploraremos las formas de editar la página de inicio de Velocity en Bagisto.
1. Cómo organizar los bloques de contenido en la configuración del tema
Acceda a https://[su_dominio]/admin/settings/themes. Haga clic en “Sort Order” para organizar el orden de menor a mayor.
La interfaz se verá así:
Verá un total de 12 filas, lo que corresponde a los bloques de contenido de su página de inicio, como se muestra a continuación.
¿Nota algo inusual en la captura de pantalla anterior? Sí, se lo explicaré:
- Primero - Faltan los bloques 3, 4 y 7: Esto se debe a que aún no hemos creado categorías de productos ni configurado los productos para que aparezcan en la página de inicio, por lo que no hay datos para mostrar.
- Segundo - El bloque 12 se coloca encima del bloque 11: Esto se debe a que el bloque 11 tiene un «tipo» de «footer_links». Este tipo siempre se colocará al final del diseño del sitio web.
2. Tipos en la configuración del tema de Velocity
Cuando configure el tema en /admin/settings/themes, cada bloque en la interfaz de la página de inicio tiene su propio tipo. Comprender correctamente cada tipo le ayudará a organizar el contenido de forma lógica y a optimizar la experiencia del cliente.
A continuación se presentan 6 tipos importantes:
🛍️ Carrusel de productos
- Propósito: Mostrar una serie de productos en un formato de desplazamiento horizontal (carrusel).
- Uso para: Página de inicio o páginas de destino; para mostrar productos según criterios: Productos destacados, Novedades, Descuentos, Los más vendidos, etc.
- Configuración: Seleccionar una categoría o introducir manualmente las ID de los productos; introducir el título del bloque; especificar el número de productos a mostrar.
- Ejemplo: Similar a las secciones «Sugerencias para hoy» o «Productos destacados» que se deslizan horizontalmente en Shopee o Lazada.
📂 Carrusel de categorías
- Propósito: Mostrar una serie de categorías de productos en un formato de desplazamiento horizontal.
- Uso para: Ayudar a los clientes a acceder rápidamente a grandes grupos de productos (por ejemplo: Teléfonos, Portátiles, Moda, Cosméticos, etc.).
- Configuración: Seleccionar una categoría principal; especificar el número de subcategorías a mostrar.
- Ejemplo: El carrusel de categorías horizontal en la página de inicio de Tiki, que ayuda a los clientes a hacer clic rápidamente en los grupos de productos que les interesan.
📝 Contenido estático
- Propósito: Insertar contenido fijo (HTML, JavaScript o texto).
- Uso para: Banners promocionales; anuncios; presentación de la tienda; incrustar código de terceros (vídeos de YouTube, Google Maps, etc.).
- Configuración: Introducir texto o HTML directamente.
- Ejemplo: Un bloque de texto «Envío gratuito en todo el país - Devoluciones en 7 días» directamente en la página de inicio.
🖼️ Carrusel de imágenes
- Propósito: Mostrar una o varias imágenes en formato de control deslizante, con reproducción automática.
- Uso para: Grandes banners publicitarios en la parte superior de la página; una colección de imágenes que presentan productos o servicios.
- Configuración: Subir imágenes (tamaño estándar: 1920x600px); introducir enlaces acompañantes (si es necesario); elegir el orden de visualización; elegir si se reproduce automáticamente o no.
- Ejemplo: El control deslizante de banner principal en la parte superior de la página de inicio de la mayoría de los sitios web de comercio electrónico.
🔗 Enlaces de pie de página
- Propósito: Crear grupos de enlaces en el pie de página (footer).
- Uso para: Enlaces rápidos a páginas estáticas: Política de privacidad, Términos de servicio, Contacto, Acerca de nosotros, etc.
- Configuración: Introducir el título del grupo de enlaces (por ejemplo: «Acerca de nosotros»); introducir la lista de enlaces secundarios.
- Ejemplo: El pie de página de Shopee tiene secciones como: «Atención al cliente», «Acerca de nosotros», «Política de ventas», etc.
⚙️ Contenido de servicio
- Propósito: Mostrar servicios o compromisos en el pie de página.
- Uso para: Presentar los compromisos de una tienda: Entrega rápida, Atención las 24 horas, los 7 días de la semana, Pago seguro, etc.
- Configuración: Introducir el título del servicio; una breve descripción o un icono para la ilustración.
- Ejemplo: La sección «Nuestros servicios» en el pie de página: envío gratuito, devoluciones fáciles, atención al cliente las 24 horas, los 7 días de la semana.
✅ Así, cada tipo en la configuración del tema le ayuda a gestionar un bloque de contenido diferente en la página de inicio.
- Si desea mostrar productos → elija Carrusel de productos
- Si desea mostrar categorías → elija Carrusel de categorías
- Si desea mostrar banners de imágenes → elija Carrusel de imágenes
- Si desea añadir texto/HTML → elija Contenido estático
- Si desea gestionar los enlaces de pie de página → elija Enlaces de pie de página o Contenido de servicio
3. Cómo cambiar el logotipo y el favicon del sitio web
Acceda a https://[su_sitio_web]/admin/settings/channels/edit/1.
Busque el bloque Design y proceda a subir el logotipo y el favicon según sea necesario:
Así que, hemos aprendido cómo personalizar la interfaz de la página de inicio. En la siguiente parte, ¡empezaremos a practicar!
Deja un comentario