Publicación en Shopify
Paso 2: (Shopify) Publica el menú en tu sitio web.
I) MÉTODO 1: INSERTE (ANTES O DESPUÉS) ESTE MENÚ EN UNA UBICACIÓN ESPECÍFICA EN SU SITIO WEB, O REEMPLACE UN MENÚ EXISTENTE, UTILIZANDO UN SELECTOR CSS. (RECOMENDADO)
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 una 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. Entendiendo el Selector CSS
Un Selector CSS es una forma de apuntar a un elemento HTML específico en tu página web. Navi+ lo utiliza para saber exactamente dónde colocar tu menú, ya sea para insertarlo antes o después de un elemento, o para reemplazar uno existente por completo.
Para encontrar el Selector CSS correcto para tu sitio web, puedes usar:
- Modo de depuración — herramienta integrada de Navi+: pasa el cursor sobre cualquier elemento y copia instantáneamente su selector
- Herramientas de desarrollo del navegador — método manual utilizando el inspector de tu navegador
Cómo encontrar el selector CSS usando las herramientas de desarrollo del navegador
Puedes chatear con un soporte de Navi+ para obtener ayuda instantánea en lugar de hacerlo tú mismo. Sin embargo, si deseas hacerlo por tu cuenta, sigue las capturas de pantalla a continuación.
I.3. Tres opciones de publicación
Paso 1: Haz clic en el botón Publicar en el sitio web.
Paso 2: Activa el interruptor “Publicar menú por método de Insertar/Reemplazar”.
Paso 3: Ingresa tu Selector CSS y elige una de las tres opciones de publicación a continuación.
Opción 1: Insertar Antes (más común para Menú de cuadrícula)
Inserta el menú de Navi+ inmediatamente antes del elemento seleccionado.
Ejemplo: Selector CSS main → el Menú de cuadrícula aparece sobre el área de contenido principal de la página.
Selectores CSS comunes para temas de Shopify (Dawn, Sense, Savor, Horizon):
main— la mayoría de los temas de Shopify#MainContent— tema Shopify Dawn
Opción 2: Insertar Después
Inserta el menú de Navi+ inmediatamente después del elemento seleccionado.
Ejemplo: Selector CSS header → el Menú de cuadrícula aparece justo debajo del encabezado.
Selectores CSS comunes para temas de Shopify (Dawn, Sense, Savor, Horizon):
header— la mayoría de los temas de Shopify.header-wrapper— algunos temas
Opción 3: Reemplazar
En la mayoría de las tiendas de Shopify, no hay un elemento de Menú de cuadrícula incorporado para reemplazar. Insertar Antes main es el enfoque recomendado.
Si tu tema tiene un elemento de estilo cuadrícula que deseas reemplazar, usa Modo de depuración o Herramientas de desarrollo del navegador para encontrar su selector.
I.4. Apuntando a dispositivos específicos
Puedes controlar si el Selector CSS se aplica en móvil, escritorio, o ambos añadiendo un sufijo:
| Sufijo | Se aplica a |
|---|---|
(M) |
Solo móvil |
(D) |
Solo escritorio |
| (ninguno) | Tanto móvil como escritorio |
Ejemplos: main(D) — solo escritorio · main(M) — solo móvil · main — 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 añadir un título, configurar el ancho completo y ajustar el margen para esta sección después de añadirla.
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 añadir 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 Menús Mega y Menús de Cuadrícula. NO SE APLICA a Tabbar, FAB, o Menús Deslizantes.
