El menú de navegación juega un papel importante en la efectividad del embudo de clientes, pero solo el 16% de los sitios web de comercio electrónico tienen suficientes tipos de filtrado, un diseño atractivo y una lógica clara.
Así que decidimos investigar cómo crear un menú de navegación conveniente con filtros y controles deslizantes.
Resumen del artículo [ ocultar ]
- ¿Cómo editar el menú de navegación predeterminado de Magento 2?
- ¿Cómo editar la navegación superior en Magento 2?
- Nivel 1
- Nivel 2
- Nivel 3
- Nivel 4
- ¿Cómo cambiar los filtros predeterminados en tu Magento?
- ¿Cómo personalizar la navegación de precios?
- ¿Cómo editar la navegación superior en Magento 2?
- ¿Cómo crear un menú de navegación en capas personalizado en Magento 2?
- Navegación en capas Lite
- Navegación en capas mejorada
- Navegación en capas Premium
- Enlaces útiles de navegación de Magento
Magento predeterminado tiene una navegación en capas incorporada. Te permite establecer filtros por cualquier atributo del producto, como categoría o precio. Analicemos el asunto.
El menú superior de su sitio web Magento 2 representa la estructura del catálogo. Puede tener hasta 4 niveles de anidamiento:
Nivel 1
El primer nivel es la categoría predeterminada. Su nombre no aparece en el menú de navegación de la barra lateral de Magento.
Nivel 2
El segundo nivel es el menú principal que se muestra en la interfaz. En el tema predeterminado de Luma, este nivel incluye categorías como «Novedades», «Mujeres», «Hombres», «Equipo», «Entrenamiento» y «Oferta».
Nivel 3
En el tercer nivel, puede dividir las categorías principales en varias secciones. Por ejemplo, los electrodomésticos pueden incluir lavadoras y lavavajillas.
Nivel 4
El cuarto nivel ofrece subcategorías aún más estrechas. Por ejemplo, las lavadoras se pueden segmentar por marcas.
Para configurar la profundidad de tu menú superior, sigue estos pasos:
# 1 Inicie sesión en el panel de administración y vaya a Tiendas > Ajustes > Configuración .
# 2 En la pestaña Catálogo , elija Catálogo y vaya a la sección Navegación superior de categoría .
# 3 En el campo Profundidad máxima , ingrese la cantidad de subcategorías que desea mostrar en la navegación superior.
# 4 Guarde los cambios.
→ Vea cómo configurar un poderoso mega menú en 3 minutos
¿Cómo cambiar los filtros predeterminados en tu Magento?
#1. Digamos que su cliente quiere encontrar pantalones cortos azules. Para activar el filtrado por colores (o cualquier otro atributo) vaya a Tiendas>Atributos>Producto :
#2. Luego busque un atributo de «color» en la cuadrícula:
#3. Como puede ver, no se usa en el sistema de navegación. Vamos a encenderlo. Haga clic en él para editar y vaya a Información de atributo > Propiedades de escaparate . Allí verás los siguientes ajustes:
#4. Elija una de las dos opciones: filtrable (con resultados) o filtrable (sin resultados) , en la línea Usar en navegación por capas . La primera opción muestra solo aquellos filtros para los que se pueden encontrar productos coincidentes y la segunda muestra todos los filtros posibles. Establezca Sí en Uso en la navegación por capas de resultados de búsqueda y configure la Posición de este atributo en el bloque de navegación.
#5. Después de eso, debe convertir la categoría en un ancla. Para ello, vaya a Catálogo > Categoría y seleccione la categoría necesaria del árbol de categorías.
#6. En la sección Configuración de pantalla , busque la línea de anclaje y configure Sí:
Guarde los cambios y vaya a la interfaz para probar el resultado. Obtendrás un resultado similar:
Magento ofrece 3 tipos de navegación de precios:
- Automático (Ecualizar rangos de precios);
- Automático (Ecualizar recuentos de productos);
- Manual.
Los dos primeros métodos calculan los pasos de navegación automáticamente por rangos de precio o por número de producto. Y el método Manual le permite establecer el valor del paso de navegación.
#1. Vaya a Tiendas > Ajustes > Configuración:
#2. Elija Catálogo en la pestaña Catálogo :
#3. Abra la pestaña Navegación en capas y configure las opciones que necesita:
Guarde las configuraciones.
Pero, ¿y si quieres configuraciones más avanzadas?
Si desea ampliar la configuración predeterminada de Magento 2, puede utilizar una de las extensiones del menú de navegación superior de Magento. Considerémoslos en detalle.
Layered Navigation Lite es el módulo que amplía la configuración predeterminada de Magento 2. ¿Cuales son los beneficios?
- Utiliza el filtrado AJAX para proporcionar una navegación rápida de los resultados. Supongamos que su cliente está buscando la sudadera con capucha blanca. Por lo general, si eligen el color blanco, la página se recarga. Pero con la tecnología AJAX solo se recargará la parte que cambie.
- Este módulo proporciona múltiples opciones de filtros. Por ejemplo, un usuario busca una sudadera de algodón o polar. Para que puedan elegir ambos materiales en la sección de filtros y obtener resultados relevantes:
• Layered Navigation Lite tiene un diseño avanzado. Digamos que tiene una larga lista de materiales disponibles. Entonces puede agregar desplazamiento vertical para hacer que este filtro sea compacto. Además, muestra la cantidad de artículos que están disponibles en tu tienda y es totalmente compatible con dispositivos móviles.
• Deje que sus clientes establezcan el filtro de rango de precios. Este complemento le permite crear un práctico control deslizante de precios en Magento.
Y puede configurar fácilmente todas estas funciones útiles en su Panel de administración. Vaya a Tiendas>Configuración>Amasty Extensions>Control deslizante de precios y filtros :
Allí puede activar la tecnología AJAX y desplazarse en la parte superior después de que se actualicen los resultados. Elija los filtros para los que desea configurar la selección múltiple. Habilite el control deslizante de precios y configure cómo se mostrará configurando el paso de precio. Agregue desplazamiento vertical para bloques que superen cierto tamaño en píxeles.
→ Ir a Layered Navigation Lite
La versión pro de este complemento incluye todas las funciones que hemos descrito anteriormente y opciones avanzadas.
• La extensión tiene 5 modos de visualización para sus filtros: etiquetas, menú desplegable, imágenes, imágenes y etiquetas, muestras de texto. Con su ayuda, puede mejorar la experiencia del usuario.
• Si tiene varias opciones de filtrado, puede usar dependencias para mostrar solo los filtros necesarios y ocultar los demás.
• Para que sus filtros sean aún más convenientes, coloque la navegación en capas de Magento 2 horizontalmente y cree un mapeo de atributos. Por ejemplo, si tiene productos con un color similar pero diferentes tonos, puede combinarlos en una opción de filtrado mapeándolos en el panel de administración:
• El árbol de categorías avanzado le brinda la libertad de mostrar las subcategorías de la manera más conveniente eligiendo entre los modos desplegable y de etiquetas. Agregue botones «Ver más»/menos», control deslizante con subcategorías, permita que los compradores elijan varias subcategorías y más.
• Utilice filtros avanzados como «Nuevo», «En oferta», «Valoración», «En stock» o cree filtros personalizados:
• Además, la extensión incluye todas las funciones del módulo Comprar por marca como:
- control deslizante de marcas
- Páginas CMS con el contenido de la marca
- filtros de marca en la navegación
- Bloque «Más de esta etiqueta»
→ Ir a Navegación en capas mejorada
→ Consulte las preguntas y respuestas más populares en nuestras preguntas frecuentes sobre navegación en capas mejorada
Para tiendas con catálogos más grandes, ofrecemos Layered Navigation Premium. Este complemento combina el poder de Navegación en capas mejorada , Desplazamiento infinito y Brands Merchandiser .
Puede promocionar productos, marcas o grupos de productos específicos, use arrastrar y soltar para ordenar y anclar productos en una página de acuerdo con sus necesidades, habilitar la clasificación por nombre, stock, precio, más reciente. Haga que la selección de productos sea lo más fluida posible cargando automáticamente los resultados de búsqueda. Agregue los botones «Volver al principio» y «Cargar más».
→ Ir a Navegación por capas Premium
→ Magento 2 Layered Navigation: la mejor configuración para SEO
→ ¿No se muestra el menú de Magento 2?
→ Casos de uso de Mega Menu para Magento 2