Ir al contenido
GloboGlobo Docs
Instalar la app
Español

Agregar una posición de menú personalizada

Muestra el menú exactamente donde quieras agregando tu propio contenedor al código del tema.

Guía práctica Todos los planes 2 min de lectura

Úsalo cuando tu tema no tenga un elemento de menú donde quieres el menú, o su encabezado esté demasiado personalizado para las otras opciones de Posición. Agregas un contenedor vacío al código del tema y luego apuntas Mostrar el menú en este selector CSS a él.

Agregar los contenedores y apuntar la app a ellos

  1. Abre el código del tema

    Ve a Tienda online > Temas, haz clic en … en el tema y elige Editar código.

  2. Agrega los contenedores del menú

    Pega un contenedor vacío donde deba aparecer cada menú y haz clic en Guardar. Sirve cualquier ID; estos son ejemplos:

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • Escritorio: normalmente en el archivo de la sección del encabezado (por ejemplo sections/header.liquid), donde debe ir la navegación.
    • Móvil: normalmente en el archivo del menú lateral de tu tema, o en layout/theme.liquid.

  3. Introduce los contenedores en la app

    En el editor de menús, abre la pestaña Ajustes y elige Mostrar el menú en este selector CSS en Posición. Introduce #GloboDesktopMenu en Selector CSS de tu menú principal y #GloboMobileMenu en Selector CSS de tu menú móvil.

    Introduce los IDs de tus contenedores en los dos campos de selector CSS

  4. Guarda, publica y comprueba

    Haz clic en Guardar y luego publica el menú. Comprueba tu tienda en escritorio y en móvil.

Conviene saber

  • Un solo formato: agrega un único contenedor y deja vacío el otro campo.
  • El contenido existente se reemplaza: la app rellena cada contenedor y reemplaza todo lo que haya dentro.
  • El menú de tu tema permanece: ocúltalo o quítalo en el código o en los ajustes del tema si no quieres ambos.
  • Por tema: las ediciones de código solo se aplican al tema que editaste. Vuelve a agregar los contenedores si cambias o actualizas tu tema.

Solución de problemas

El menú móvil no aparece

Puede que tu tema construya el menú lateral más tarde con JavaScript. Mueve el contenedor móvil a código que esté siempre en la página, como layout/theme.liquid.

No se muestra nada

Comprueba que la integración de la app esté activada en este tema. En la consola de tu navegador, comprueba que document.querySelector('#GloboDesktopMenu') encuentre tu contenedor.

¿Te ha sido útil?

Informar de un problema