Ir al contenido
GloboGlobo Docs
Instalar la app
Español

Barra inferior móvil

Agrega una barra fija de iconos, parecida a una app, con accesos rápidos y acciones para tus compradores.

Guía práctica Pro Navigation 10 min de lectura

La barra permanece en pantalla mientras los compradores se desplazan, como la barra de pestañas de una app móvil, y da acceso con un toque al inicio, el menú, el carrito, la búsqueda, el chat o una llamada. Un elemento también puede abrir un pequeño submenú, como un elemento More con enlaces a la cuenta, el contacto y las preguntas frecuentes.

El editor de la barra inferior: pestañas de ajustes (1) y vista previa en vivo (2). Cambia el dispositivo de la vista previa con los botones de la parte inferior izquierda de la vista previa.

Las pestañas de ajustes son Elementos de menú, General, Tipografía, Colores, Posición, Avanzado e Historial de versiones.

Crear una barra inferior

  1. Crea la barra

    En la página Inicio de la app, haz clic en Agregar navegación inferior, o en Administrador de menú, haz clic en Crear menú y elige Barra inferior móvil.

    Inicio: (1) acciones rápidas para crear o importar un menú, (2) el botón que activa la integración de la app

  2. Configura los elementos

    En Elementos de menú, edita los elementos predeterminados y agrega los tuyos. Consulta Agregar y editar elementos.

    El editor de la barra inferior: pestañas de ajustes (1) y vista previa en vivo (2). Cambia el dispositivo de la vista previa con los botones de la parte inferior izquierda de la vista previa.

  3. Da estilo a la barra

    Ajusta las pestañas General, Tipografía y Colores. Consulta Dar estilo a la barra.

    Ajustes generales, incluidos la posición y el estilo de apertura del submenú.

  4. Elige dónde aparece

    En Posición, elige los dispositivos y la posición en pantalla. Consulta Elegir dónde aparece la barra.

    Activa la barra en móvil (1) y en escritorio (2) y elige una posición.

  5. Guarda y publica

    Haz clic en Guardar y luego en Publicar, arriba a la derecha. Consulta Publicar la barra.

Agregar y editar elementos

  1. Muestra las acciones del elemento

    En Elementos de menú, pasa el cursor sobre un elemento para mostrar Editar, Duplicar y Eliminar. Arrastra un elemento por su asa para reordenarlo.

    Pasa el cursor sobre un elemento para editarlo, duplicarlo o eliminarlo.

  2. Agrega elementos y submenús

    Haz clic en Agregar elemento para agregar un elemento en ese nivel, o en Agregar submenú en un elemento para anidar elementos bajo él. Los elementos anidados se abren como un submenú, hasta tres niveles.

  3. Define el icono, el título y el enlace

    Haz clic en Editar para abrir Editar elemento del menú. Elige un Icono (haz clic en Cambiar), escribe un Título y haz clic en el campo Enlace.

    Haz clic en el campo Enlace para elegir la acción del elemento.

  4. Elige una acción

    En Seleccionar enlace, haz clic en Seleccionar junto a una acción (1). El cuadro Enlace (2) recibe el comienzo del enlace, por ejemplo /collections/ para Productos por colección. Complétalo como se muestra en la columna SINTAXIS, por ejemplo /collections/summer-sale, y haz clic en Actualizar (3).

    Haz clic en Seleccionar (1), completa el enlace (2) y haz clic en Actualizar (3).

Ajustes del elemento

