Publicación en Shopify

Paso 2: (Shopify) Publica el menú en tu sitio web.

2.1. Activa Navi+ en Integraciones de aplicaciones

Paso 1: Haz clic en Tienda en línea, luego haz clic en Temas. Consejos: Haz clic derecho en Tienda en línea y selecciona “Abrir enlace en nueva pestaña” para ahorrar tiempo.

Paso 2: Selecciona el tema donde deseas publicar el menú.

Haz clic: Personalizar

  • Si tu sitio web es nuevo y aún no tiene usuarios, siéntete libre de publicar el menú sin preocupaciones; puedes activarlo o desactivarlo en cualquier momento sin afectar a los visitantes.
  • Si tu sitio web ya tiene tráfico regular, ten más cuidado. La mejor práctica es crear un Tema duplicado y probar Navi+ en esa versión primero.

Paso 3: Ve a Integraciones de aplicaciones, encuentra “Navi+ en todas las páginas” y actívalo.

Paso 4: No olvides hacer clic en “Guardar” para aplicar los cambios.

Después de estos 4 pasos, Navi+ se ha instalado en tu sitio web y está listo para mostrarse. Sin embargo, el proceso aún no está completo. Regresa a la pestaña de la aplicación Navi+ para activar realmente Publicar menú.

2.2. Selecciona la configuración de visualización y publica el menú.

Paso 1: Haz clic en el botón Publicar en el sitio web.

Paso 2: Activa el interruptor “Publicar menú (visible solo cuando lo abra el usuario)”.

Paso 3: Selecciona el método de visualización

Método 1: Abre este menú desde otro elemento del menú Navi+ usando la sintaxis open:NaviMenu

Este método te permite abrir un menú deslizante cuando el usuario hace clic o toca un elemento del menú de otro menú Navi+ (por ejemplo: en una barra de pestañas, un FAB en la esquina inferior de la pantalla, o un mega menú). Los principales propósitos de este método:

Propósito 1: Mejora de la visibilidad y la experiencia del usuario al mostrar el mapa del sitio completo en el menú deslizante mientras se mantiene fácil de acceder.

El menú deslizante es ideal para mostrar tu mapa del sitio completo gracias a su gran espacio y diseño flexible, lo que lo hace perfecto para mostrar todo el catálogo de productos, enlaces a páginas clave, blogs, herramientas de soporte, etc. Sin embargo, el menú deslizante a menudo es menos visible por defecto. Para mejorar la descubribilidad, puedes usar otro menú Navi+ (como una barra de pestañas) para presentar tus enlaces más importantes y reconocibles, y colocar un elemento de menú destacado que active el menú deslizante. Esto asegura una mejor visibilidad y compromiso del usuario para el menú deslizante.

Propósito 2: Profundidad de menú ilimitada con una estructura de menú grande y flexible (Solo Navi+)

En lugar de mostrar un popup con espacio limitado cuando se hace clic en un elemento del menú, puedes abrir otro menú deslizante con tres niveles y múltiples formas de presentar información. Esto se puede repetir para otros elementos del menú, o incluso para el mismo menú deslizante, permitiéndote crear una profundidad prácticamente ilimitada para tus menús Navi+.

Método 2: Cuando se hace clic o se toca un elemento de la interfaz de usuario (definido por un selector CSS como #id_of_element o .class_name), se mostrará este menú.

Este es, sin duda, el mejor y más comúnmente utilizado método con el Menú Deslizante.
En esta guía, nos centraremos en reemplazar el menú hamburguesa predeterminado del sitio web en dispositivos móviles.
También puedes aplicar este método de manera creativa encontrando y utilizando otros selectores CSS para activar el menú.

¿Cómo reemplazar el menú hamburguesa predeterminado de tu sitio web con el Menú Deslizante de Navi+ (Guía popular)?

En la mayoría de los sitios web de Shopify, el menú hamburguesa predeterminado se genera a partir de la versión de escritorio a través del diseño responsivo. Como resultado, suele ser muy simple, tiene poca profundidad y carece de soporte para íconos, imágenes o diseños avanzados. Reemplazarlo con un Menú Deslizante de Navi+ es una opción común y práctica para aprovechar las características avanzadas de Navi+.

Para hacer esto, simplemente identifica el selector CSS del ícono del menú hamburguesa de tu sitio web e ingrésalo en el cuadro de texto. Ya hemos encontrado los selectores CSS para algunos de los temas más populares para ti, que se enumeran a continuación.

  1. Selectores CSS para algunos temas populares y gratuitos.. de Shopify como Dawn, Sense, Savor, Horizon..
#Details-menu-drawer-container
  1. Si no está en esta lista, no te preocupes
- Puedes chatear con un soporte de Navi+ para obtener ayuda instantánea; esto solo toma unos minutos para encontrar el selector CSS.

- O, puedes seguir la guía de autoayuda en los siguientes temas (justo después de este tema).
¿Cómo encontrar el selector CSS en tu sitio web?

Puedes chatear con un soporte de Navi+ para obtener ayuda instantánea en lugar de hacerlo tú mismo.\ Sin embargo, (1) esto te ayudará a entender la idea principal, y (2) si deseas hacerlo por tu cuenta, sigue las instrucciones a continuación.

2.3. ¡Importante! Optimiza la velocidad del menú deslizante, agrega un efecto de carga y previene menús duplicados

No es algo que necesites arreglar de inmediato, pero a largo plazo es importante para la experiencia del menú deslizante creada por Navi+. Antes de que Navi+ reemplace completamente el antiguo menú deslizante, el menú original del tema sigue activo. Por un breve momento—alrededor de medio segundo—si un usuario carga el menú y toca rápidamente el botón de hamburguesa (un caso raro, pero aún posible), el antiguo menú del tema puede aparecer y causar un error visual.

Navi+ proporciona una solución simple para optimizar la experiencia del usuario y la velocidad como sigue pasos

¿Por qué necesitas hacer esto? ¿No es Navi+ ya rápido?

Navi+ es muy rápido. Está completamente desplegado en una CDN líder con muy baja latencia (alrededor de 100ms) y puede atender a millones de clientes sin desacelerarse.

Sin embargo, Navi+ aún funciona dentro del ecosistema de Shopify. Shopify tiene sus propias reglas de carga:

  1. Shopify prioriza la carga de sus propios recursos primero.
  2. Luego Shopify carga el contenido del tema.
  3. Finalmente, Shopify carga el contenido de la aplicación, pero no en ningún orden específico.

Esto significa que si estás utilizando múltiples aplicaciones, Navi+ puede a veces cargarse más tarde de lo esperado. Por eso puede sentirse más lento en ciertos casos.

¿Cuál es mi solución?

Actualmente, Navi+ tiene alta prioridad al cargarse en sitios web de Shopify. Sin embargo, todavía hay un cierto retraso. Abordaremos estos problemas uno por uno aquí:

Menú Deslizante: Agrega un efecto de carga y bloquea el selector de activación

Muy simple: solo ingresa el selector CSS que usas para el Menú Deslizante en la sección de integración de la aplicación Navi+ (ver imagen a continuación).

Nota:

  • Agrega el sufijo (M) si deseas que se aplique solo en móviles.
  • Agrega el sufijo (D) si deseas que se aplique solo en escritorio.
  • No dejes sufijo si deseas que se aplique en ambas plataformas.