Publicación en Shopify
Paso 2: (Shopify) Publica el menú en tu sitio web.
I) MÉTODO 1: INSERTAR (ANTES O DESPUÉS) ESTE MENÚ EN UNA UBICACIÓN ESPECÍFICA EN TU SITIO WEB, O REEMPLAZAR UN MENÚ EXISTENTE, USANDO UN SELECTOR CSS. (RECOMMENDADO)
I.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 fácilmente 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ú.
I.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ú por método Insertar/Reemplazar”.
Paso 3: Selecciona el Selector CSS correcto y método de reemplazo/inserción
En esta guía, nos centraremos en 2 formas: insertar este menú debajo del encabezado o reemplazar el Mega Menú predeterminado. También puedes usar este método de manera creativa encontrando y aplicando otros selectores CSS para activar el menú.
¿Cómo insertar este menú debajo del encabezado del sitio web?
Para hacer esto, simplemente identifica el selector CSS del encabezado de tu sitio web e introdúcelo 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.
- Selectores CSS para algunos temas populares y gratuitos.. de Shopify como Dawn, Sense, Savor, Horizon..
header
- 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 reemplazar el Mega Menú predeterminado?
Para hacer esto, simplemente identifica el selector CSS del encabezado de tu sitio web e introdúcelo 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.
- Selectores CSS para algunos temas populares y gratuitos.. de Shopify como Dawn, Sense, Savor, Horizon..
.header-menu
- 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.
I.3. ¡Importante! Optimiza la velocidad del Mega Menú y la experiencia del usuario (modo de reemplazo)
Cuando reemplazas un menú por otro, Navi+ espera hasta que se muestre el menú antiguo y luego lo intercambia instantáneamente por el nuevo. Aunque esto sucede casi de inmediato, todavía hay un breve momento en el que aparece el menú antiguo, lo que puede confundir a los usuarios.
Con este paso, puedes ocultar completamente el menú antiguo y mostrar un efecto de carga en su lugar. Esto hace que el sitio web se sienta más rápido y mejora la experiencia del usuario.
Navi+ proporciona una solución simple para optimizar la experiencia del usuario y la velocidad como sigue
¿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 100 ms) 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:
- Shopify prioriza la carga de sus propios recursos primero.
- Luego Shopify carga el contenido del tema.
- 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 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í:
Nota:
- Agrega el sufijo (M) si deseas que se aplique solo en móvil.
- Agrega el sufijo (D) si deseas que se aplique solo en escritorio.
- No dejes sufijo si deseas que se aplique en ambas plataformas.
II) MÉTODO 2: AÑADIR ESTE MENÚ COMO UNA SECCIÓN/BLOQUE EN EL TEMA DE SHOPIFY
Este método inserta el menú añadiendo un Bloque/Sección en tu tema de Shopify. Es un enfoque tradicional, así que no lo describiré en detalle. Con este método, ni siquiera necesitas “Activar Navi+ en Integraciones de aplicaciones” como se requiere en el Paso 1 del Método 1.
Copia el ID de inserción de este menú, luego insértalo en el bloque llamado “Navi+ en Sección” en Secciones del tema. Puedes agregar un título, configurar el ancho completo y ajustar el margen para esta sección después de agregarla.
Guía para añadir este menú como una sección/bloque en el tema de Shopify
A continuación se presenta una guía detallada sobre cómo insertar un menú de Navi+ como una sección/bloque en tu tema de Shopify. Este método te permite agregar el menú de una manera estándar, compatible con Shopify, aunque no es tan flexible como los otros métodos proporcionados por Navi+.
Este método se aplica a Mega Menús y Menús de cuadrícula. NO SE APLICA a Tabbar, FAB o Menús deslizantes.