Icono
Haz clic en Cambiar para elegir un icono o subir una imagen.
Título
El texto bajo el icono.
Enlace
Qué ocurre al tocar. Haz clic en él para abrir Seleccionar enlace (consulta Acciones de los elementos).
Abrir en una pestaña nueva
Abre el enlace en una pestaña nueva del navegador.
Descripción
Texto breve opcional que se muestra con el elemento.
Tamaño de icono
Tamaño del icono en px.
Caja > Radio del borde
Redondea las esquinas de la caja del elemento, de 0 a 100 px.
Caja > Relleno de la caja
Espacio dentro de la caja del elemento, de 0 a 100 px.
Caja > Posición
Mueve el elemento a la izquierda (negativo) o a la derecha (positivo), de -100 a 100 px.
Color
Colores de texto, icono, fondo del icono y fondo solo para este elemento, cada uno con un color al pasar el cursor. Restablecer ajustes vuelve a los colores de la barra.
Insignia
Una pequeña etiqueta en el elemento, con Título, Color del texto de la insignia y Color de fondo de la insignia.
Visibilidad
Oculta el elemento en algunos dispositivos o para algunos compradores, o lo muestra solo entre dos fechas. Consulta Reglas de visibilidad.
Avanzado
Nombre de clase adicional agrega una clase CSS para CSS personalizado. Dividir agrega una línea divisoria junto al elemento.

Acciones de los elementos

Seleccionar enlace agrupa las acciones en ocho secciones. Haz clic en el icono de información junto a una acción para ver un ejemplo.

1. Link to your store internal pages
URL corta exacta /[your-url], Página de inicio /, Todos los productos /collections/all, Productos por colección /collections/[collection-handle], Un detalle del producto /products/[your-product-shorturl], Todas las publicaciones del blog /blogs/news, Un detalle de las publicaciones del blog /blogs/news/[your-blog-shorturl], Un detalle de la página /pages/[your-page-shorturl], Página del carrito /cart, Página de búsqueda /search, Formulario de contacto /pages/contact.
2. Open panels (Compatible with popular themes)
Abrir menú (móvil) gm-open:MobileMenu, Carrito abierto gm-open:Cart, Búsqueda abierta gm-open:Search.
3. Open other applications (E.g. Shopify inbox...)
Abrir cuadro de chat gm-open:Inbox abre el chat de Shopify Inbox.
4. Scroll on page
Vuelve al comienzo gm-scroll:Top, Desplazarse hasta el final gm-scroll:Bottom, Desplazarse a un elemento de la página gm-scroll:OnPage(htmlElement).
5. Call javascript function
gm-javascript:Function ejecuta una función de JavaScript en tu sitio.
6. Support tools
Hacer una llamada telefónica tel:, Enviar un mensaje SMS sms:, Enviar un correo electrónico mailto:, Chatear con Messenger, Whatsapp, Telegram, Line o Zalo.
7. Share
Copiar URL actual gm-share:CopyUrl, Compartir en Facebook gm-share:Facebook, Compartir en X (Twitter) gm-share:X.
8. Link to extend websites
URL completa (cualquier dirección web completa), No redireccionar #.
Secciones 2 a 4: abrir paneles, otras apps y desplazamiento.
Secciones 5 y 6: JavaScript y herramientas de soporte.
Secciones 7 y 8: compartir y enlaces externos.

Ejemplos:

  • gm-scroll:Top(150): se desplaza al principio, dejando un margen de 150 px.
  • gm-scroll:OnPage(#page-title): se desplaza al elemento con el ID page-title.
  • tel:+0123456789: llama a este número.
  • sms:+012345678?body=I need help: abre un SMS con el texto rellenado.
  • https://wa.me/0123456789: abre un chat de WhatsApp. Usa el código de país, sin +.

Dar estilo a la barra

Ajustes generales, incluidos la posición y el estilo de apertura del submenú.

Menú principal (Nivel 1)

Menú redondeado
Radio de las esquinas de la barra, de 0 a 50 px.
Espaciado entre elementos
Espacio entre elementos, de 0 a 50 px.
Relleno horizontal · Relleno vertical
Espacio horizontal y vertical dentro de cada elemento, de 0 a 100 px.
Usar la sombra del cuadro
Agrega una sombra alrededor de la barra.

Submenú (Nivel 2, 3)

Posición del submenú
Izquierda, Derecha, Centro o ancho Completo.
Estilo de apertura del submenú
Desplegable o Deslizante.
Ancho del submenú
De 100 a 900 px.
Relleno horizontal · Relleno vertical
Espacio horizontal y vertical dentro de cada elemento del submenú, de 0 a 100 px.

Icono y texto

Tamaño de icono · Tamaño del icono del submenú
Tamaños de icono de la barra y de sus submenús, de 0 a 100 px.
Espacio en el menú principal: texto - icono · Espacio en el submenú: texto - icono
Espacio entre el icono y el texto, de 0 a 50 px.

Avanzado

Ocultar el texto del menú
Solo iconos en la barra.
Ocultar el texto del submenú
Solo iconos en los submenús.
Ocultar la descripción del submenú
Oculta las descripciones de los elementos en los submenús.

Elegir dónde aparece la barra

  1. Elige los dispositivos

    En Posición, activa Mostrar en el móvil (1), Mostrar en el escritorio (2), o ambos.

    Activa la barra en móvil (1) y en escritorio (2) y elige una posición.

  2. Elige una posición

    Haz clic en un diseño bajo cada interruptor:

    • Móvil: Abajo, Arriba, Centro izquierda, Centro derecha, Abajo a la izquierda o Abajo a la derecha.
    • Escritorio: Parte inferior central, Abajo a la izquierda, Abajo a la derecha, Ancho inferior completo, Centro izquierda o Centro derecha.

  3. Ocúltala al desplazarse (opcional)

    Selecciona Ocultar al desplazarse hacia abajo para que la barra no tape el contenido mientras el comprador se desplaza hacia abajo.

Ajustes avanzados

Disponibilidad por mercado
Muestra la barra solo en los mercados seleccionados. Consulta Mostrar menús por mercado.
Índice z del menú
Orden de apilamiento. Aumenta el valor si otros elementos tapan la barra; redúcelo si la barra tapa ventanas emergentes.
Opacidad del menú
Transparencia de la barra, de 0 a 100%.
Margen inferior
Espacio entre la barra y la parte inferior de la pantalla.
Hoja de estilo/CSS
CSS personalizado para la barra.
JavaScript
JavaScript personalizado para la barra.

Reglas de visibilidad

Dónde Ajuste Efecto
Pestaña Posición Mostrar en el móvil, Mostrar en el escritorio Muestra u oculta toda la barra según el dispositivo.
Pestaña Avanzado Disponibilidad por mercado Muestra toda la barra solo en los mercados seleccionados.
Elemento > Visibilidad Ocultar en el escritorio, Ocultar en el móvil Oculta un elemento en un dispositivo.
Elemento > Visibilidad Ocultar al iniciar sesión, Mostrar solo cuando se inicia sesión Muestra un elemento solo a los invitados, o solo a los clientes con sesión iniciada.
Elemento > Visibilidad Programar publicación Muestra un elemento solo entre Fecha de inicio y Fecha de fin.

Publicar la barra

  1. Publica

    Haz clic en Guardar y luego en Publicar, arriba a la derecha, elige el tema y confirma. El cuadro de diálogo funciona como en un mega menú (consulta Publicar un menú). El estado cambia de Borrador a Activo.

    Cuadro de diálogo Publicar menú: (1) Escoge un tema, (2) Vista previa y Publicar

  2. Revisa tu tienda online

    Abre tu tienda online en un teléfono o en una ventana estrecha del navegador.

Cambiarla o quitarla

  • Quitarla de tu tienda online: haz clic en Desactivar en la parte superior del editor.
  • Restaurar una versión anterior: abre la pestaña Historial de versiones. Consulta Historial de versiones.

Solución de problemas

La barra no aparece en mi tienda online

La barra se carga mediante el app embed, como todos los menús. Asegúrate de que el app embed esté activado para ese tema; consulta Activar el app embed.

Una acción de Abrir paneles no hace nada

Las acciones de Open panels abren el cajón de menú, el cajón del carrito o la búsqueda de tu propio tema, así que funcionan con los temas populares. Si en el tuyo no ocurre nada, enlaza a la página (por ejemplo Página del carrito /cart) o contáctanos.

La barra se superpone a un botón de chat o a un banner de cookies

Aumenta el Margen inferior o cambia el Índice z del menú en la pestaña Avanzado, o elige otra posición en la pestaña Posición.

¿Te ha sido útil?

Informar de un problema